将文本添加到 Froala 文本编辑器

Question

我正在尝试以编程方式将 html 输入到 Froala 文本编辑器中。 根据他们的文档，这应该有效：

$(function(){
    $('#editor').editable("setHTML", "<p>My custom paragraph.</p>", false);
});

但是当我重新加载页面时，我只会得到空白空间，没有错误。 这与 ID #editor绑定到 textarea。 如果我使用此代码：

$(function(){
    $('#editor').editable({inlineMode : false});
});

...然后一切正常。

有谁知道如何以编程方式将 html 输入到这个编辑器中。

Answer 1

你应该试试这个：

$('#editor').froalaEditor('html.set', 'My custom paragraph.');

在此参考中查看有关froala方法的详细信息： https ://www.froala.com/wysiwyg-editor/docs/methods#html.set

Answer 2

对于您正在寻找 v3 答案的用户，您可以通过以下方式在 v3 中添加文本：

var editor = new FroalaEditor('.selector', {}, function () {
  // Call the method inside the initialized event.
  editor.html.insert('<p>My custom paragraph.</p>');
})

另外，如果您想替换整个内容，则可以使用 set 方法

var editor = new FroalaEditor('.selector', {}, function () {
  // Call the method inside the initialized event.
  editor.html.set('<p>My custom paragraph.</p>');
})

Answer 3

两者都用。 首先你必须创建编辑器，然后你可以设置 HTML

$(function(){
    $('#editor').editable({inlineMode : false});
    $('#editor').editable("setHTML", "<p>My custom paragraph.</p>", false);
});

Answer 4

使用最新版本的 Froala 可以正常工作

$("#froalaEditor")[0]["data-froala.editor"].html.set('This should work fine');

Answer 5

要附加文本，请使用html.insert

$("#editor").froalaEditor('html.insert','<p>new text to append</p>');

Answer 6

插入 HTML 后，使用“同步”

$("#editor").editable("insertHTML", "123456", true);
$("#editor").editable("sync");

Answer 7

只是为了说明。 在 HTML 中

<div id="froala-editor">
  <p>something</p>
</div>

在javascript中

  $(function() {
    $('div#froala-editor').froalaEditor({
      pastePlain: true
    })
  });

Answer 8

尝试这个：

$('#editor').froalaEditor('html.set', 'My custom paragraph.');
$('#editor').froalaEditor('undo.saveStep', 'My custom paragraph.');

参考： https ://github.com/froala/wysiwyg-editor/issues/1578

Answer 9

如果您将它与 React js 一起使用，我就是这样做的... FroalaEditorComponent 中有一个事件对象，它已初始化为一个事件。 这是代码示例：

initialized: function () {
               this.html.set(formik?.values?.body); // not working for me
               this.html.set(`<h1>Hello!</h1>`); // working fine
               console.log(this);
            },