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

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

问题： 当用户单击对话框上的某个位置时，编辑器将失去其焦点/文本选择。现在，用户点击＆＃34;插入＆＃34;我的自定义对话框上的按钮调用以下方法：

editor.link.insert(someLink, someTitle);

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

问题： 是否可以打开自定义对话框而不会丢失编辑器中的焦点/选择？ Froala图像管理器使用这样的对话框，但我不知道如何将我的bootstrap模态内容放到froala模式中。

我仍尝试使用iframe = true选项。使用此选项，编辑器将始终保持其选择，但此选项在我的应用程序中带来一些错误，如缺少CSS，duiplicate滚动条和不工作表调整大小，所以我不想使用此选项。

还有其他办法吗？

Answer 1

您是否尝试过保存并恢复选择？这对我有用，虽然它会在chrome中引发错误（＆＃34;不支持不连续的选择。＆＃34;）

这是我使用的代码：

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

Froala编辑器 - 自定义对话框

1 个答案: