如何批量禁用/启用指定表单中的多个Jodit编辑器?
批量禁用/启用指定表单内的Jodit编辑器
Jodit编辑器初始化后,会将实例挂载到对应的<textarea>元素的_jodit属性上,利用这个特性,我们可以复用你处理普通文本框的思路,实现通用的批量控制逻辑:
通用实现代码
// 禁用表单内所有Jodit编辑器及对应textarea function disableFormJoditEditors(formId) { const container = document.getElementById(formId); const textareas = container.getElementsByTagName('textarea'); for (let i = 0; i < textareas.length; i++) { const textarea = textareas[i]; // 检查当前textarea是否关联了Jodit实例 if (textarea._jodit) { textarea._jodit.setDisabled(true); } // 同步禁用原textarea(可选,保持和编辑器状态一致) textarea.disabled = true; } } // 启用表单内所有Jodit编辑器及对应textarea function enableFormJoditEditors(formId) { const container = document.getElementById(formId); const textareas = container.getElementsByTagName('textarea'); for (let i = 0; i < textareas.length; i++) { const textarea = textareas[i]; if (textarea._jodit) { textarea._jodit.setDisabled(false); } textarea.disabled = false; } } // 使用示例 disableFormJoditEditors('yourFormId'); // 禁用 // enableFormJoditEditors('yourFormId'); // 启用
原理说明
- Jodit在初始化时,会自动将编辑器实例绑定到目标textarea的
_jodit属性上,无需手动维护实例列表 - 遍历表单内所有textarea,通过检查
_jodit属性是否存在,就能判断该元素是否已被初始化为Jodit编辑器 - 调用Jodit实例的
setDisabled()方法控制编辑器状态,同时同步设置原textarea的disabled属性,保证交互一致性
内容的提问来源于stack exchange,提问作者ketna
相关产品推荐
相关产品推荐

