如何在TinyMCE初始化方法中获取元素引用，按data属性控制工具栏？

没问题，这其实很容易实现！TinyMCE提供了几种灵活的方式让你获取到对应的textarea元素，从而读取data-allow-image属性并控制工具栏项。我给你两个实用的实现方案，你可以根据自己的场景选择：

方案一：提前获取textarea元素（适合单个编辑器场景） #

如果你的页面只有一个TinyMCE编辑器，或者可以提前定位到目标textarea，你可以在初始化前先读取它的data属性，再把配置传入tinymce.init：

HTML示例 #

<textarea id="my-editor" data-allow-image="true"></textarea>

JavaScript实现 #

// 先获取目标textarea元素
const editorTextarea = document.getElementById('my-editor');
// 读取data属性，转换为布尔值（注意dataset返回的是字符串）
const allowImage = editorTextarea.dataset.allowImage === 'true';

tinymce.init({
  selector: '#my-editor',
  // 根据属性决定是否加载图片插件
  plugins: allowImage ? 'image code' : 'code',
  // 动态生成工具栏项
  toolbar: allowImage ? 'undo redo | bold italic | image' : 'undo redo | bold italic',
  // 其他基础配置
  height: 300,
  menubar: false
});

方案二：使用setup回调（适合多编辑器实例场景） #

如果页面上有多个TinyMCE编辑器，每个textarea的data-allow-image值可能不同，推荐用setup回调——每个编辑器实例初始化时都会触发这个回调，你可以通过editor.target拿到当前实例对应的textarea元素：

HTML示例 #

<textarea class="tinymce-editor" data-allow-image="true"></textarea>
<textarea class="tinymce-editor" data-allow-image="false"></textarea>

JavaScript实现 #

tinymce.init({
  selector: '.tinymce-editor',
  plugins: 'image code',
  // 先定义完整的工具栏，后续再控制按钮状态
  toolbar: 'undo redo | bold italic | image',
  height: 300,
  menubar: false,
  setup: function(editor) {
    // 获取当前编辑器对应的textarea元素
    const textarea = editor.target;
    // 读取data属性
    const allowImage = textarea.dataset.allowImage === 'true';

    if (!allowImage) {
      // 禁用图片工具栏按钮
      editor.ui.registry.addButton('image', {
        disabled: true
      });
      // 或者直接移除图片按钮（二选一即可）
      // editor.settings.toolbar = editor.settings.toolbar.replace('| image', '');
    }
  }
});

补充说明 #

• 注意dataset返回的属性值都是字符串，所以需要用=== 'true'来转换为布尔值，避免判断出错。
• 如果选择禁用按钮而不是移除，用户会看到灰色的不可点击状态；如果直接移除按钮，工具栏上就不会显示该项，你可以根据需求选择。

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