wangeditor编辑器配置

vue项目中使用编辑器,轻量,操作栏选取自己需要的

官网地址:用于 Vue React | wangEditor

使用在vue项目中引入

html 复制代码
npm install @wangeditor/editor --save


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

封装成组件使用

javascript 复制代码
<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: '请输入内容...' ,
            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);
            //根据后台提供的图片上传接口,进行接口配置和上传
            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>
相关推荐
ai小鬼头2 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz2 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子2 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边2 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客2 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8882 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家2 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试