vue-quill编辑器
https://www.kancloud.cn/liuwave/quill (中文官网)
使用 yarn add vue-quill 即可快速安装
<template>
<div :class="prefixCls">
<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>
</div>
</template>
代码如下
<script>
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
name: 'QuillEditor',
components: {
quillEditor,
},
props: {
prefixCls: {
type: String,
default: 'ant-editor-quill',
},
// 表单校验用字段
// eslint-disable-next-line
value: {
type: String,
//接受父组件的数据
},
//富文本配置项
editorOption: {
type: Object,
},
},
mounted() {
this.$refs.myQuillEditor.quill.enable(false)
this.content = this.value
this.$refs.myQuillEditor.quill.enable(true)
},
data() {
return {
content: null,
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
},
},
methods: {
onEditorBlur(quill) {
// console.log('editor blur!', quill)
// console.log(this.oldVal)
},
onEditorFocus(quill) {
// console.log('editor focus!', quill)
// console.log(quill)
},
onEditorReady(quill) {
// console.log('editor ready!', quill)
},
onEditorChange({ quill, html, text }) {
sessionStorage.setItem("editorText",html)
// this.$emit('change', html, text)
//此处可返回父组件html,text格式的数据
},
// 清空
clear() {
this.content = ''
},
},
watch: {
value(New, Old) {
this.content = New
},
},
}
</script>
<style lang="less" scoped>
@import url('../index.less');
/* 覆盖 quill 默认边框圆角为 ant 默认圆角,用于统一 ant 组件风格 */
.ant-editor-quill {
/deep/ .ql-toolbar.ql-snow {
border-radius: @border-radius-base @border-radius-base 0 0;
}
/deep/ .ql-container.ql-snow {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
.quill-editor {
height: 380px;
}
</style>
在当前光标后插入图片 | | 文字
//获取编辑器实例
let quill = this.$refs.QuillEditor.$refs.myQuillEditor.quill
//获取当前位置
let length = quill.selection.savedRange.index
//插入图片
quill.insertEmbed(length, 'image', '图片src')
//光标移到插入元素后一位
quill.setSelection(length + 1)
踩坑记录: 组件化Quill编辑器传入value用来设置编辑器的值,修改过后通过this.$emit传出,由于组件watch中动态修改编辑器的值,每输入一个字母就会进入一个循环,父传子→子传父,导致编辑器的光标每输入一个字母就回到首位,删除同理,最终通过sessionStorage解决了该bug(父组件在点击提交的时候取出富文本的值)
赋值: props→value
取值: onEditorChange→emit || sessionStorage
清空: 父组件.ref.clear()
百度uEditor编辑器
http://fex.baidu.com/ueditor (中文文档)
百度编辑器需要在官网下载,选择自己需要的版本,通过引入或安装的方式使用,需要注意的是,引入的方式必须引入css文件,大部分教程都没有引入css文件,导致编辑器显示不正常
安装的方式: yarn add vue-ueditor-wrap
引入的方式教程如下:
选择jsp版本会得到如下文件,放在public中
在index.html中引入js:
在main.js中引入css
// 导入编辑器
import "../public/UE/themes/default/css/ueditor.css"
编辑器组件
<template>
<div>
<script :id="randomId" type="text/plain" name="container"></script>
</div>
</template>
export default {
name: 'UE',
data() {
return {
/** 编辑器实例 */
editor: null,
/** 每个编辑器生成不同的id,以防止冲突 */
randomId: 'editor_1' + parseInt(Math.random() * 10000 + 1),
ready: false,
defaultText: '',
}
},
props: {
defaultMsg: {
type: String,
// default
},
config: {
type: Object,
// default: () => ({
// serverUrl: `${api.base}/ueditor/`
// })
},
},
watch: {
defaultMsg(newVal, oldVal) {
if (newVal != null && this.ready) {
this.editor.setContent(newVal)
}
},
},
mounted() {
this.initEditor()
},
methods: {
/** 初始化编辑器 */
initEditor() {
this.$nextTick(() => {
// 获取richText实例
this.editor = window.UE.getEditor(this.randomId, this.config)
this.editor.addListener('ready', () => {
this.ready = true
this.editor.setContent(this.defaultMsg)
})
})
},
// 插入文本
insert(text) {
this.editor.execCommand('inserthtml', `<p>${text}</p>`);
},
//获取值
getUEContent() {
return this.editor.getContent()
},
// 清空
clear() {
this.editor.addListener('ready', () => {
this.ready = true
this.editor.setContent('')
})
},
},
destroyed() {
this.editor.destroy()
},
}
</script>
踩坑记录: 必须修改ueditor.config.js中的配置项,否则上传图片会报错(和后端沟通)
赋值: props→defaultMsg
取值: 父组件.ref.getUEContent()
清空: 父组件.ref.clear()
插入文本&&父组件设置编辑器默认值: this.$refs.uEditor.insert(text)