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>
相关推荐
信号处理学渣2 分钟前
Git命令行中vim的操作
git·编辑器·vim
爱的叹息8 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
遗憾随她而去.15 分钟前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19991 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin1 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快1 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛1 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼1 小时前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_1 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮