博客
关于我
VUE3(二十六)基于wangeditor自定义富文本插件
阅读量:397 次
发布时间:2019-03-05

本文共 3590 字,大约阅读时间需要 11 分钟。

项目中需要使用到wangeditor,这里封装一个自定义组件,便于后期使用。

首先,官方文档:

1:安装

npm i wangeditor --save

2:组件代码

Wangeditor.vue

Wangeditor.ts

import {    onMounted, onBeforeUnmount, ref, watch } from 'vue';// 引入wangeditor组件import WangEditor from 'wangeditor';// 引入代码高亮组件import hljs from 'highlight.js'// 公共状态文件import {     webScoketObject } from "/@/hooks/common"; // 官方文档:https://doc.wangeditor.com/export default {     name: 'Wangeditor',  setup(props: any, content: any) {       // 获取编辑器实例html    const editor = ref();    // 编辑器实例对象    let instance: any = '';    /**     * @name: 监听公共状态栏值变化(控制抽屉显示)     * @author: camellia     * @email: guanchao_gc@qq.com     * @date: 2021-01-10      */    watch(      () => webScoketObject.is_click_send,      () => {           if (webScoketObject.is_click_send)        {             instance.txt.clear();          webScoketObject.is_click_send = false;        }      }    );    /**     * @name: 生命周期函数-----挂载完成     * @author: camellia     * @email: guanchao_gc@qq.com     * @date: 2021-01-19      */    onMounted(() => {         // 编辑器实例对象      instance = new WangEditor(editor.value);      //插入代码语言配置      instance.config.languageType = [        'Bash',        'C',        'C#',        'C++',        'CSS',        'Java',        'JavaScript',        'JSON',        'TypeScript',        'Plain text',        'Html',        'XML',        'SQL',        'Go',        'Kotlin',        'Lua',        'Markdown',        'PHP',        'Python',        'Shell Session',        'Ruby',        'typescript'      ]      // 自定义菜单      instance.config.menus = [        // 'head',        // 'bold', //字体加粗        // 'fontSize',//字号        // 'fontName',//字体        // 'italic',        // 'underline',//下划线        // 'strikeThrough',//删除线        // 'indent',        // 'lineHeight',        'foreColor',        // 'backColor',        'link',        // 'list',//列表        // 'todo',        // 'justify',//对其        // 'quote',// 引用        'emoticon',        'image',        // 'video',//视频        // 'table',//表格        'code',        // 'splitLine',        // 'undo',//撤销        // 'redo',//恢复      ];      // 代码高亮      instance.highlight = hljs;      // 开启本地上传图片(这是后端上传链接)      instance.config.uploadImgServer = '/upload-img';      // 限制上传图片格式      instance.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];      // 开启本地上传视频(这是后端上传链接)      instance.config.uploadVideoServer = '/api/upload-video';      // 设置编辑器高度      instance.config.height = 150;      // 设置编辑器页面层级      instance.config.zIndex = 10;      // 设置编辑器placeholder      instance.config.placeholder = '请输入您的文字!';      // 配置编辑器显示颜色      instance.config.colors = [        '#000000',        '#eeece0',        '#1c487f',        '#4d80bf'      ];      // 忽略粘贴内容中的图片      instance.config.pasteIgnoreImg = true;       Object.assign(instance.config, {           // wangeditor 值发生变化的时候        onchange() {             // 将值传递至父组件          content.emit('getWangEditorValue', instance.txt.html());        },        // 上传网络图片回调        linkImgCallback(src:string){             console.log('图片 src ', src)        },        // 上传网络视频回调        onlineVideoCallback(video:string) {             // 自定义回调内容,内容成功插入后会执行该函数          console.log('插入视频内容', video)        }      });      instance.create();    });     /**     * @name: 生命周期函数-----页面卸载之前     * @author: camellia     * @email: guanchao_gc@qq.com     * @date: 2021-01-19      */    onBeforeUnmount(() => {         instance.destroy();      instance = null;    });    return {         editor,    };  },};

3:调用实例:

4:最终效果

在这里插入图片描述

有好的建议,请在下方输入您的建议。

欢迎访问个人博客

欢迎访问小程序:

在这里插入图片描述

转载地址:http://aqhwz.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(79)——MySQL常用函数总结
查看>>
Mysql学习总结(7)——MySql索引原理与使用大全
查看>>
Mysql学习总结(80)——统计数据库的总记录数和库中各个表的数据量
查看>>
Mysql学习总结(81)——为什么MySQL不推荐使用uuid或者雪花id作为主键?
查看>>
Mysql学习总结(82)——MySQL逻辑删除与数据库唯一性约束如何解决?
查看>>
Mysql学习总结(83)——常用的几种分布式锁:ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
查看>>
Mysql学习总结(84)—— Mysql的主从复制延迟问题总结
查看>>
Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
查看>>
Mysql学习总结(8)——MySql基本查询、连接查询、子查询、正则表达查询讲解
查看>>
Mysql学习总结(9)——MySql视图原理讲解与使用大全
查看>>
MySQL学习笔记十七:复制特性
查看>>
Mysql学习第一课-mysql的定义及sql语句
查看>>
mysql安全模式: sql_safe_updates
查看>>
mysql安装,卸载,连接
查看>>
MySQL安装之没有配置向导
查看>>
mysql安装出现 conflicts with mysql*的解决办法
查看>>
mysql安装卡在最后一步解决方案(附带万能安装方案)
查看>>
mysql安装和启动命令小结
查看>>
Mysql安装教程(命令行)
查看>>
mysql安装版安装
查看>>