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

mbzjlibv  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(168)

我试图添加自定义按钮到tinymce的工具栏使用vue.js Package (使用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');手动添加按钮,但它并不真正存在于注册表对象中

7eumitmz

7eumitmz1#

您应该直接在setup方法中注册按钮,而不是在init事件中注册按钮。这可以确保在呈现工具栏之前注册按钮。

<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方法中,自定义按钮现在应该会如预期的那样出现在工具栏中。

相关问题