搜索文档
安装
shnpm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue --save使用(自定义组件)
vue<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>
