标签：

import Vue from ‘vue‘ import VueQuillEditor, { Quill } from ‘vue-quill-editor‘ import { ImageDrop } from ‘quill-image-drop-module‘ import ImageResize from ‘quill-image-resize-module‘ import ‘quill/dist/quill.core.css‘ import ‘quill/dist/quill.snow.css‘ import ‘quill/dist/quill.bubble.css‘ Quill.register(‘modules/imageDrop‘, ImageDrop) Quill.register(‘modules/imageResize‘, ImageResize) Vue.use(VueQuillEditor)

<template> <div> <h3>写文章</h3> <!-- 编纂器 --> <div> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"> </quill-editor> </div> <!-- 生存 --> <div> <el-button type="primary" @click="save()" size="mini">生存</el-button> </div> <!-- 文件上传组件 --> <input type="file" value="" accept="image/*" @change="uploadImg" ref="uploadInput" /> </div> </template> <script> import { createAPI, addAccessToken, createImgSrc } from ‘@/utils/request‘ import qs from ‘qs‘ import { unloadImg } from ‘@/utils/qiniu_unload‘ // 编纂器的参数配置 const toolbarOptions = [ [‘bold‘, ‘italic‘, ‘underline‘, ‘strike‘], // 加粗 斜体 下划线 删除线 [‘blockquote‘, ‘code-block‘], // 引用 代码块 // [{ header: 1 }, { header: 2 }], // 1、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: [] }], // 字体种类 [{ align: [] }], // 对齐方法 [‘clean‘], // 断根文本格局 [‘link‘, ‘image‘ // ‘video‘ ] // 链接、图片、视频 ] let iniCont = ‘‘ let myvue = { name: ‘‘, data () { return { content: iniCont, // 编纂器内容 // 工具栏配置 editorOption: { theme: ‘snow‘, // 主题 placeholder: ‘您想说点什么？‘, modules: { toolbar: { container: toolbarOptions, // container: "#toolbar",//也可直接指向元素 handlers: { image: function (value) { if (value) { document.querySelector(‘.uploadInput‘).click() } else { this.quill.format(‘image‘, false) } } // link: function(value) { // if (value) { // var href = prompt(‘请输入url‘); // this.quill.format("link", href); // } else { // this.quill.format("link", false); // } // }, } }, imageResize: { //设置图片巨细 displayStyles: { backgroundColor: ‘black‘, border: ‘none‘, color: ‘white‘ }, modules: [ ‘Resize‘, ‘DisplaySize‘, ‘Toolbar‘ ] } } }, header: { // token: sessionStorage.token } } }, computed: {}, mounted () {}, methods: { // 生存 save () { }, // 掉去焦点 onEditorBlur (quill) { // console.log(‘editor blur!‘, quill) }, // 获得焦点 onEditorFocus (quill) { // console.log(‘editor focus!‘, quill) }, // 编纂器已筹备完成 onEditorReady (quill) { // console.log(‘editor ready!‘, quill) }, // 封锁弹窗 close () { this.$refs.uploadInput.value = ‘‘ this.$store.commit(‘changeDialog‘, false) }, // 获取裁剪后的图片 getCropBlob () { let that = this that.$refs.cropper.getCropBlob((data) => { let _this = this unloadImg(data, function (res) {//上传图片 // 获取富文本组件实例 let quill = _this.$refs.myQuillEditor.quill // 获取光标地址位置 let length = quill.getSelection().index // 插入图片 res.url为处事器返回的图片地点 quill.insertEmbed(length, ‘image‘, createImgSrc(res.res)) // 调解光标到最后 quill.setSelection(length + 1) }, function (res) { this.$message.error(res.res) }) that.close() }) } }, created () { } } export default myvue </script> <style> /* 汉化 */ .ql-container.ql-snow::-webkit-scrollbar { display: none; } .ql-editor::-webkit-scrollbar{ display: none; } .ql-snow .ql-tooltip[data-mode=link]::before { content: "请输入链接地点:"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: ‘生存‘; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode=video]::before { content: "请输入视频地点:"; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: ‘14px‘; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { content: ‘10px‘; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { content: ‘18px‘; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { content: ‘32px‘; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: ‘文本‘; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: ‘标题1‘; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: ‘标题2‘; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: ‘标题3‘; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: ‘标题4‘; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: ‘标题5‘; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: ‘标题6‘; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: ‘标准字体‘; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { content: ‘衬线字体‘; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { content: ‘等宽字体‘; } </style> <style lang=‘scss‘ > @import ‘./editor.scss‘; </style>