Vue 富文本编辑器

1. 官网地址

2. 安装

   npm install @wangeditor/editor --save
   npm install @wangeditor/editor-for-vue --save

3. 使用（自定义组件）

   <template>
   	<div class="text">
   		<Toolbar class="toolbar" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
   		<Editor class="editor" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange" />
   	</div>
   </template>
   
   <script>
   import Vue from 'vue'
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
   
   export default Vue.extend({
       name: 'RichText',
       props: { value: String },
   	components: { Editor, Toolbar },
   	data() {
   		return {
   			editor: null,
   			html: '',
   			toolbarConfig: {},
   			editorConfig: {
                   placeholder: '请输入内容...',
               },
   			mode: 'default', // or 'simple'
   		}
   	},
   	methods: {
   		onCreated(editor) {
   			this.editor = Object.seal(editor);
   			this.editor.setHtml(this.value);
   		},
           onChange() {
               this.$emit('input', this.html);
           }
   	},
   	beforeDestroy() {
   		const editor = this.editor;
   		if (editor == null) return;
   		editor.destroy(); // 组件销毁时，及时销毁编辑器
   	},
   })
   </script>
   
   <style lang="css" scoped>
   @import "@wangeditor/editor/dist/css/style.css";
   .text {
   	border: 1px solid #888;
   	box-sizing: border-box;
   	height: 100%;
       border-radius: 4px;
       overflow: hidden;
   }
   .toolbar {
   	border-bottom: 1px solid #ccc;
   	box-sizing: border-box;
   }
   .editor {
       height: 100%;
   	overflow-y: hidden;
   }
   </style>