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