javascript - Froala 编辑器 - 自定义对话框

Question

我有以下用例:在我的应用程序中，我使用 Froala Editor v2.0.5。在那里，我在工具栏上添加了一个自定义按钮，它会打开一个引导模式对话框，用户可以在其中选择或搜索一些特定的页面/链接。这一切都与以下代码一起工作:

$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();
        }
    });
});

现在我想将选定的链接插入到我的文档中。

问题:当用户单击对话框中的某处时，编辑器将失去其焦点/文本选择。现在，用户单击我的自定义对话框上的“插入”按钮，它会调用以下方法:

editor.link.insert(someLink, someTitle);

然后关闭对话框。但是这个方法不起作用，因为编辑器当前没有焦点/选择。

问题:是否可以在不失去编辑器中的焦点/选择的情况下打开自定义对话框？ Froala 图像管理器使用这样的对话框，但我不知道如何将我的引导模态内容放入 froala 模态。

我仍然尝试了 iframe = true 选项。使用此选项，编辑器将始终保留其选择，但此选项会给我的应用程序带来一些错误，例如缺少 CSS、复制滚动条和无法调整表格大小，因此我不想使用此选项。

还有其他方法吗？

Answer 1

您是否尝试过保存和恢复选择？这对我有用，尽管它会在 chrome 中引发错误(“不支持不连续选择。”)

这是我使用的代码:

$.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();