vue-quill-editor富文本框引入
1、安装依赖：
cnpm install vue-quill-editor --save
2、引用方式：全局和局部，
2、1 全局引用，项目入口文件中（main.js）注册
import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
2、2 局部引用，在需要调用的vue页面中声明
import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor } }
3、使用方法
<el-form-item label="详细内容" prop="newsContent"> <div> <el-upload v-show="false" id="quill-upload" :action="fileUrl + '/sys/uploadOssFile'" //上传路径 :headers="myHeaders" multiple :limit="1" list-type="picture" :show-file-list="false" :file-list="richTextFileList" :before-upload="beforeUpload" //上传前的回调 :on-error="uploadError" //上传失败时回调 :on-success="handleSucess" //上传成功时回调 > <el-button size="small" type="primary"></el-button> <div slot="tip" class="el-upload__tip"> 只能上传jpg/png文件，且不超过500kb </div> </el-upload> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" //该字段可以自定义工具栏 placeholder="新闻详情" @change="onEditorChange($event)" /> </div> </el-form-item>
//说明：1、该处使用的时Element ui中的upload组件作为上传组件（如图片、视频上传等）；
// 2、 在data中定义相应字段，methods方法定义相应方法
4、注意问题：
4、1 文本框居中问题解决-——在main.js中引入一下代码：
import Parchment from 'parchment'; let config = { scope: Parchment.Scope.BLOCK, whitelist: ['right', 'center', 'justify'] }; let AlignStyle = new Parchment.Attributor.Style('align', 'text-align', config); export { AlignStyle }; var Align = Quill.import('attributors/style/align'); Align.whitelist = ['right', 'center', 'justify']; Quill.register(Align, true);
4、2 引入超链接操作不生效：我使用的是弹窗监听实现
//1、首先在main.js中重写link标签： const Link = Quill.import("formats/link"); // 自定义a链接 class FileBlot extends Link { // 继承Link Blot static create (value) { let node = undefined; if (value && !value.href) { // 适应原本的Link Blot node = super.create(value) } else { // 自定义Link Blot node = super.create(value.href) node.href = value.href node.innerText = value.innerText // node.setAttribute('download', value.innerText); // 左键点击即下载 } return node; } } FileBlot.blotName = "link" // 这里不用改，如果需要也可以保留原来的，这里用个新的blot FileBlot.tagName = "A" Quill.register(FileBlot) // 注册link //其次：弹窗显示表单 <el-dialog title="添加超链接" :visible.sync="showDialog" @open="openHandle" @close="closeHandle" width="600px" > <div class="m-searchbar"> <el-form :model="formData" label-width="120px" :rules="rules" ref="linkForm" > <el-form-item label="超链接名称：" prop="text"> <el-input v-model="formData.text" clearable placeholder="请输入超链接文本" maxlength="200" ></el-input> </el-form-item> <el-form-item label="链接地址:" prop="label"> <el-input v-model="formData.label" clearable placeholder="请输入超链接地址" maxlength="200"></el-input> </el-form-item> </el-form> <div style="text-align: center"> <el-button type="primary" size="mini" @click="confirm" >确认</el-button > <el-button size="mini" @click="closeHandle">取消</el-button> </div> </div> </el-dialog>
4、3 解决上传图片大小、拖曳功能
1、安装依赖 npm/cnpm install quill-image-resize-module install quill-image-resize-module --save ；
2、在main.js中引入：
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
3、在webpack.base.config.js中的module.exports加入（与其中的module并列）：
plugins: [ new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' }) ],
注：1、并在webpack.base.config.js文件内定义：
const webpack = require('webpack')，否则会出错
2、如果是vuecli3，则在vue.config.js中添加上段代码
5. 备注
const toolbarOptions = [ ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线 ["blockquote", "code-block"], //引用，代码块 [{ header: 1 }, { header: 2 }], // 几级标题 [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表 [{ script: "sub" }, { script: "super" }], // 下角标，上角标 [{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ direction: "rtl" }], // 文字输入方向 [{ size: ["small", false, "large", "huge"] }], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ color: [] }, { background: [] }], // 颜色选择 [ { font: [ "SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", "Arial", ], }, ], // 字体 [{ align: [] }], // 居中 ["clean"], // 清除样式, ["link", "image"], // 超链接、上传图片 ]; editorOption: { // 富文本编辑器的工具栏 modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { image: function (value) { // 对图片进行改造，默认是通过base64 ,现通过iview 去传。 if (value) { document.querySelector("#quill-upload input").click(); } else { this.quill.format("image", false); } }, link: this.showHandle, }, }, }, imageResize: { displayStyles: { backgroundColor: "black", border: "none", color: "white", }, modules: ["Resize", "DisplaySize", "Toolbar"], }, // 自定义拉伸 placeholder: "请输入新闻内容", },
