我试图添加自定义按钮到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');
手动添加按钮,但它并不真正存在于注册表对象中
1条答案
按热度按时间7eumitmz1#
您应该直接在
setup
方法中注册按钮,而不是在init
事件中注册按钮。这可以确保在呈现工具栏之前注册按钮。字符串
通过将
addButton
调用移到init
事件之外并直接移到setup
方法中,自定义按钮现在应该会如预期的那样出现在工具栏中。