Skip to content

Vue 富文本编辑器

分类:Vue2
标签:VueWeb 前端
创建时间:2021年10月03日 09:41:25
  1. 官网地址

  2. 安装

    sh
    npm install @wangeditor/editor --save
    npm install @wangeditor/editor-for-vue --save
  3. 使用(自定义组件)

    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>

基于 MIT 许可发布