XF 2.2 Interacting with the editor once initialized?

[Siropu]

In XF 2.1 you could do something like $('.selector').FroalaEditor('edit.off'); after the editor was initialized.
How can you do the same thing in XF 2.2?

 

[Mike]

The most straightforward thing might be to listen for the editor:init event that we trigger, as that receives both the Froala object as well as XF's editor object as arguments.

Otherwise, I think it may be a little more complex as Froala doesn't expose its jQuery interface any longer. I think if you access the raw DOM element for that selector, it looks like they store a reference to the editor object in data-froala.editor.

When you have the editor object, you'd call the method you want like edObj.edit.off().

 

[Siropu]

Thank you Mike, works great.

 

[Siropu]

The only issue I'm having with the current editor version is with the focus.

XF.EditorHelpers.focus(editor); works when page loads, but after that, it is not working. editor.events.focus(); doesn't work at all, no errors.

 

[Glaude]

Hi everyone, little thread digging, but my question is almost the same and this thread is well referenced, so might help other people if the answer is found.

I too, want to interact with the froala editor. I would like to insert content (a string) at the carret position inside the editor, this behavior would be triggered by a button outside the editor.

I know froala support this with the html.insert function, but I can't figure out how to use it.
This is the reference : https://froala.com/wysiwyg-editor/docs/methods/#html.insert

Following the example, I suppose I don't have to initiate a new editor given that it's already done, using only the method doesn't seem to work.

I'm not the best at JS so I may be completely missing something here.

If anyone has a good tip or a solution, this would be greatly appreciated !
Thanks all !

 

[Siropu]

This should work:

$('.js-editor').on('editor:init', function(e, editor)
{
    editor.html.insert(mystring, true);
});

 

[Glaude]

This should work:

$('.js-editor').on('editor:init', function(e, editor)
{
    editor.html.insert(mystring, true);
});

Thanks a lot for this, but

<script>
        function testinsert(){
            $('.js-editor').on('editor:init', function(e, editor)
            {
                editor.html.insert("mystring", true);
            });
        }
</script>
        <div class="button" onclick="testinsert();">
            <span class="button-text">Insert stuff</span>
        </div>

Doesn't do anything to the editor, it doesn't show any error in the console either, any clue for me ? I'm probably missing something extremely obvious like wrong way to call the function

 

[Siropu]

Try this instead:

var froala;

$('.js-editor').on('editor:init', function(e, editor)
{
    froala = editor;
});

function testinsert()
{
     froala.html.insert("mystring", true);
}

 

[Glaude]

Try this instead:

var froala;

$('.js-editor').on('editor:init', function(e, editor)
{
    froala = editor;
});

function testinsert()
{
     froala.html.insert("mystring", true);
}

Thanks again, and sorry in advance, but this is throwing this error in the console :

Uncaught TypeError: Cannot read properties of undefined (reading 'html')
    at testinsert ((index):1421:14)
    at HTMLDivElement.onclick (VM4957 :1424:54)

Before that I had to load the jquery script just above the code, despite it already being loaded by XenForo, otherwise the script would not recognize the shorthand "$" for document ready (it was not having an issue with the previous code you gave me, weirdly).

Really sorry to take up your time on this, it's that last little thing in my addon that is blocking me. I'm a bit at a loss, while I'm not great at JS I do understand it a bit and your code should work.

 

[Glaude]

Little additon to my quest : after some stackoverflow reading, I managed to interact with the editor with :

function testinsert()
{
    $(".js-editor")[0]["data-froala.editor"].html.insert('This should work fine');
  
}

But this doesn't seem to behave as intended as this will append to the end of the current text, no matter what, and always adding the string content between <p> brackets.

I'm continuing to fiddle around, I manage to get the text either at the very beginning of the editor or at the end, but never at the cursor. I added the "focus" function to make sure I wasn't just out of it : no change. I tried to save my selection & restore it too, no change.

New edit : Seems it's the way of selecting the editor with the position [0] messing things up as while being able to interact with the editor, seems like no function works as they should (focus works, save selection and restore goes respectively to the begining of the editor or the end)

 

[Siropu]

Here's a working example:

!function($, window, document, _undefined)
{
     XF.CustomEditorFunction = XF.Element.newHandler({
          options: {
               string: ''
          },
          froala: null,

          init: function()
          {
               var t = this;

               $('.js-editor').on('editor:init', function(e, editor)
               {
                    t.froala = editor;
               });

               this.$target.on('click', $.proxy(this, 'insert'))
          },

          insert: function(e)
          {
               this.froala.html.insert(this.options.string, true);
          }
     });

     XF.Element.register('custom-editor-function', 'XF.CustomEditorFunction');
}
(jQuery, window, document);

<button data-xf-init="custom-editor-function" data-string="test">Click me!</button>

 

[Glaude]

Thanks again for all of this help, but this is not working and produce the following error :

Uncaught ReferenceError: jQuery is not defined
    at (index):1442:2

In reference to :

(jQuery, window, document);

Maybe I should have specified from the start, but I was not thinking it had any relevance : I'm trying those script at the bottom of the "editor" template, inside <script> tags.
The final version will be in a .js file loaded in the head.

You've helped me so much already, I would understand if you wanted to give up on this

 

[Siropu]

I'm trying those script at the bottom of the "editor" template, inside <script> tags.

Not the best place but try this instead:

<xf:js>
 js here without <script> tag.
</xf:js>

 

[Glaude]

Not the best place but try this instead:

<xf:js>
 js here without <script> tag.
</xf:js>

This place was just choosen to run the testing, this was suppose to be the resting place of the button only.

With the code between xf js, it's producing the same result I had before, the text is inserted only at the end of the editor box, between <p> elements

I can try running the script from somewhere else if you think it would be better

 

[Siropu]

I can try running the script from somewhere else if you think it would be better

If the code works, location doesn't meter. I have tested the code and works well for me, inserting the string at caret position. I'm using Chrome on Ubuntu.

 

[Glaude]

Tried on Chrome on Win 10, will try on some other browsers and report back to see if that made a difference

 

[Glaude]

Tested on Latest Firefox, same behavior, the text goes at the end off the editor only. I think you gave it your best shot, thanks a lot for all your help, unless you see something else that could be tried, which I'm always all hear, I hope what you posted will be able to help some other people though !