如何在单页中初始化多个 Jodit 富文本编辑器实例

本文详解如何在同一个 HTML 页面中为多个 textarea 元素独立、正确地初始化 Jodit 编辑器避免因复用单一实例导致的冲突或失效问题并提供可直接运行的代码示例与关键注意事项。 本文详解如何在同一个 html 页面中为多个 元素独立、正确地初始化 jodit 编辑器避免因复用单一实例导致的冲突或失效问题并提供可直接运行的代码示例与关键注意事项。Jodit 是一款轻量、高性能的开源富文本编辑器但其构造函数 new Jodit(selector, config) 默认仅对首个匹配元素生效当传入 CSS 选择器字符串时。若直接使用 new Jodit(.email_content, {...}) 初始化多个同名 class 的 textareaJodit 将只绑定第一个元素其余编辑器将保持原始 textarea 状态无法交互——这正是开发者在批量集成场景下最常见的痛点。? 正确做法是显式获取所有目标 DOM 节点再逐个实例化 Jodit。推荐使用现代浏览器兼容的方式遍历节点列表textarea classeditor/textareatextarea classeditor/textareatextarea classeditor/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(...)]语义更清晰且支持更多数组方法。?? 关键注意事项 Tellers AI Tellers是一款自动视频编辑工具可以将文本、文章或故事转换为视频。