安裝

npm install @wangeditor/editor @wangeditor/editor-for-vue @wangeditor/plugin-formula -S

npm install jquery

封裝組件

<template>
    <div>
        <div style="border: 1px solid #ccc; margin-top: 10px">
            <!-- 工具欄 -->
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
            />
            <!-- 編輯器 -->
            <Editor
                style="height: 400px; overflow-y: hidden"
                :defaultConfig="editorConfig"
                v-model="html"
                @onChange="onChange"
                @onCreated="onCreated"
            />
        </div>
    </div>
</template>

<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
    name: "WangEditor",
    components: {Editor, Toolbar},
    props: {
        html: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            editor: null,
            toolbarConfig: {
                // toolbarKeys: [ /* 顯示哪些菜單，如何排序、分組 */ ],
                /* 隱藏哪些菜單 */
                excludeKeys: [
                    //上傳圖片
                    "group-image",
                    //上傳視頻
                    "group-video",
                ],
            },
            editorConfig: {
                placeholder: "",
                // autoFocus: false,
                // 所有的菜單配置，都要在 MENU_CONF 屬性下
                MENU_CONF: {},
            },
        };
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否則會報錯
        },
        onChange(editor) {
            let content = editor.getHtml();
            this.$emit("receiveContent", content);
        },
        getEditorText() {
            const editor = this.editor;
            if (editor == null) return;
            console.log(editor.getText()); // 執(zhí)行 editor API
        },
        printEditorHtml() {
            const editor = this.editor;
            if (editor == null) return;

            console.log(editor.getHtml()); // 執(zhí)行 editor API
        },
    },
    mounted() {
        // 模擬 ajax 請求，異步渲染編輯器
        setTimeout(() => {
        }, 1500);
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 組件銷毀時，及時銷毀 editor ，重要！?。?/span>
    },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

使用組件

<wang-editor :html="data.content" @receiveContent="receiveContent"></wang-editor>

//接收內(nèi)容
        receiveContent(content) {
            this.data.content = content;
        }

文章來源地址http://www.zghlxwxcb.cn/news/detail-831147.html

到了這里，關(guān)于VUE2整合富文本編輯器 wangEditor的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！