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>
相关推荐
paopaokaka_luck34 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
CN-Dust1 小时前
【VSCode】复制到下一行快捷键
ide·vscode·编辑器
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl