一、npm下载vue-quill-editor
npm install vue-quill-editor --save
二、在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'
三、在项目中使用
<template><div class="edit" style="margin-top: 15px"><quill-editor ref="textEditor" v-model="articleContent" :options="editorOption"></quill-editor></div></template><script>export default{data(){return{editorOption: {modules: {toolbar: [['bold', 'italic', 'underline', 'strike'],['blockquote'],[{ 'list': 'ordered' }, { 'list': 'bullet' }],[{ 'script': 'sub' }, { 'script': 'super' }],[{ 'indent': '-1' }, { 'indent': '+1' }],[{ 'size': ['small', false, 'large', 'huge'] }],[{ 'color': [] }, { 'background': [] }],['clean'],[{ 'align': [] },'image'],]},placeholder:'请输入文章内容 ...'},articleTitle:'',}}}</script>
四、示例:/repo/surmon-china/vue-quill-editor
如果觉得《vue中使用vue-quill-editor富文本编辑器》对你有帮助,请点赞、收藏,并留下你的观点哦!