vue項目中使用編輯器，輕量，操作欄選取自己需要的

官網(wǎng)地址：用于 Vue React | wangEditor

使用在vue項目中引入
?

npm install @wangeditor/editor --save


npm install @wangeditor/editor-for-vue --save

封裝成組件使用

<template>
    <div style="border: 1px solid #ccc; margin:0 auto;">
        <Toolbar
            style="border-bottom: 1px solid #ccc;"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @onChange="onChange"
        />
    </div>
</template>
<script>
  import Vue from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  export default Vue.extend({
    components: { Editor, Toolbar },
    props: {
        value: { type: String, required: true },
    },
    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: { 
                excludeKeys:[
                "blockquote","header1","header2","header3",
                "headerSelect", "fontFamily","code","clearStyle","todo", "emotion","insertLink","insertImage", "insertTable","group-video","codeBlock","redo","headerSelect","insertVideo",
                ]
            },
            editorConfig: { placeholder: '請輸入內(nèi)容...' ,
            MENU_CONF: {
            uploadImage: {// 配置上傳圖片
              customUpload: this.update
            },},},
            mode: 'simple', // or 'default'
        }
    },
    created(){    },
    methods: {
        onCreated(editor) { 
            this.editor = Object.seal(editor) 
        },
        onChange(editor) {
            this.$emit('change', editor.getHtml());
        },
        getEditorText() {
            const editor = this.editor;
            if (editor == null) return;
            
        },        
        update(files,insertFn){//圖片上傳
            var formData = new FormData();
            formData.append('file', files);
            //根據(jù)后臺提供的圖片上傳接口，進行接口配置和上傳
            this.apiSever.post(this.URl.UPLOAD,formData, res => {
                insertFn(res.data.url);
            })
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.html = this.value
        })
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() 
    }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

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

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