vue html 在线编辑,Vue+Element使用富文本编辑器的示例代码

富文本编辑器在任何项目中都会用到，在Element中我们推荐vue-quill-editor组件，现在我就把它提供给大家，希望对大家有用。具体截图如下：

安装编辑器组件

具体方法：npm install vue-quill-editor --save

编写组件

首先我们在components文件夹里创建ue.vue组件，效果图如下：

组件

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();

}

}

在页面中使用

下面是使用代码

首页

关于我们

添加关于我们

ref="myQuillEditor"

class="editer"

:options="editorOption" @ready="onEditorReady($event)">

确认提交

import { quillEditor } from 'vue-quill-editor' //调用编辑器

export default {

data() {

return {

infoForm: {

a_title: '',

a_source: '',

a_content:'',

editorOption: {}

},

//表单验证

rules: {

a_title: [

{required: true, message: '请输入标题', trigger: 'blur'}

],

a_content: [

{required: true, message: '请输入详细内容', trigger: 'blur'}

]

},

}

},

computed: {

editor() {

return this.$refs.myQuillEditor.quill

}

},

mounted() {

//初始化

},

methods: {

onEditorReady(editor) {

},

onSubmit() {

//提交

//this.$refs.infoForm.validate，这是表单验证

this.$refs.infoForm.validate((valid) => {

if(valid) {

this.$post('m/add/about/us',this.infoForm).then(res => {

if(res.errCode == 200) {

this.$message({

message: res.errMsg,

type: 'success'

});

this.$router.push('/aboutus/aboutlist');

} else {

this.$message({

message: res.errMsg,

type:'error'

});

}

});

}

});

}

},

components: {

//使用编辑器

quillEditor

}

}

以上就是全部代码，谢谢大家，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。