标签：import lse select prompt 支持 插入 mod .so ble
Iblog项目中博文的文本编辑器采用了vue-quill-editor插件，本文将简单介绍其使用方法。
npm install vue-quill-editor --save
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)
注意必须引入样式，否则会出现编辑器排版的混乱。
// 在<script></script>之间插入 import { quillEditor, Quill } from ‘vue-quill-editor‘ // 工具栏配置 const toolbarOptions = [ [‘bold‘, ‘italic‘, ‘underline‘, ‘strike‘], [‘blockquote‘, ‘code-block‘], [{‘list‘: ‘ordered‘}, {‘list‘: ‘bullet‘}], [{‘indent‘: ‘-1‘}, {‘indent‘: ‘+1‘}], [{‘color‘: []}, {‘background‘: []}], [{‘align‘: []}], [‘link‘, ‘image‘], [‘clean‘], [{‘size‘: [‘small‘, false, ‘large‘, ‘huge‘]}], [{‘header‘: [1, 2, 3, 4, 5, 6, false]}], [{‘font‘: []}] ] export default { data () { return { ... editorOption: { placeholder: ‘提示语‘, modules: { toolbar: { container: toolbarOptions, ... } } } ... } }, ... components: { ‘quill-editor‘: quillEditor }, ... }
<div class="quill-box">
<template>
<quill-editor v-model="content"
:options="editorOption"
ref="content">
</quill-editor>
</template>
</div>
经过上述配置即可使用quill富文本编辑器了。
由于quill插件默认插入图片是base64格式的，若图片较大会引起内容太大无法保存到数据库里面，这样为了上传图片或者插入网络图片，要先更改图片按钮的事件下函数，具体是在editorOption->modules->toolbar中加入handlers对象，并插入名称为image的函数，函数的内容设定为自身所需内容，如下
data () { return { content: ‘‘, editorOption: { ... modules: { toolbar: { container: toolbarOptions, handlers: { ‘image‘: function (value) { if (value) { // 自定义内容 } else { this.quill.format(‘image‘, false) } } } } } } }
若想插入来自网络的图片，即提供图片网址，可以加入以下语句
const range = this.quill.getSelection() const value = prompt(‘提示语‘) this.quill.insertEmbed(range.index, ‘image‘, value, Quill.sources.USER)
但是这种方法嵌入的图片暂时不支持调整图片大小。
使用该插件所保存的内容需经过原样式渲染才能还原编辑时的效果，配置方法为，在<div>标签中加入ql-editor样式，并且内容需为html格式呈现
<div class="ql-editor" v-html="articleContent"></div>
标签：import lse select prompt 支持 插入 mod .so ble
原文地址：https://www.cnblogs.com/lipohong/p/10556801.html
