vue3 函数组件wangeditor自定义内容
时间: 2023-07-01 20:23:39 浏览: 68
在Vue 3中,函数式组件可以通过Vue-wangeditor组件来集成wangEditor编辑器。以下是在Vue 3函数式组件中添加自定义内容的步骤:
1. 在Vue-wangeditor组件中引入wangEditor编辑器。在setup函数中定义一个ref来引用编辑器实例。
```
<template>
<div>
<vue-wangeditor v-model="content" :config="editorConfig" ref="editor"></vue-wangeditor>
</div>
</template>
<script>
import VueWangEditor from 'vue-wangeditor';
import wangEditor from 'wangeditor';
export default {
components: {
VueWangEditor,
},
setup() {
const editorRef = Vue.ref(null);
const editorConfig = {
// 在这里配置编辑器
};
return {
editorRef,
editorConfig,
};
},
};
</script>
```
2. 在editorConfig中添加自定义菜单。在菜单的click属性中,指定要执行的函数。例如,你可以添加一个名为“自定义菜单”的菜单,并将其单击事件绑定到myCustomFunction函数。
```
const editorConfig = {
menus: [
'head',
'bold',
'italic',
'underline',
'strikeThrough',
'foreColor',
'backColor',
'link',
'list',
'justify',
'quote',
'emoticon',
'image',
'table',
'video',
'code',
'undo',
'redo',
'fullscreen',
'customMenu'
],
customMenu: {
title: '自定义菜单',
type: 'click',
click: () => {
myCustomFunction(editorRef);
}
}
},
```
3. 在myCustomFunction函数中添加自定义的代码。例如,你可以在函数中插入一个文本片段。
```
function myCustomFunction(editorRef) {
// 在光标处插入文本片段
editorRef.value.$editor.command(null, 'insertHtml', '这是一段自定义内容');
}
```
这样就可以在Vue 3函数式组件中添加自定义内容了。