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>
相关推荐
木木黄木木4 分钟前
HTML5图片裁剪工具实现详解
前端·html·html5
念九_ysl6 分钟前
基数排序算法解析与TypeScript实现
前端·算法·typescript·排序算法
海石6 分钟前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
uhakadotcom18 分钟前
Vite 与传统 Bundler(如 Webpack)在 Node.js 应用的性能对比
前端·javascript·面试
uhakadotcom30 分钟前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
机器视觉知识推荐、就业指导1 小时前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC491 小时前
golang接口-interface
java·前端·golang
慕斯策划一场流浪1 小时前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI1 小时前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端