Froala编辑器：单击DIV时插入到光标位置

Question

我是一个有用的助手，可以为您翻译文本。

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

这是我所做的事情：

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

Jquery：

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

希望能有人知道如何解决这个问题，这将是非常有帮助的。

- yodann

---

你可以像这个例子一样，在Froala工具栏中添加自定义按钮：https://www.froala.com/wysiwyg-editor/examples/insert-html - Slonski

Answer 1

似乎你正在失去光标的上下文。我遇到了同样的问题（即使在 V3 中），当我必须点击一个外部按钮，打开一个弹出窗口，在弹出窗口中用户会选择一个 HTML 模板，该模板必须插入到最后已知的光标位置。

我的做法是使用“selection save”保存光标位置，打开弹出窗口，获取文本并恢复选择，然后进行“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);

希望这能有所帮助。

- Guru Kara

---

这正是我所需要的。看起来我们基本上有完全相同的用例。谢谢！ - dabyland

我在“失焦”事件中放置了editor.selection.save()，因此每次编辑器失去焦点时，我都会保存光标位置，并在需要插入时恢复它。 - user5636914

传奇。感谢 @guru！ - Jono

Answer 2

看起来你有一个外部按钮。对于这个，编辑器有一个内置的机制，在演示中有突出显示。在你的情况下，它应该是这样的：

$('#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()

- st3fan

Answer 3

如果有人正在寻找关于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总是附加到编辑器底部。如果有其他人有更好的想法，我也在寻找答案。

- Shnigi

Answer 4

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

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

- Slaj