文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3问题:如何使用WangEditor富文本?能自定义才是真的会用!

2024-11-30 04:02

关注

一、需求分析,问题描述

1、需求

使用富文本进行内容编辑,要求自定义工具栏菜单顺序及其分组,并且要求自定义选择图片、自定义选择视频。

2、问题

二、解决问题,答案速览

实现代码如下,复制粘贴即可直接使用。

如果你有时间,具体问题梳理、代码分析、知识总结,可见第三部分。

1、配置开始使用

(1)下载依赖

npm i @wangeditor/editor @wangeditor/editor-for-vue

(2)引入css和内置组件

// 引入 css
import '@wangeditor/editor/dist/css/style.css' 
// 引入 组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 引入 接口类型
import { IDomEditor, IEditorConfig } from "@wangeditor/editor";

(3)使用



2、自定义工具栏菜单的展示

工具栏菜单的展示,如菜单的顺序和分组、添加删除。

如果想要自定义,只需修改工具栏配置对象的toolbarKeys属性。toolbarKeys属性值是一个数组,内部填写菜单的key,使用官方API接口editor.getAllMenuKeys()可查询全部内置菜单的key。

// 工具栏配置
const toolbarConfig = {
toolbarKeys: [
// 一些常用的菜单 key
'bold', // 加粗
'italic', // 斜体
'through', // 删除线
'underline', // 下划线
'bulletedList', // 无序列表
'numberedList', // 有序列表
'color', // 文字颜色
'insertLink', // 插入链接
'fontSize', // 字体大小
'lineHeight', // 行高
'uploadImage', // 上传图片
'uploadVideo',//上传视频
'delIndent', // 缩进
'indent', // 增进
'deleteImage',//删除图片
'divider', // 分割线
'insertTable', // 插入表格
'justifyCenter', // 居中对齐
'justifyJustify', // 两端对齐
'justifyLeft', // 左对齐
'justifyRight', // 右对齐
'undo', // 撤销
'redo', // 重做
'clearStyle', // 清除格式
'fullScreen' // 全屏
]
}

3、自定义工具栏内置菜单的功能

工具栏菜单的功能,如链接、上传图片、上传视频。

如果想要自定义,只需修改编辑器配置对象的MENU_CONF属性。不同的功能都对应着不同的MENU_CONF属性值,这里我以问题提出者的问题为示例,具体请参考官方文档,写的非常不错的,放下面吧。

https://www.wangeditor.com/v5/menu-config.html.

// 编辑器配置
const editorConfig = { 
placeholder: '请输入内容...',
MENU_CONF: {
// 上传图片
uploadImage: {
// 自定义选择图片
async customBrowseAndUpload(insertFn: InsertFnType) {
// 打开图片素材库
photoGalleryDialogVisible.value = true
},
},
// 上传视频
uploadVideo: {
// 自定义选择视频
async customBrowseAndUpload(insertFn: InsertFnType) {
// 打开视频素材库
videoGalleryDialogVisible.value = true
},
}, 
}
}

4、自定义扩展新功能菜单

(1)定义菜单class

目前可以自定义扩展的功能菜单有按钮、下拉、下拉面板、模态框。

新建myButtonMenu.ts文件,把下面代码放进去。

import { IButtonMenu, IDomEditor } from '@wangeditor/editor'

class MyButtonMenu implements IButtonMenu { // TS 语法
// class MyButtonMenu { // JS 语法

constructor() {
this.title = 'My menu title' // 自定义菜单
// this.iconSvg = '...' // 可选
this.tag = 'button'
}

// 获取菜单执行时的 value ,用不到则返回空 字符串或 false
getValue(editor: IDomEditor): string | boolean { // TS 语法
// getValue(editor) { // JS 语法
return ' hello '
}

// 菜单是否需要激活(如选中加粗文本,“加粗”菜单会激活),用不到则返回 false
isActive(editor: IDomEditor): boolean { // TS 语法
// isActive(editor) { // JS 语法
return false
}

// 菜单是否需要禁用(如选中 H1 ,“引用”菜单被禁用),用不到则返回 false
isDisabled(editor: IDomEditor): boolean { // TS 语法
// isDisabled(editor) { // JS 语法
return false
}

// 点击菜单时触发的函数
exec(editor: IDomEditor, value: string | boolean) { // TS 语法
// exec(editor, value) { // JS 语法
if (this.isDisabled(editor)) return
editor.insertText(value) // value 即 this.value(editor) 的返回值
}

}

(2)注册和插入菜单

定义菜单key时,要保证key唯一,不能和内置菜单key重复。插入菜单时,将对应的菜单key放在toolbarKeys想要的顺序位置即可。

import { Boot } from '@wangeditor/editor'
import MyButtonMenu from './myButtonMenu'

// 工具栏配置
const toolbarConfig = {
toolbarKeys: [
// 插入菜单key
'menu1',
]
}

// 组件创建时
const handleCreated = (editor: IDomEditor) => {
editorRef.value = editor;

const menu1Conf = {
key: 'menu1', // 定义 menu key :要保证唯一、不重复(重要)
factory() {
return new MyButtonMenu() // 替换为你菜单的 class
},
}
// 注册菜单
Boot.registerMenu(menu1Conf)
};

三、问题解析,知识总结

1、如何配置开始使用?

补充几点注意事项吧,这也是官方提醒:

2、如何自定义工具栏菜单的展示?

这里补充几个官方API:

import { DomEditor } from '@wangeditor/editor'
const toolbar = DomEditor.getToolbar(editor)

const toolbarConfig = toolbar.getConfig()
// 查看当前菜单排序和分组
console.log( toolbarConfig.toolbarKeys )

3、如何自定义工具栏内置菜单的功能?

这里有通用的操作,参考官方,分两步实现:

4、如何自定义扩展新功能菜单?

这里官方提供了三处参考:定义新菜单、定义插件、定义新元素。

我认为定义新菜单是比较常用的,这样其实已经就很灵活了。至于其他两项有需求的朋友,可以自行研究一番,可能比较烧哈。

最后插一句,WangEditor这个库,写的真是挺不错的!

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯