我正在使用 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);
});
任何知道如何解决这个问题的人都会有很大的帮助。
【问题讨论】：
看起来您正在失去插入符号的上下文。我遇到了同样的问题（即使在 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);
希望对你有帮助
【讨论】：
看起来你有一个外部按钮。为此，编辑器有一个内置机制，在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()
【讨论】：
我遇到了同样的问题。我的场景是：在编辑器内单击->单击工具栏按钮->在对话框中修改编辑器内容->将修改后的内容保存到编辑器中。编辑器在对话框中工作时丢失了上下文。我通过在工作的开头放置一个标记来修复它 .froalaEditor('html.insert', '{MARKER}') 并在之后使用标记来知道最后一个插入符号的位置。
或者你可以使用 selection.save 和 selection.restore 方法：https://www.froala.com/wysiwyg-editor/examples/selection
【讨论】：
如果有人正在查找有关 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);
}}
/>
),
}));
},
如果这没有帮助，那么您可以尝试将其放在回调的承诺示例中：
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 总是附加到编辑器的底部。如果其他人有更好的想法，我也在寻找答案。
【讨论】：