向tinymce vue.js 包装器的工具栏添加自定义按钮的问题

Question

我正在尝试使用 vue.js 包装器将自定义按钮添加到tinymce的工具栏（使用vue 3和tinymce 5） 自定义按钮不显示在工具栏中的问题

我尝试了以下操作，初始化和设置中的日志显示在控制台中以及使用时

tinymce.activeEditor.ui.registry.getAll().buttons

我可以看到那里的测试按钮

<template>
  <Editor
    api-key="any-key"
    v-model="content"
    :init="editorSettings"
    @onInit="handleEditorInit"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue';

export default {
  components: {
    Editor,
  },
  data() {
    return {
      content: '',
      editorSettings: {
        setup: function (editor) {
          console.log('setup', editor);
          editor.on('init', function () {
            console.log('setup init', editor);
            editor.ui.registry.addButton('test', {
              text: 'Custom',
              tooltip: 'Add Custom Action',
              onAction: function () {
                console.log('test button clicked');
              },
            });
          });
        },
        toolbar: 'test',
      },
    };
  },
};
</script>

我遇到过这种方法

editor.ui.registry.addToToolbar('customAction');

手动添加按钮，但它并不真正存在于注册表对象中

Answer 1

您应该直接在

init

方法中注册按钮，而不是在

setup

事件中注册按钮。这可确保在呈现工具栏之前注册按钮。

<template>
  <Editor
    api-key="any-key"
    v-model="content"
    :init="editorSettings"
    @onInit="handleEditorInit"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue';

export default {
  components: {
    Editor,
  },
  data() {
    return {
      content: '',
      editorSettings: {
        setup: function (editor) {
          console.log('setup', editor);

          // Register the custom button directly within the setup method
          editor.ui.registry.addButton('test', {
            text: 'Custom',
            tooltip: 'Add Custom Action',
            onAction: function () {
              console.log('test button clicked');
            },
          });

          editor.on('init', function () {
            console.log('setup init', editor);
          });
        },
        toolbar: 'test',
      },
    };
  },
  methods: {
    handleEditorInit() {
      console.log('Editor initialized');
    }
  }
};
</script>

通过将

addButton

调用移至

init

事件之外并直接移至

setup

方法中，自定义按钮现在应按预期显示在工具栏中。