1.下载安装 官方文档:https://www.kancloud.cn/liuwave/quill/1409423
npm install quill -S
npm install vue-quill-editor -S
2. 如果需要设置图片大小还需安装
npm install quill-image-resize-module --save
一、开始使用
1.全局挂载
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, /* { default global options } */)
2.组件中挂载
import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' import * as Quill from 'quill'
// 设置图片大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
export default { components: { quillEditor,ImageResize } }
二、在vue.config.js 添加代码 ,不然引入import ImageResize from 'quill-image-resize-module',会报错
const webpack = require("webpack") // 放在 configureWebpack 中 plugins: [ new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js', }) ]
三、使用vue页面中使用
1.通过上传图片到服务器,服务器返回图片的地址,然后放到富文本中 (不建议使用富文本自带的功能- 图片转换成base64然后插入到富文本中)
<quill-editor ref="myQuillEditor" v-model="textContent" style="height: 500px;" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" :options="editorOption" /> </el-card> <!-- 上传图片 --> <input v-show="false" id="fileInput" ref="clearFile" type="file" multiple="multiplt" class="add-file-right-input" @change="getFile($event)" >
![vue-quill-editor 富文本使用 vue-quill-editor 富文本使用](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2wvP249MjAmaT1ibG9nLzI0MDA4MTIvMjAyMTEwLzI0MDA4MTItMjAyMTEwMjYxNjAyMzczNDYtMTE0NDEzNTQucG5n)
2.富文本配置
editorOption: { placeholder: '请输入...', modules: { toolbar: { container: [ // 工具栏配置, 默认是全部 ["bold", "italic", "underline", "strike"], [{ color: [] }, { background: [] }], [{ header: 1 }, { header: 2 }], [{ script: "sub" }, { script: "super" }], [{ indent: "-1" }, { indent: "+1" }], [{ size: ["small", false, "large", "huge"] }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ font: [] }], [{ 'align': [] }], [{ 'list': 'ordered' }, { 'list': 'bullet' }], ['blockquote'], ['code-block'], ['link'], ['image'], ], // 插入图片连接到富文本中 handlers: { 'image': function(value) { if (value) { // this.$refs.clearFile.value = null console.log('value', value) document.getElementById('fileInput').click() } else { this.quill.format('image', false) } } } }, // 调整图片大小 imageResize: { displayStyles: { backgroundColor: 'black', border: 'none', color: 'white' }, modules: ['Resize', 'DisplaySize', 'Toolbar'] } } }
3.上传图片
getFile(event) { const file = event.target.files console.log('file', file[0]) const img = file[0] const imgName = file[0].name const size = file[0].size // 这里你是图片上传的代码 ..... // 上传完成后从接口返回值中获取到 图片地址 const quill = this.$refs.myQuillEditor.quill const length = quill.getSelection().index // 插入图片 response.data.url为服务器返回的图片地址 quill.insertEmbed(length, 'image', imgUrl) // 调整光标到最后 quill.setSelection(length + 1) }
methods: { //失去焦点事件 onEditorBlur(quill) { console.log('editor blur!', quill) }, //获得焦点事件 onEditorFocus(quill) { console.log('editor focus!', quill) }, // 准备富文本编辑器 onEditorReady(quill) { console.log('editor ready!', quill) } }
以上就可以基本使用富文本编辑器了
注意事项:
1.在富文本编辑器中样式是对的,但在客户端样式没生效
a.从管理端复制 quill.core.css
b.在客户端引用css
c. 在用到富文本的地方 加上样式 class='ql-editor'