本文详解如何在同一个 HTML 页面中为多个 <textarea> 元素独立、正确地初始化 Jodit 编辑器，避免因复用单一实例导致的冲突或失效问题，并提供可直接运行的代码示例与关键注意事项。
本文详解如何在同一个 html 页面中为多个 `
Jodit 是一款轻量、高性能的开源富文本编辑器，但其构造函数 new Jodit(selector, config) 默认仅对首个匹配元素生效（当传入 CSS 选择器字符串时）。若直接使用 new Jodit('.email_content', {...}) 初始化多个同名 class 的 <textarea>，Jodit 将只绑定第一个元素，其余编辑器将保持原始 <textarea> 状态，无法交互——这正是开发者在批量集成场景下最常见的痛点。
✅ 正确做法是：显式获取所有目标 DOM 节点，再逐个实例化 Jodit。推荐使用现代浏览器兼容的方式遍历节点列表：
<textarea class="editor"></textarea> <textarea class="editor"></textarea> <textarea class="editor"></textarea> <!-- 可扩展至 15+ 个 -->
// ✅ 推荐：使用 querySelectorAll + Array.from（更简洁现代）
const editors = Array.from(document.querySelectorAll('.editor'));
editors.forEach((textarea) => {
new Jodit(textarea, {
toolbarButtonSize: 'small',
enter: 'DIV',
buttons: 'undo,redo,|,bold,strikethrough,underline,italic,|,align'
});
});? 提示：原答案中使用的 [].slice.call(...) 是 ES5 兼容写法，现已建议升级为 Array.from() 或展开语法 [...document.querySelectorAll(...)]，语义更清晰且支持更多数组方法。
⚠️ 关键注意事项：
- 勿重复初始化：确保每个 <textarea> 仅被 new Jodit() 调用一次，否则可能引发 DOM 冲突或内存泄漏；
- class 名需唯一标识：避免与其他组件共用 .editor 类；若必须复用，建议改用专属 data 属性（如 data-jodit-editor）提升选择器精确性；
- 异步加载场景：若编辑器区域动态插入（如 Vue/React 组件挂载后），请在节点真实渲染完成后再执行初始化逻辑（可配合 MutationObserver 或框架生命周期钩子）；
- 配置隔离性：每个实例完全独立，可为不同编辑器设置差异化配置（如工具栏按钮、上传接口、语言包等），无需全局共享状态。
最后，建议在初始化前检查 Jodit 是否已加载，并添加简单错误边界：
if (typeof Jodit !== 'undefined') {
Array.from(document.querySelectorAll('.editor')).forEach(el => {
try {
new Jodit(el, { /* 配置 */ });
} catch (e) {
console.warn('Jodit 初始化失败于元素:', el, e);
}
});
} else {
console.error('Jodit 库未正确加载，请检查 script 标签顺序及 CDN 地址');
}通过上述方式，你可稳定、高效地在单页应用中管理数十个 Jodit 编辑器实例，兼顾性能与可维护性。
