使用vue-quill-editor插件，完成富文本編輯功能

最近在忙着上線項目沒有更新。

現在我把自己在項目中用到的幾個插件整理一下。有不對的地方希望大家指出。謝謝

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

其中我使用了網上比較多的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;
        },
//轉碼，下面這個就是你在富文本框中輸出后的東西，你需要在

mounted（）中賦一下值，然后渲染出來就行了，其實主要用到的還是上面定義的str

   escapeStringHTML(strs) {

            strs = strs.replace(/&lt;/g, "<");

            strs = strs.replace(/&gt;/g, ">");

            return strs;

        },

最后東西就差不多出來了

給大家看看成品