1.下载依赖
npm i quill -S
npm i vue-quill-editor -S
2.直接在组件中,或页面中使用,代码
注意:我的提交按钮用了element-ui组件库的提示组件
<template>
<div class="edii_page">
<!-- 富文本编辑器 -->
<quill-editor
class="editor"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
>
</quill-editor>
<!-- 提交按钮 -->
<el-button
type="primary"
@click="onSubmit"
>提交</el-button>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式 三种样式三选一引入即可
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.bubble.css'
export default {
data () {
return {
content: '',
editorOption: {
placeholder: '文本编辑'
}
};
},
mounted () {
this.$nextTick(function() {
this.$refs.myQuillEditor.quill.blur();
});
},
methods: {
onEditorBlur () {
},
onEditorFocus () {//获得焦点事件
},
onEditorChange (val) {//内容改变事件
},
onSubmit () {
if (this.content === null) {
this.$message({
duration: 1 * 1500,
message: '内容不能空提交!',
type: 'warning',
});
} else {
console.log(this.content)
this.$message({
duration: 1 * 1500,
message: '提交成功!',
type: 'success',
});
}
}
}
}
</script>
<style scoped lang="scss">
.edii_page {
text-align: center;
}
.editor {
height: 350px;
padding: 40px;
margin-bottom: 40px;
text-align: left;
}
</style>
其他富文本编辑器可以参考:element-ui-admin中文文档:
panjiachen.github.io/vue-element…
element-ui-admin 专用的富文本编辑器 中文文档 www.tiny.cloud/docs/integr…