quill-editor的使用和自定义

我的项目中有很多地方要用到，所以我封装了一个组件
1.安装vue-quill-editor

npm install vue-quill-editor -S

2.安装vue-quill-editor

npm install quill -S

安装后在main.js中引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import VueQuillEditor from 'vue-quill-editor'Vue.use(VueQuillEditor)

3.安装vue-quill-editor-upload 因为我用到图片上传服务器，如果使用他的可以不用安装

vue-quill-editor-upload

安装后要引入组件、注册组件

   import {quillRedefine} from 'vue-quill-editor-upload'components:{ quillRedefine },

一下是封装好的quill-editor组件

<template><div class="edit_container"><quill-editor v-model="content"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor></div>
</template>
<script>
/*富文本编辑图片上传配置*/
const uploadConfig = {action: 'common.uploadfile.single', // 必填参数 图片上传地址methods: 'POST', // 必填参数 图片上传方式token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStoragename: 'img', // 必填参数 文件的参数名size: 1024, // 可选参数   图片大小，单位为Kb, 1M = 1024Kbaccept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式
};
import {quillRedefine} from 'vue-quill-editor-upload'
export default {components:{ quillRedefine },name: 'App',props: {value: {type: String, default: '',}},data(){return {content: this.value || '',editorOption: {}}},watch:{value(val) {this.content = val},deep:true},created(){this.editorOption = quillRedefine({// 图片上传的设置uploadConfig: {action: '/api//file/upload',  // 必填参数 图片上传地址methods: 'POST',  // 可选参数 图片上传方式  默认为posttoken: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStoragename: 'img',  // 可选参数 文件的参数名 默认为imgsize: 1024,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kbaccept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式res: (respnse) => {console.log(respnse)return respnse.data.url},name: 'file',  // 图片上传参数名},// 以下所有设置都和vue-quill-editor本身所对应placeholder: '请输入内容',  // 可选参数 富文本框内的提示语theme: '',  // 可选参数 富文本编辑器的风格toolOptions: [[{'size': ['8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']}], ['bold', 'italic', 'underline', 'strike'],        // toggled buttons['blockquote', 'code-block'],[{ 'header': 1 }, { 'header': 2 }],[{ 'script': 'sub'}, { 'script': 'super' }],[{ 'indent': '-1'}, { 'indent': '+1' }],[{ 'direction': 'rtl' }],[{ 'list': 'ordered'}, { 'list': 'bullet' }],[{ 'color': [] }, { 'background': [] }], [{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif','PingFang','Helvetica','Georgia','Impact','Verdana','Comic-Sans-MS'] }],[{ 'align': [] }],["image"], //上传图片['clean'], // 清除文本格式-----['clean']],  // 可选参数  选择工具栏的需要哪些功能  默认是全部handlers: {}  // 可选参数 重定义的事件，比如link等事件},)},computed: {editor() {return this.$refs.myQuillEditor.quill;},},methods: {onEditorReady(editor) { // 准备编辑器},onEditorBlur(){}, // 失去焦点事件onEditorFocus(){}, // 获得焦点事件// 文本改变后同步回父组件绑定的值   onEditorChange(event) {  console.log(event)    this.$emit('input', event.html)    } }
}
</script>
<style>
.edit_container {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: left;margin: 20px 0;
}
.ql-container {height: 500px;
}
</style>

4.在其他组件中引入、使用

<template><div class="banner-contaner white-bgc"><QuillEditor @input="getCon" :value="content"></QuillEditor><el-button type="primary" class="save-btn">点击保存</el-button>   </div>
</template>
<script>
import QuillEditor from './commonComponents/QuillEditor'
export default {components:{ QuillEditor },name:'',data(){return{content:'',}},created(){ this.getData();},methods:{getCon(con){this.content = con},// 回填getData(){var menuId = this.menuIdthis.get(`/api/school_association/content?menuId=${menuId}`,{},res => {this.content = res.data[0].content},error => {})     }}
}
</script>

quill-editor最大的优势就是可以自定义，修改字大小、字体
比如设置font-size

首先找到 quill --> dist --> quill.core.js

var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {scope: _parchment2.default.Scope.INLINE,whitelist: ['8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
});

找到 quill --> dist --> quill.js

var SIZES = ['8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px'];

var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {scope: _parchment2.default.Scope.INLINE,whitelist: ['8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
});

自定义font.css，以下我只举了一个例子，要对每个字号都进行样式编写，一定要在main.js中引入（有人的处理是在quill.bubble.css、quill.snow.css、quill.core.css添加样式，可根据自己爱好进行修改）

.ql-editor .ql-size-8px {font-size: 8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {font-size: 8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {content: '8px';
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {content: '8px';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {font-size: 8px;
}

quill-editor的使用和自定义相关推荐

现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
【VUE】Toast-UI/Editor工具实现图片自定义上传到服务器
Toast-UI/Editor工具实现图片自定义上传到服务器 author: jwensh date: 2021.06.17 文章目录 Toast-UI/Editor工具实现图片自定义上传到服务器所 ...
Quill Editor
VUE-QUILL-EDITOR 该文章仅记录学习过程,不展示最终文件源码安装 quill-editor 在对应的目录打开 Terminal 执行以下命令: 安装 editor npm instal ...
quill editor:The given range isn‘t in document
公司网站使用的是 .NET Razor + 渐进式 Vue 的方式编写的. 在一个发帖子的页面 quill 的区域包含在了 Vue 组件中. 在 vue 的 created 函数中获取不到 quill ...
Quill – 可以灵活自定义的开源的富文本编辑器
Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill ...
quill 富文本编辑器自定义格式化
quilljs 现在富文本编辑器轮子太多了,Github 上随便搜一下就有一堆,我需要实现的功能很简单,所以就佛系地选了 quilljs,quilljs 是一个轻量级的富文本编辑器. 链接: 官网:q ...
*使用quill富文本编辑器的插件，自定义formData图片上传
官网地址:https://quilljs.com 项目需求:自带的上传图片是base64,直接入库的话,请求头太长,导致网页十分十分的卡,所以才改用formData自定义上传(改完之后,相当于覆盖了他 ...
储存quill与php,Quill自定义上传图片
Quill-Demo body { padding: 10px 30px; } #editor { min-height: 180px; } Quill自定义上传图片 /* 编辑器操作条选项 */ v ...
quill富文本编辑器自定义图片上传
github老哥的代码 const editor = new Quill('#quill-editor', {bounds: '#quill-editor',modules: {toolbar: th ...
Unity 自定义Editor 地图编辑工具_使用说明
Unity 自定义Editor 地图编辑工具: 自定义六边形网格数据并生成平面地图 1.打开自定义编辑编辑器 2.设置参数生成网格: 设置参数,点击Create Grid 2.编辑网格类型: !!!S ...

quill-editor的使用和自定义

quill-editor的使用和自定义相关推荐

最新文章

热门文章