Froala 编辑器：单击 div 时插入插入符号位置

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

看起来你那里有一个外部按钮。为此，编辑器有一个内置机制，在 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 2

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

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

Answer 3

您似乎丢失了插入符号的上下文。我遇到了同样的问题（即使在 V3 中）我不得不点击一个外部按钮来打开一个弹出窗口，在弹出窗口中用户会 select a html 模板必须插入最后一个已知的插入符后缀。

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

1) 先保存selection

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

2) 恢复select离子然后插入html

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

希望对您有所帮助

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 时插入插入符号位置

Froala editor: insert into caret position when clicking a div

html

jquery

froala