Question

我正在使用Froala v2.6.1，当用户点击div时，我想在编辑器的最后一个插入位置插入一个字符串，但字符串总是插在编辑器的末尾。

这是我做的事情：

<div class="variable" data-value="{{user_id}}">USER ID</div>

Jquery的：

$('div.variable').click(function() {
    $("#template_editor").froalaEditor('html.insert', $(this).data('value'), true); 
});

任何人都知道如何解决这个问题会有很大的帮助。

Answer 1

您似乎正在失去插入符号的上下文。我遇到了相同的问题（甚至在V3中），在该问题中，我必须单击一个外部按钮，这将打开一个弹出窗口，在弹出窗口中，用户将选择一个html模板，该模板必须插入到最后一个已知模板中插入符号。

我所做的是使用选择保存保存插入符号的位置，打开弹出窗口，获取文本并恢复选择，然后执行 html.insert

1）首先保存选择

// Call this before doing any kind of insert operation
editor.selection.save();

2）恢复选择，然后插入html

// Restore the selection
editor.selection.restore();
editor.html.insert(data.Body);

希望这会有所帮助

Answer 2

看起来你有一个外部按钮。为此，编辑器具有内置机制，在demo中突出显示。在你的情况下，它将是这样的：

$('#template_editor')
  .on('froalaEditor.initialized', function (e, editor) {
    editor.events.bindClick($('body'), 'div.variable', function (ev) {
      var that = ev.originalEvent && ev.originalEvent.originalTarget;
      editor.html.insert($(that).data('value'));
    });
  })
  .froalaEditor()

Answer 3

我有同样的问题。我的情况是：在编辑器中单击->单击工具栏按钮->在对话框中修改编辑器内容->将修改后的内容保存到编辑器中。在对话框中工作时，编辑器失去了上下文。我通过在工作开始.froalaEditor（'html.insert'，'{MARKER}'）处放置一个标记来修复它，然后使用该标记知道最后一个插入符号的位置。

或者您可以使用selection.save和selection.restore方法：https://www.froala.com/wysiwyg-editor/examples/selection

Answer 4

万一有人在寻找有关Froala v3的信息，并且使用React，我确实遇到了一些问题，并且无法按我想要的那样工作。 Froala总是在插入html之前创建换行符。我的问题可能与通过插件方法打开自定义模式有关，因此Froala失去了上下文。这是我尝试的一些修复程序：

内部自定义插件使用以下命令保存光标位置：this.selection.save();

如果这可以解决您的问题，请先尝试，否则请继续。在插入HTML还原选择之前，请插入html和undoSavestep以获取Froala更新。

this.selection.restore();
this.html.insert(html);
this.undo.saveStep();

React中的完整示例：

Froala.RegisterCommand('customcommand', {
        title: mytitle,
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback(_, val) {
            this.selection.save();
            return displayDialog((removeDialog) => ({
                children: (
                    <DialogComponent
                        removeDialog={removeDialog}
                        submit={(html) => {
                            removeDialog();
                            this.selection.restore();
                            this.html.insert(html);
                        }}
                    />
                ),
            }));
        },

如果这没有帮助，那么您可以尝试将其放在回调的promise示例中：

  callback: function () {
            this.selection.save();
            let result = new Promise((resolve) => {
                displayDialog((removeDialog => ({
                    children: (
                        <DialogComponent
                            removeDialog={removeDialog}
                            submit={(html) => {
                                removeDialog();
                                resolve(html);
                            }}
                        />
                    ),
                })));
            });
            result.then((html) => {
                this.selection.restore();
                this.html.insert(html);
                this.undo.saveStep(); // Make froala update https://github.com/froala/wysiwyg-editor/issues/1578
            });

这是我到目前为止最接近的东西。这会将元素几乎附加到正确的位置。我只是不明白为什么插入记号的位置不固定，而Froala总是附加到编辑器的底部。如果还有其他更好的主意，我也在寻找答案。

Froala编辑器：点击div

4 个答案: