RoosterJS 9.9.1版本如何程序化设置HTML内容？

方案1：直接操作编辑器可编辑DOM元素 #

RoosterJS编辑器实例可以通过getContentEditableElement()拿到对应的DOM节点，直接修改其innerHTML就能替换全部内容，操作完记得同步编辑器状态：

// 假设editor是你的RoosterJS编辑器实例
const editableElement = editor.getContentEditableElement();
if (editableElement) {
  editableElement.innerHTML = '<p>你的新HTML内容</p>';
  // 触发内容变更事件，同步编辑器内部状态
  editor.triggerContentChanged();
}

方案2：用编辑器原生API清空后插入 #

先选中并删除全部现有内容，再插入新HTML，这种方式贴合编辑器原生逻辑，无需手动同步状态：

// 选中所有内容并删除
editor.selectAll();
editor.deleteSelectedContent();
// 插入新内容
editor.insertContent('<p>你的新HTML内容</p>');

方案3：自定义封装setContent方法 #

如果需要多次复用，可以自己封装一个类似官方setContent的方法：

function setEditorContent(editor, html) {
  const editableElement = editor.getContentEditableElement();
  if (!editableElement) return;

  editor.selectAll();
  editor.deleteSelectedContent();
  editor.insertContent(html);
}

// 使用示例
setEditorContent(editor, '<h2>自定义方法设置的内容</h2>');

注意事项 #

• 传入的HTML要确保安全，若处理用户输入需做XSS过滤，避免注入恶意脚本。
• 直接操作DOM效率更高，用编辑器API则更兼容内部校验逻辑，可根据场景选择。

内容的提问来源于stack exchange，提问作者Ajay