不能直接给加readonly属性，因为htmeditor初始化时会将其替换为iframe+工具栏结构，readonly会导致事件绑定失败、工具栏无响应或初始化报错。
HTMEditor 没有 readonly 或 disable() 方法，直接设 <textarea readonly></textarea> 会初始化失败——必须用容器层拦截 + 状态联动。
为什么不能直接给 <textarea></textarea> 加 readonly 属性？
HTMEditor 初始化时会把 <textarea></textarea> 替换为 iframe + 工具栏结构，原始 textarea 只作内容同步源。加了 readonly 后，编辑器可能无法正确绑定事件，或工具栏按钮点击无响应，甚至初始化报错（如 Cannot read property 'focus' of null）。
常见错误现象：
- 编辑器区域空白或仅显示原始 textarea 文本
- 工具栏按钮点击无效，光标无法进入内容区
- 控制台报
TypeError: Cannot set property 'disabled' of null类错误
用 pointer-events: none 封装容器实现视觉只读
这是最轻量、兼容性最好、且可动态切换的方案。它不干扰 HTMEditor 内部逻辑，只阻断用户交互。
关键点：
- 必须作用于**外层容器**（不是
<textarea></textarea>，也不是编辑器生成的 iframe） - 需同时设置
.editor-readonly *防止子元素（如工具栏按钮、iframe 内内容）捕获事件 - 该方式不影响表单提交——
<textarea></textarea>的 value 仍会被序列化发送
示例 HTML 结构：
<div id="editor-container" class="editor-readonly"> <textarea name="content" id="editor">欢迎使用 HTML 编辑器</textarea><script src="https://htmeditor.com/js/htmeditor.min.js" htmeditor_textarea="editor"></script> </div>
对应 CSS：
.editor-readonly {
pointer-events: none;
}
.editor-readonly * {
pointer-events: none;
}
/* 可选：加半透明遮罩和提示文字 */
.editor-readonly::before {
content: "(只读)";
position: absolute;
top: 8px;
right: 12px;
font-size: 0.85em;
color: #666;
background: #f5f5f5;
padding: 2px 6px;
border-radius: 3px;
}
动态切换只读/编辑状态的 JS 写法
切换只需操作容器 class，无需重初始化编辑器，避免闪动或状态丢失。
推荐写法（注意：不要用 element.disabled = true）：
// 进入只读
document.getElementById('editor-container').classList.add('editor-readonly');
<p>// 恢复编辑
document.getElementById('editor-container').classList.remove('editor-readonly');</p>
容易踩的坑：
- 用
setAttribute('class', 'editor-readonly')会覆盖原有 class，导致样式或 JS 行为异常 - 未清除
tabindex="-1"或aria-disabled="true"，键盘用户仍可通过 Tab 进入并触发 focus 事件 - 切换后没同步更新关联 UI（比如“编辑”按钮未变“保存”，或未禁用其他依赖编辑状态的操作）
如果必须语义化禁用（表单提交时跳过该字段）
这种情况极少，因为 HTMEditor 的核心价值就是富文本内容提交。但若真有需求（例如临时隐藏整个字段），唯一可靠方式是：
- 在表单提交前，用 JS 移除或清空
<textarea></textarea>的 value - 或用
<input type="hidden">单独存值，再把<textarea></textarea>设为disabled（此时 HTMEditor 已初始化完成，禁用不会影响渲染）
⚠️ 注意：disabled 对 HTMEditor 的 iframe 内容无效，它只影响原始 <textarea></textarea> 是否参与表单序列化。
真正麻烦的从来不是加一行 pointer-events: none，而是忘了在切换只读时，同步处理焦点管理、无障碍属性（aria-readonly）、以及后端对字段值的校验逻辑——前端锁得住界面，锁不住请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
