如何通过按钮点击实现Froala编辑器的禁用与启用？

DevOps 小满

2026-7-12

Froala编辑器切换禁用/启用状态的实现方法

直接修改contenteditable属性不会生效，因为Froala编辑器内部会维护自身状态，点击时会自动重置该属性。正确的做法是使用Froala官方提供的API方法来控制：

1. 保存编辑器实例引用

初始化编辑器时，务必保存实例对象，后续用来调用控制方法：

// 原生JS版本
const editor = new FroalaEditor('#editor', {
  // 你的编辑器配置项，比如 toolbarButtons、height 等
});

如果是jQuery集成版本：

// jQuery版本
const $editor = $('#editor').froalaEditor({
  // 你的编辑器配置项
});

2. 绑定切换按钮的点击事件

通过按钮点击切换disable()和enable()方法，同时更新按钮文本和状态标记：

// 原生JS版本示例
const toggleBtn = document.getElementById('toggle-editor');
let isDisabled = false;

toggleBtn.addEventListener('click', () => {
  if (isDisabled) {
    editor.enable();
    toggleBtn.textContent = '禁用编辑器';
  } else {
    editor.disable();
    toggleBtn.textContent = '启用编辑器';
  }
  isDisabled = !isDisabled;
});

jQuery版本示例：

const toggleBtn = $('#toggle-editor');
let isDisabled = false;

toggleBtn.click(() => {
  if (isDisabled) {
    $editor.froalaEditor('enable');
    toggleBtn.text('禁用编辑器');
  } else {
    $editor.froalaEditor('disable');
    toggleBtn.text('启用编辑器');
  }
  isDisabled = !isDisabled;
});