vue使用vue-quill-editor富文本框

版权声明：未经本人同意不得转载 一切法律责任 后果自负 https://blog.csdn.net/xy19950125/article/details/89631653

第一步：安装vue-quill-editor 

npm i vue-quill-editor

第二步：在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);

第三步：项目中使用

<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可以实时获取到当前编辑器内的文本内容
	},
    }
}