如何实现单页中多个Jodit编辑器同时正常工作？

问题原因 #

直接用类选择器".email_content"实例化Jodit时，Jodit只会对匹配到的第一个元素完成编辑器初始化，其余元素不会被处理，因此只有一个编辑器能正常工作。

解决方案 #

遍历所有带email_content类的textarea元素，为每个元素单独实例化Jodit编辑器。

修改后的JS代码 #

// 获取所有目标textarea元素
const textareas = document.querySelectorAll('.email_content');

// 遍历每个元素，单独初始化编辑器
textareas.forEach(textarea => {
    new Jodit(textarea, {
        "toolbarButtonSize": "small",
        "enter": "DIV",
        "buttons": "undo,redo,|,bold,strikethrough,underline,italic,,,,,,,,,,,,,,,,align,"
    });
});

说明 #

• document.querySelectorAll('.email_content')会获取所有匹配的textarea元素，返回一个NodeList集合。
• 通过forEach遍历集合，为每个元素创建独立的Jodit实例，确保所有textarea都能被转换为可用编辑器。

完整代码示例 #

HTML #

<textarea class="email_content"></textarea>
<textarea class="email_content"></textarea>
<textarea class="email_content"></textarea>
<!-- 可继续添加更多textarea元素 -->

JavaScript #

const textareas = document.querySelectorAll('.email_content');
textareas.forEach(textarea => {
    new Jodit(textarea, {
        "toolbarButtonSize": "small",
        "enter": "DIV",
        "buttons": "undo,redo,|,bold,strikethrough,underline,italic,,,,,,,,,,,,,,,,align,"
    });
});

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