<script>
import upload from '../../utils/api/index' // 这⾥我封装的⼀个上传图⽚的，返回⼀个url地址，将它插⼊光标位置    import Quill from 'quill' //引⼊编辑器
import {quillEditor} from "vue-quill-editor";
import 'quill/ss';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// ⾃定义字体⼤⼩
let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '32px']
//quill编辑器的字体
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'];    var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加⼊到⽩名单
//quill图⽚可拖拽改变⼤⼩
import ImageResize from 'quill-image-resize-module'
// 富⽂本⼯具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],        // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],              // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
[{'direction': 'rtl'}],                        // text direction
[{'size': Size.whitelist}],  // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}],          // dropdown with defaults from theme
[{'font': fonts}],
[{'align': []}],
['link', 'image', 'video'],
['clean']                                        // remove formatting button
]
;
export default {
name: "quillEditorCom",
data() {
return {
content: this.quillContent,  我们不能直接使⽤props传过来的值，先赋值到这⾥
// 富⽂本配置项
quillUpdateImg: false, // 根据图⽚上传状态来确定是否显⽰loading动画，刚开始是false，不显⽰
editorOption: {
placeholder: '',
theme: 'snow',  // or 'bubble'
modules: {
imageResize: { //调整⼤⼩组件。
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: ['Resize', 'DisplaySize', 'Toolbar']
},
toolbar: {
container: toolbarOptions,  // ⼯具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图⽚⽂件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}
},
}
},
props: ['quillContent'],
components: {quillEditor},
computed: {
editor() {
return this.$QuillEditor.quill;
},
},
methods: {
uploadQuillImage: function (e) {
这是上传图⽚的函数，可以改成⾃⼰的，成功返回⼀个地址插⼊光标处
let that = this;
// 获取富⽂本组件实例
let quill = this.$QuillEditor.quill
let func_s = function (data) {
that.$message({
message: '上传成功',
type: 'success'
});
// 获取光标所在位置
let length = Selection().index;
// 插⼊图⽚  data.url为服务器返回的图⽚地址
quill.insertEmbed(length, 'image', data.url)
// 调整光标到最后
quill.setSelection(length + 1)
};
let func_f = function (err) {
that.$('上传失败');
};
/
/ loading动画消失
this.quillUpdateImg = false
upload.upload(e, func_s, func_f);
},
beforeQuillrUpload: function (file) {
// 显⽰loading动画
this.quillUpdateImg = true】
这是我封装的⼀个判断是否上传为图⽚，图⽚⼤⼩的公共函数，⾃⼰可⾃定义
Utils.base.beforeAvatarUpload(file);
},
// 成功失败回调
uploadQuillSuccess() {
},
uploadQuillError() {
// loading动画消失
this.quillUpdateImg = false
this.$('图⽚插⼊失败')
},
onEditorReady(editor) { // 准备编辑器
},asp富文本编辑器
onEditorBlur() {
}, // 失去焦点事件
onEditorFocus() {
console.log(this.$Selection().index,'获取⽰例')
}, // 获得焦点事件
onEditorChange() {
this.$emit('changeQuill', t)//将值绑定到changeQuill上传递过去，引⼊组件的时候监听这个值，可以拿到改变的值，            }, // 内容改变事件
}
}
</script>
<style scoped lang="scss">
.ql-toolbar {
white-space: normal;
}
.editor_wrap /deep/ .avatar-uploader {
display: none;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。