1、富文本组件
<template>
<div>
<Toolbar
style="border: 1px solid #ccc; border-bottom: 0"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 400px; overflow-y: hidden;border: 1px solid #ccc"
v-model="content"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
</template>
<script>
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {getEditorConfig} from "@/assets/js/editorConfig";
export default {
name: "wangEditor",
components: {Editor, Toolbar},
props: {
value: {
type: String,
default: ''
}
},
watch: {
value: {
handler(newValue, oldValue) {
this.content = newValue
}
}
},
data() {
return {
editor: null,
toolbarConfig: {},
editorConfig: getEditorConfig(),
mode: 'default', // or 'simple',
content: this.value
}
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
},
getValue() {
if (this.editor.getText().trim()) {
return this.content
} else {
return null
}
}
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁编辑器
}
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
2、使用
import wangEditor from "@/components/wangEditor.vue";
components: {
wangEditor
},
<wangEditor ref="editor" :value="form.describe"></wangEditor>
3、提交时候获取值
this.form.noticeContent = this.$refs.editor.getValue()