vue3 封装vue-ueditor-wrap
时间: 2023-11-19 19:07:24 浏览: 104
以下是Vue3封装vue-ueditor-wrap的示例代码:
```vue
<template>
<vue-ueditor-wrap ref="editor" :config="editorConfig" @ready="onEditorReady"></vue-ueditor-wrap>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
name: 'MyEditor',
components: {
VueUeditorWrap,
},
props: {
value: {
type: String,
default: '',
},
},
data() {
return {
editorConfig: {
// 配置项
},
};
},
mounted() {
// 初始化编辑器
this.$refs.editor.initEditor();
},
methods: {
onEditorReady(editorInstance) {
// 编辑器初始化完成后的回调函数
console.log(`实例${editorInstance.key}已经初始化:`, editorInstance);
// 不是编辑状态,禁用编辑,隐藏工具栏
editorInstance.setDisabled();
editorInstance.hideToolbar();
},
},
watch: {
value(newValue) {
// 监听value变化,更新编辑器内容
this.$refs.editor.setContent(newValue);
},
},
beforeUnmount() {
// 销毁编辑器
this.$refs.editor.destroyEditor();
},
};
</script>
```
阅读全文