vue-ueditor-wrap 如何动态移除 toolbar 的某个功能按钮
时间: 2023-08-15 19:04:56 浏览: 67
可以通过修改 `vue-ueditor-wrap` 组件中的 `editorConfig` 对象实现动态移除 toolbar 的某个功能按钮。具体步骤如下:
1. 在父组件中定义 `editorConfig` 对象,包含需要移除的功能按钮,例如:
```javascript
data() {
return {
editorConfig: {
toolbars: [
[
'bold', 'italic', 'underline', 'strikethrough', '|',
'blockquote', 'insertcode', '|',
'removeformat', 'formatmatch', '|',
'undo', 'redo'
]
]
}
}
}
```
2. 将 `editorConfig` 对象作为 `vue-ueditor-wrap` 组件的 props 属性传入子组件中,例如:
```html
<vue-ueditor-wrap :editorConfig="editorConfig"></vue-ueditor-wrap>
```
3. 当需要移除某个功能按钮时,可以根据其在 `toolbars` 数组中的位置将其移除,例如:
```javascript
this.editorConfig.toolbars[0].splice(2, 1); // 移除 toolbar 中的 underline 按钮
```
4. 修改 `editorConfig` 对象后,需要通过 `$refs` 属性获取子组件实例并调用 `initEditor` 方法重新初始化编辑器,例如:
```javascript
this.$refs.editor.initEditor();
```
这样就可以动态移除 toolbar 的某个功能按钮了。