如何在Quill编辑器外部将文本格式化为HTML？

嘿，刚好碰到过类似的需求，Quill本身就自带了处理这个的能力，不用绕弯路～结合你现有的代码场景，分两种情况给你讲：

1. 从当前Quill编辑器实时获取HTML内容 #

如果你是想把编辑器里正在编辑的内容，直接转成HTML显示在页面其他地方（比如预览区），或者提交时同时获取HTML格式，直接用Quill实例的root.innerHTML属性就行，这是最直接的方式：

// 假设你已经初始化了Quill实例：var quill = new Quill('#editor-container', {...});

// 获取编辑器内容对应的HTML
const editorHtml = quill.root.innerHTML;

// 示例1：把HTML插入到页面的预览区域
document.getElementById('preview-div').innerHTML = editorHtml;

// 示例2：如果需要提交到PHP，可以把HTML存到另一个隐藏输入框
document.getElementById('editor-html').value = editorHtml;

对应的HTML可以加个额外的隐藏输入框：

<input name="editor1" type="hidden">
<input name="editor-html" id="editor-html" type="hidden">
<div id="editor-container"></div>

2. 从数据库取出Delta内容，在外部转成HTML #

如果你已经把Quill的Delta格式内容存在了数据库，现在想在没有编辑器的页面（或者编辑器外部）把Delta转成HTML，可以创建一个隐藏的临时Quill实例来处理转换，不需要把它渲染到页面上：

// 假设从数据库取出的Delta数据是savedDelta（就是你之前存在数据库里的内容）
const savedDelta = {"ops":[{"insert":"测试文本"},{"attributes":{"italic":true},"insert":"（斜体）"},{"insert":"\n"}]};

// 创建一个临时的Quill实例，不需要挂载到页面DOM
const tempQuill = new Quill(document.createElement('div'), {
  theme: 'snow' // 和你原来的编辑器主题保持一致，确保格式匹配
});

// 加载Delta内容到临时实例
tempQuill.setContents(savedDelta);

// 获取转换后的HTML
const htmlContent = tempQuill.root.innerHTML;

// 把HTML放到你需要显示的地方
document.getElementById('external-content').innerHTML = htmlContent;

注意事项 #

• 确保临时Quill实例的版本和你正在使用的一致（你用的是1.3.6，上面的代码完全兼容这个版本）
• 临时实例不需要添加到页面DOM中，Quill依然能正常处理内容转换
• 如果只是需要在提交时获取HTML，也可以在表单提交事件里直接把quill.root.innerHTML赋值给隐藏输入框，和Delta内容一起提交到PHP脚本

内容的提问来源于stack exchange，提问作者Stiofán