如何在RoosterJS编辑器中设置HTML内容？

Question

我目前正在项目中使用RoosterJS富文本编辑器，我需要以编程方式设置HTML内容。我的目标是用新的 HTML 字符串替换编辑器的全部内容。

我已经浏览了 RoosterJS 文档并探索了源代码。我在 GitHub 上的源代码中找到了一个名为 setContent 的方法，它似乎完全符合我的需要。但是，我正在使用的包（roosterjs：9.9.1）中似乎不包含此方法。

是否有替代方法或推荐方法以编程方式设置或替换 RoosterJS 编辑器的整个 HTML 内容？如果 setContent 不是包的一部分，我怎样才能实现类似的功能？

Answer 1

我对这个库不熟悉，所以我可能说错了。但有趣的是，库本身的代码示例不起作用：

https://www.npmjs.com/package/roosterjs#usage

var contentDiv = document.getElementById('contentDiv');  
var editor = roosterjs.createEditor(contentDiv);  
editor.setContent('Welcome to <b>RoosterJs</b>!'); // Error: setContent is not defined

通过反复试验，据我了解，我们需要添加一个适配器： https://www.npmjs.com/package/roosterjs-editor-adapter

我能够使这个

setContent

可用，但我不知道为什么有两个不同的库，所以在我的代码中，我保留了两个变量。

我使用了

npm

，但文档表明

yarn

npm install "roosterjs"
npm install "roosterjs-editor-adapter"

您可以通过将其导入到您的项目中来完成此操作，如下所示：

import * as roosterjs from "roosterjs"
import { EditorAdapter } from "roosterjs-editor-adapter"

/*
OR via cdn:
import * as roosterjs from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
import { EditorAdapter } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
*/

console.log("roosterjs", roosterjs)
console.log("EditorAdapter", EditorAdapter)

const contentDiv = document.getElementById("contentDiv"),
  editor = roosterjs.createEditor(contentDiv), // Editor2 {core: {…}, cloneOptionCallback: ƒ}
  editor2 = new EditorAdapter(contentDiv) // EditorAdapter2 {core: {…}, contentModelEditorCore: {…}, cloneOptionCallback: ƒ}

editor2.setContent("<strong>html code example</strong>")

成功了，代码被插入到

<textarea>

中。 但是，我不确定使用是否有任何副作用

editor

和

editor2

。

我发现了一些可能会添加更多信息的链接：

设置内容

编辑器适配器