富文本插件有很多，之前在做項(xiàng)目的時(shí)候也看了很多資料，最后發(fā)現(xiàn)還是quill-editor這個(gè)插件做好用，支持功能的選擇，還有可以自定義上傳圖片，很方便，我在移動(dòng)端的微信公眾號(hào)以及vue的管理分別使用了這個(gè)插件。
我們?cè)趘ue中使用的時(shí)候，需要把相應(yīng)的模塊下載到你的node_modules里面。
1.在命令欄輸入：npm install vue-quill-editor --save;
2.在你的vue-ceil中的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'
如圖所示：
3.在需要使用該組件的頁面中：
? ? 3.1引入模塊：import { quillRedefine } from "vue-quill-editor-upload";
定義常用的模塊
const toolbarOptions = [
? ["bold", "italic", "underline", "image"], // toggled buttons
? [{ header: 1 }, { header: 2 }],
? [{ color: [] }]
];
3.2在指定的<template>
? ??????<quill-editor
? ? ? ? ? ? ? ? ref="QuillEditor"
? ? ? ? ? ? ? ? :content="content"
? ? ? ? ? ? ? ? :options="editorOption"
? ? ? ? ? ? ? ? @change="onEditorChange($event)"
? ? ? ? ? ? ? ></quill-editor>
</template>
3.3需要在data里面配置參數(shù)
editorOption: {
? ? ? ? modules: {
? ? ? ? ? toolbar: {
? ? ? ? ? ? container: toolbarOptions, // 工具欄
? ? ? ? ? ? handlers: {
? ? ? ? ? ? ? image: function(value) {
? ? ? ? ? ? ? ? if (value) {
? ? ? ? ? ? ? ? ? document.getElementById("upload_filed").click();
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? this.quill.format("image", false);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
3.4methods里面需要定義方法
handleSuccess(res) {
? ? ? // 獲取富文本組件實(shí)例
? ? ? console.log(res, "21323");
? ? ? let quill = this.$refs.QuillEditor.quill;
? ? ? // 如果上傳成功
? ? ? if (res) {
? ? ? ? // 獲取光標(biāo)所在位置
? ? ? ? let length = quill.getSelection().index;
? ? ? ? // 插入圖片，res為服務(wù)器返回的圖片鏈接地址
? ? ? ? quill.insertEmbed(length, "image", res);//自定義上傳
? ? ? ? // 調(diào)整光標(biāo)到最后
? ? ? ? quill.setSelection(length + 1);
? ? ? } else {
? ? ? ? // 提示信息，需引入Message
? ? ? ? Message.error("圖片插入失敗");
? ? ? }
? ? },
//上傳圖片的方法使用的傳統(tǒng)的input方法上傳的
fileChanged(e) {
? ? ? const file = e.file;
? ? ? this.fr = new FileReader();
? ? ? this.targetImg = new FormData();
? ? ? this.targetImg.append("file", file, file.name);
? ? ? this.fr.readAsDataURL(file);
? ? ? this.fr.onload = e => {
? ? ? ? this.upImg = e.target.result;
? ? ? ? this.values = null;
? ? ? };
? ? ? if (this.targetImg) {
? ? ? ? uploadFile(projectList.file.uploadFile, this.targetImg).then(res => {
? ? ? ? ? if (res.data.resultCode == "000000") {
? ? ? ? ? ? let lit = "http://cfile.12365ai.cn" + res.data.url;
? ? ? ? ? ? Toast({
? ? ? ? ? ? ? message: "圖片上傳成功",
? ? ? ? ? ? ? position: "bottom",
? ? ? ? ? ? ? duration: 1000
? ? ? ? ? ? });
? ? ? ? ? ? this.handleSuccess(lit);
? ? ? ? ? }
? ? ? ? });
? ? ? }
? ? },
