本文详解如何在单页中正确初始化多个 Toast UI Editor 实例，并可靠获取其 HTML 内容（含图片等富文本元素），解决 getHtml() 调用失败、实例引用丢失等常见问题。
本文详解如何在单页中正确初始化多个 toast ui editor 实例，并可靠获取其 html 内容（含图片等富文本元素），解决 `gethtml()` 调用失败、实例引用丢失等常见问题。
Toast UI Editor 是一款功能强大且高度可定制的开源富文本编辑器，但在实际项目中——尤其是需支持多字段、多编辑器共存的表单场景（如 CMS 后台、动态表单生成器）——开发者常因实例管理不当而无法正确调用 getHtml()，导致保存内容为空、报错 undefined is not a function 或 getInstance() is not a function。根本原因在于：Toast UI Editor 不支持通过 DOM 属性或 jQuery 间接获取实例，每个编辑器必须被显式创建并持久化引用。
✅ 正确初始化：全局注册 + 唯一 ID 管理
避免使用动态变量名（如 editor{{ field.unique_id }}）或依赖 data-editorid 属性反向查找实例。推荐将所有编辑器统一挂载至 window.editors 对象，以 field.unique_id 为键安全存储：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<div class="textarea-editor" data-name="{{ fieldname }}" data-editor-id="{{ field.unique_id }}" id="editor-{{ field.unique_id }}"></div>// ✅ 推荐初始化方式（纯 JS，无 jQuery 依赖）
window.editors = window.editors || {};
const uniqueId = '{{ field.unique_id }}';
const editorElement = document.querySelector(`#editor-${uniqueId}`);
if (editorElement) {
window.editors[uniqueId] = new toastui.Editor({
el: editorElement,
height: '200px',
initialEditType: 'wysiwyg',
previewStyle: 'vertical',
toolbarItems: [
['heading', 'bold', 'italic', 'strike'],
['hr', 'quote'],
['ul', 'ol', 'task', 'indent', 'outdent'],
['table', 'image', 'link'],
['code', 'codeblock'],
['scrollSync']
],
initialValue: `{{ field.value|safe }}`
});
}⚠️ 注意事项：
- 务必确保
id="editor-{{ field.unique_id }}"在整个页面中唯一；- 初始化代码应在 DOM 加载完成后执行（建议包裹在
DOMContentLoaded或<script></script>放置于
