tinymce下的editor.vue如何添加自定義按鈕
时间: 2024-05-11 07:17:08 浏览: 102
在vue中封装tinymce5,带自定义按钮demo(包括视频,图片上传)
要在tinymce的editor.vue中添加自定义按钮,可以按照以下步骤进行:
1. 在组件中添加一个toolbar变量,用于定义添加的按钮,例如:
```javascript
toolbar: "undo redo | bold italic underline | myButton"
```
这里添加了一个名为“myButton”的自定义按钮。
2. 在mounted()生命周期方法中,使用tinymce提供的API方法添加自定义按钮,例如:
```javascript
mounted() {
tinymce.init({
selector: "#my-editor",
plugins: "link image code",
toolbar: this.toolbar,
setup: editor => {
editor.ui.registry.addButton("myButton", {
text: "My Button",
onAction: () => {
// 自定义按钮的操作逻辑
}
});
}
});
}
```
这里使用了tinymce的ui.registry.addButton()方法添加了名为“myButton”的自定义按钮,并定义了按钮的显示文本和点击事件的操作逻辑。
3. 在template中,添加一个textarea元素,并为其设置id属性,例如:
```html
<template>
<div>
<textarea id="my-editor"></textarea>
</div>
</template>
```
这里设置了id为“my-editor”的textarea元素,用于初始化tinymce编辑器。
完成以上步骤后,就可以在tinymce的editor.vue中添加自定义按钮了。
阅读全文