首页 前端知识 vue3 ts - wangeditor 富文本编辑器的使用

vue3 ts - wangeditor 富文本编辑器的使用

2024-06-06 10:06:35 前端知识 前端哥 154 453 我要收藏

  近期开发的一个项目有涉及到富文本编辑器的使用,所以在这里总结一下。对比了一下网络上的多种富文本框组件,发现 wangeditor 组件相对来说功能比较齐全也比较简单,所以在这里我分享一下这个的使用方法。

一、效果图

请添加图片描述

二、部分细节说明

wangeditor 的工具栏说明:

1、在不配置的情况下是默认显示全部的,可以通过打印 editor.getAllMenuKeys() 查看全部的工具栏
// 查看所有工具栏key
console.log(editor.getAllMenuKeys());
2、可以通过 toolbarConfig.excludeKeys 来设置不显示的工具栏:
// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
   
  // 用于去掉不需要的工具栏配置
  excludeKeys: [
    "insertVideo", // 去掉插入视频功能
    "fullScreen", // 去掉全屏功能
  ],
};
3、在editorConfig中配置编辑器,比如只能输入多少个字,上传图片、视频接口请求等
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
   
  // 最长输入2000字
  maxLength: 2000,
  // 进入页面不自动聚焦
  autoFocus: true,
  MENU_CONF: {
   },
};
4、可以通过 @onChange 方法中获取到富文本编辑器里面的内容
// 获得输入的内容
const handleChange = (editor: any) => {
   
// editor.getHtml() 获取带标签的全部内容
// editor.getText() 获取文本内容
  console.log(editor.getHtml())
};
5、调用接口实现上传图片和视频

需要先在editorConfig中设置MENU_CONF: {},然后 editorConfig.MENU_CONF["uploadImage"]方法是上传图片,editorConfig.MENU_CONF["uploadVideo"]是上传视频:

// 上传图片
editorConfig.MENU_CONF["uploadImage"] = {
   
  async customUpload(file: any, insertFn: any) {
   
    // 在这里面处理相关上传图片的需求
  },
};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11082.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!