npm安装编辑器组件
具体方法:npm install vue-quill-editor -save
具体实现
在components文件夹里创建editor.vue组件,具体代码如下:
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
mounted() {
const _this = this;
this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
});
},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
}
},
destroyed() {
this.editor.destroy();
}
}
</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’
使用
<el-form-item label="详细描述" prop="words">
<div class="edit_container">
<quill-editor v-model="ruleForm.words" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)">
</quill-editor>
</div>
</el-form-item>
1
2
3
4
5
6
js部分
data() {
return {
editorOption: {}
},
1
2
3
4
components: {//使用编辑器
quillEditor
}
1
2
3
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
1
2
3
4
methods: {
onEditorReady(editor) {
},
————————————————
版权声明:本文为CSDN博主「兮颜_Queen」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_38057434/article/details/82665545