如何将HTML编辑器设为初始禁用/只读，点击按钮后可编辑？

步骤1：调整HTML结构 #

先给目标textarea添加readonly属性设置初始只读状态，同时新增触发编辑的按钮：

<textarea name="content" id="editor" readonly></textarea>
<button id="enableEditBtn">启用编辑</button>
<script src="https://htmeditor.com/js/htmeditor.min.js" htmeditor_textarea="editor"></script>

步骤2：添加JavaScript控制逻辑 #

通过按钮点击事件，移除textarea的只读限制，同时同步更新HTMeditor的可编辑状态：

document.getElementById('enableEditBtn').addEventListener('click', function() {
  const editorTextarea = document.getElementById('editor');
  // 移除textarea的只读属性
  editorTextarea.removeAttribute('readonly');
  
  // 兼容HTMeditor实例，确保编辑器同步启用
  if (window.htmeditor?.instances?.editor) {
    const editorInstance = window.htmeditor.instances.editor;
    editorInstance.enable?.();
  }
});

可选替代方案 #

如果需要用disabled属性实现初始不可用，只需把HTML中的readonly换成disabled，JavaScript中对应改为editorTextarea.removeAttribute('disabled')即可。

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