一、安装 vue-quill-editor
npm install vue-quill-editor
二、在main.js中引入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);
三、在模块中引用
<template>
<div class="boxs">
<el-upload
class="avatar-uploader"
name="file"
action=""
:show-file-list="false"
:data="uploadData"
:http-request="uploadHttpRequest"
>
</el-upload>
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption">
</quill-editor>
<!-- 富文本内容 -->
<button v-on:click="saveHtml">保存</button>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
const toolbarOptions = [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ size: ["small", false, "large", "huge"] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
[{ font: [] }],
[{ align: [] }],
["clean"],
["link", "image", "video"],
];
export default {
data() {
return {
uploadData: {},
content: "",
content: null,
editorOption: {
placeholder: "请输入文章内容",
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: function (value) {
if (value) {
document.querySelector(".avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
},
},
},
},
},
};
},
methods: {
saveHtml(event) {
console.log("this.content", this.content);
},
uploadHttpRequest(param) {
console.log(param.file);
let quill = this.$refs.myQuillEditor.quill;
let length = quill.getSelection().index;
quill.insertEmbed(
length,
"image",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
);
quill.setSelection(length + 1);
},
},
};
</script>
<style >
.boxs {
line-height: normal !important;
height: 500px;
width: 700px;
margin: 20px auto;
}
</style>