最近在忙著上線專案沒有更新。

現在我把自己在專案中用到的幾個外掛整理一下。有不對的地方希望大家指出。謝謝

在做後臺管理系統的時候有要求完成一個簡單的富文字框功能。

其中我使用了網上比較多的vue-quill-editor外掛

安裝方法我就不詳說了，相信大家都懂

廢話不多說，先上程式碼。

import Quill from "quill";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { container, ImageExtend, QuillWatch } from 
 
"quill-image-extend-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/ImageExtend", ImageExtend);
Quill.register("modules/imageResize", ImageResize);

以上是需要引入的外掛。

因為我的富文字框需要插入圖片，所以要引入

import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/ImageExtend", ImageExtend);
Quill.register("modules/imageResize", ImageResize);
網上的我看了一下很多都沒有這個。我也是找了很久。
首先是在頁面中你需要的地方使用該外掛
 

          <div class="details-content">
                    <div class="edit_container">
                        <el-upload
                            class="avatarUploader"
                            :action="uploadUrl"
                            :headers="reqHeaders"
                            :show
 
-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                            />
                            <i
                                v-else
                                class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </el-upload>
                        <quill-editor
                            style="height: 545px;"
                            v-model="content"
                            ref="myQuillEditor"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)"
                        ></quill-editor>
                    </div>
                </div>

在插入圖片上傳中，我是用的是element中的元件

按照順序，我們現在data中定義我們的引數

       editorOption: {
                scrollingContainer: "#editorcontainer",
                placeholder: "",
                // or 'bubble'
                theme: "snow",
                modules: {
                    imageResize: {
                        displayStyles: {
                            backgroundColor: "black",
                            border: "none",
                            color: "white"
                        },
                        modules: ["Resize", "DisplaySize", "Toolbar"]
                    },
                    toolbar: {
                        // 工具欄
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // upload點選上傳事件
                                    document
                                        .querySelector(".el-icon-plus")
                                        .click();
                                } else {
                                    this.quill.format("image", false);
                                }
                            }
                        }
                    }
                }
            },
            str：“”，
            strs：“”，
            content: "",            

之後我們可以看到，在editorOption的module中有用到一個全域性陣列toolbarOptions這個是富文字框中的工具欄，我們在全域性中定義一下

const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], //加粗，斜體，下劃線，刪除線
    ["blockquote", "code-block"], //引用，程式碼塊
    [{ header: 1 }, { header: 2 }], // 標題，鍵值對的形式；1、2表示字型大小
    [{ list: "ordered" }, { list: "bullet" }], //列表
    [{ script: "sub" }, { script: "super" }], // 上下標
    [{ indent: "-1" }, { indent: "+1" }], // 縮排
    [{ direction: "rtl" }], // 文字方向
    [{ size: ["small", false, "large", "huge"] }], // 字型大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], //幾級標題
    [{ color: [] }, { background: [] }], // 字型顏色，字型背景顏色
    [{ font: [] }], //字型
    [{ align: [] }], //對齊方式
    ["clean"], //清除字型樣式
    ["image"] //上傳圖片、上傳視訊
];

之後就是方法了：

我裡面定義了三個方法，其實就用到了一個

//獲得焦點事件    
onEditorChange(val) {
            this.str = val.html;
        },
//轉碼，下面這個就是你在富文字框中輸出後的東西，你需要在

最後東西就差不多出來了

給大家看看成品