Froala Editor - Custom Dialogs

Question

I have the following use-case: In my application I use the Froala Editor v2.0.5. There, I have added a custom button to the toolbar, which opens a bootstrap modal dialog, where the user can select or search some specific pages / links. This is all working with the folling code:

$j(function() {
    $j.FroalaEditor.DefineIcon('linkInsertArticle', {NAME: 'search'});
    $j.FroalaEditor.RegisterCommand('linkInsertArticle', {
        title: synapse_translate("article.edit.links.linkInsertArticle"),
        focus: false,
        undo: true,
        refreshAfterCallback: false,
        callback: function() {
            $j("#article-link-dialog").modal();
        }
    });
});

Now I want to insert the selected link into my document.

Problem: When the user clicks somewhere on the dialog, the editor will lose its focus / text selection. Now the user clicks on the "Insert" button on my custom dialog which calls the following method:

editor.link.insert(someLink, someTitle);

and closes the dialog. But this method is not working, because the editor currently has no focus / selection.

Question: Is it possible to open a custom dialog without loosing the focus / selection in the editor? The Froala image manager uses such a dialog, but I dont know how to put my bootstrap modal content to a froala modal.

I still tried the option iframe = true. With this option the editor will always keep its selection, but this options brings some bugs in my application like missing CSS, duiplicate scrollbars and not working table resizing, so I dont want to use this option.

Is there any other way to do it?

Answer 1

Did you try saving and restoring the selection? This worked for me, although it throws an error in chrome ("Discontiguous selection is not supported.")

here is the code I use:

$.FroalaEditor.DefineIcon('linkInsertArticle', {NAME: 'plus'});
    $.FroalaEditor.RegisterCommand('linkInsertArticle', {
        title: "link",
        focus: false,
        undo: true,
        refreshAfterCallback: false,
        callback: function() {
            $("#myModal").modal();
            $('.redactor').froalaEditor('selection.save');

        }
    });


    $(this)
    .on('froalaEditor.initialized', function (e, editor) {
        editor.events.bindClick($('body'), '#insert-text', function () {
          editor.events.focus();
        $('.redactor').froalaEditor('selection.restore');

          editor.html.insert("Insert some html...");

        });
      })
    .froalaEditor();