vue vue-quill-editor using a rich text box

Copyright: all rights reserved legal liability without the consent of the consequences https://blog.csdn.net/xy19950125/article/details/89631653

Step 1: Install vue-quill-editor 

NPM and quill-vue-editor

Step two: the references in main.js

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

 

Vue.use (VueQuillEditor);

The third step: Use Project

<quill-editor style="width:750px;height:500px" v-model="contentText"
	:options="editorOption" 
	@blur="onEditorBlur($event)" 
	@focus="onEditorFocus($event)"
	@change="onEditorChange($event)">
</quill-editor>
export default{
    data(){
        editorOption:{
	    modules:{ 
		toolbar:[ 
		['bold', 'italic', 'underline', 'strike','blockquote','code-block'], // toggled buttons       
		['code', 'link','align','formula','image','clean'],
		[{'header': 1}, {'header': 2}],               // custom button values
		[{'list': 'ordered'}, {'list': 'bullet'}],
		[{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
		[{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
		[{'direction': 'rtl'}],                         // text direction
		[{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
		[{'color': []}, {'background': []}],          // dropdown with defaults from theme
		[{'font': []}]
		]       
	    },
	placeholder:'输入图片的宽度需小于375,大小小于1M'
	},
    },
    metohods(){
        onEditorBlur(editor) { //失去焦点事件 
        },
	onEditorFocus(editor) { //获得焦点事件

	},
	onEditorChange({
		editor,
		html,
		text
	}) { //编辑器文本发生变化
				//this.content可以实时获取到当前编辑器内的文本内容
	},
    }
}