提示:vue2引入quill-editor
前言
需求:富文本编辑器
一、安装
npm install vue-quill-editor --save
npm install quill-image-resize-module --save
二、引用
1、 edit.vue
<template>
<div>
<Editer ref="editerRef" @change="changeEdit"/>
</div>
</template>
<script>
import Editor from './Editor'
export default {
components:{ Editor },
data() {
return {};
},
methods: {
//编辑器修改内容
changeEdit(){},
},
};
</script>
三、编辑器
1、Editor.vue
<template>
<div class="">
<quill-editor class="editer_box"
ref="quillEditorRef"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
import * as Quill from 'quill';
const Size = Quill.import('attributors/style/size');
Size.whitelist = [false, '10px','12px', '14px', '16px', '20px', '24px', '32px'];
Quill.register(Size, true);
const Font = Quill.import('attributors/style/font');
Font.whitelist = [false, 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', '宋体', '黑体'];
Quill.register(Font, true);
export default {
computed: {
editor() {
return this.$refs.quillEditorRef.quillEditor;
}
},
data() {
return {
content: null,
editorOption: {
modules: {
toolbar: {
container: [
['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: Size.whitelist }], // 字体大小
// [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: Font.whitelist }], // 字体种类
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['image'] // 图片
],
handlers: {
'image': (value) => {
// 执行图片上传操作
//上传成功回调 uploadImageSuccess
}
}
}
},
placeholder: '请在这里添加产品描述', //提示
readyOnly: false, //是否只读
theme: 'snow', //主题 snow/bubble
syntax: true, //语法检测
}
}
},
mounted() {
// 自定义粘贴图片功能
let quill = this.$refs.quillEditorRef.quill;
quill.root.addEventListener( "paste", evt => {
if ( evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length ) {
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, file => {
if (file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
console.log(file,'粘贴进来的图片文件~~~');
// 调用上传图片接口,传输file
//上传成功回调 uploadImageSuccess
}
});
}
},false);
},
methods: {
// 失去焦点
onEditorBlur(editor) {},
// 获得焦点
onEditorFocus(editor) {},
// 开始
onEditorReady(editor) {},
// 值发生变化
onEditorChange(editor) {
this.content = editor.html;
this.$emit('change',this.content);
},
//上传成功
uploadImageSuccess(data) {
this.addImgByIndex(data.url||'');
},
addImgByIndex(src){
// 获取光标所在位置
let quill = this.$refs.quillEditorRef.quill;
let length = quill.getSelection().index;
// 插入图片
quill.insertEmbed(length, 'image', src);
// 调整光标到最后
quill.setSelection(length + 1);
},
},
}
</script>
<style>
.editer_box .ql-container {
height: 400px;
}
.editer_box .ql-picker.ql-size .ql-picker-label::before,
.editer_box .ql-picker.ql-size .ql-picker-item::before {
content: "默认字号";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
content: '10px';
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
content: '12px';
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
content: "14px";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
content: "16px";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
content: "20px";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
content: "24px";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
content: "32px";
}
.editer_box .ql-picker.ql-font .ql-picker-label::before,
.editer_box .ql-picker.ql-font .ql-picker-item::before {
content: "默认字体";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
content: "Arial";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
content: "微软雅黑";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
content: "Arial";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
content: "楷体";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="宋体"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="宋体"]::before {
content: "宋体";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="黑体"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="黑体"]::before {
content: "黑体";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
content: "仿宋";
}
</style>
四、效果
飞机直达官网:【quill-editor】官网
总结
踩坑路漫漫长@~@