react-draft-wysiwyg API

目录

一、class / style(样式)

二、state(编辑器状态)

三、toolbar(工具栏)

四、localization(语言翻译)

五、mention / hashtag(提及)

mention

hashtag

六、callbacks(回调)

toolbar 配置

一、class / style(样式)

  1. wrapperClassName: 工具栏 + 编辑区 className
  2. editorClassName: 编辑区 className
  3. toolbarClassName: 工具栏 className
  4. wrapperStyle: 工具栏 + 编辑区 style
  5. editorStyle: 编辑区 style
  6. toolbarStyle: 工具栏 style
<EditortoolbarClassName="toolbarClassName"wrapperClassName="wrapperClassName"editorClassName="editorClassName"wrapperStyle="wrapperStyle"editorStyle="editorStyle"toolbarStyle="toolbarStyle"
/>

二、state(编辑器状态)

  1. defaultEditorState: 初始化默认值(EditorState类型)
  2. editorState: 编辑器值
  3. onEditorStateChange: 编辑器值改变时调用(EditorState类型)
  4. defaultContentState: 初始化默认值(RawDraftContentState类型)
  5. contentState: 编辑器值
  6. onChange: 编辑器值改变时调用(RawDraftContentState类型)
  7. onContentStateChange编辑器值改变时调用(RawDraftContentState类型)
<EditordefaultEditorState={defaultEditorState}editorState={editorState}onEditorStateChange={onEditorStateChange}defaultContentState={defaultContentState}contentState={contentState}onChange={onChange}onContentStateChange={onContentStateChange}
/>

三、toolbar(工具栏)

  1. toolbarOnFocus: 是否在focus时才显示toolbar
  2. toolbarHidden: 是否显示toolbar
  3. toolbar: 工具栏配置(详解看补充)
  4. toolbarCustomButtons: 自定义工具栏按钮(详解看补充)
<EditortoolbarOnFocus={true/false}toolbarHidden={true/false}toolbar={toolbar}toolbarCustomButtons={toolbarCustomButtons}
/>

补充：

toolbar属性： options: 它是工具栏和每个菜单选项中可用选项的数组。只有在此属性中指定的选项才会按指定的顺序添加到toolbar中。默认情况下，所有选项都存在。在fontSize的情况下，可以使用选项来添加更多的字体大小classname: 这个属性可以用来为工具栏中的按钮、下拉菜单和弹出菜单添加classnameinDropdown: 此属性可用于对下拉菜单中的选项进行分组component: 此属性可用于配置自定义react组件，使其用于工具栏选项，而不是预构建的组件icon: 可用于指定工具栏按钮的图标colorPicker:colors: 这是要在color-picker中显示的颜色数组。Value应为rgb值link:showOpenOptionOnHover: 如果是这样，一个小箭头图标显示在鼠标悬停的链接上。单击此图标将在新选项卡中打开链接。默认值为true。Value应为rgb值link:defaultTargetOption: 此属性在编辑器中设置链接的目标。默认值是'_self'link:linkCallback: 这是处理用户添加的链接的回调。默认使用linkify库，用于此目的。回调函数传入了一个对象，该对象包含以下细节{title: <text>，target: <link>，targetOption: <_blank|_self|_parent|_top>}。它期望返回一个类似的对象与新的细节，将保存在链接中emoji:emojis: 该属性是 emoji(unicode) 的数组。它们显示在emoji选项中embedded:defaultSize: 此属性可用于在编辑器中传递嵌入式链接的默认 大小(高度和宽度)。默认值为'auto'embedded:embedCallBack: 这个回调函数在用户添加要嵌入的url后被调用，它可以用于对url进行任何所需的修改。回调函数传入一个url，应该只返回urlimage:urlEnabled: 这个属性可以用来配置是否启用指定图像源URL的选项。默认值为trueimage:uploadEnabled: 该属性可用于配置是否应该启用上传图像计算机的选项。默认值为trueimage:uploadCallback: 这是图像上传回调。它应该返回一个promise, resolve的值为图像src。默认值为true。上面的uploadEnabled和uploadCallback选项都应该存在，以便启用上传功能。Promise应该返回一个对象{data: {link: <THE_URL>}}image: 该属性可用于在图像弹出框中上传后配置图像预览，默认为falseimage:alignmentEnabled: 该属性可用于配置是否启用图像对齐。对齐选项有LEFT、RIGHT和CENTER。默认值为trueimage:inputAccept: 该属性可用于配置哪些文件类型应该允许上传，通过文件输入进行图像上传image:alt: 该属性可用于启用图像的alt字段，也可将其设置为必填项image:defaultSize: 此属性可用于在编辑器中传递图像的默认 大小(高度和宽度)。默认值为'auto'覆盖默认toolbar
组件 props 接收值：config: 工具栏属性translations: 工具栏所有属性的 列表(我也不知道啥用)onChange: 当选择的值发生变化时的回调函数expanded: 如果该选项是下拉式或弹出式的，则可以使用此值将其设置为打开/隐藏状态onExpandEvent: 如果该选项是下拉式或弹出式的，可以使用该方法去设置 expanded 值doExpand: 设置 expanded 为 truedoCollapse: 设置 expanded 为 falsecurrentState: 选择 option 的值新增自定义toolbar
组件 props 接受值onChange: 当选择的值发生变化时的回调函数editorState: 当前编辑器的 值(类型为EditorState)translations: 工具栏所有属性的列表modalHandler: 如果自定义选项有下拉框或弹出框。这可以用来控制它们的打开和关闭。使用这个属性将确保当鼠标在页面的任何地方单击时，所有弹出窗口都关闭

toolbar 支持两种模式，一种是通过官方属性进行配置 toolbar，另一种是直接覆盖官方 toolbar 组件。( 具体toolbar见文末 )

toolbarCustomButtons 新增自定义 toolbar 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { EditorState, Modifier } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';class CustomOption extends Component {static propTypes = {onChange: PropTypes.func,editorState: PropTypes.object,};addStar: Function = (): void => {const { editorState, onChange } = this.props;const contentState = Modifier.replaceText(editorState.getCurrentContent(),editorState.getSelection(),'⭐',editorState.getCurrentInlineStyle(),);onChange(EditorState.push(editorState, contentState, 'insert-characters'));};render() {return (<div onClick={this.addStar}>⭐</div>);}
}const EditorCustomToolbarOption = () => (<EditortoolbarCustomButtons={[<CustomOption />]}/>
);

四、localization(语言翻译)

  1. locale: 语言选择(内置：en, fr, zh, ru, pt, ko, it, nl, de, da, zh_tw, pl, es)
  2. translations: 用来覆盖默认翻译，为不支持的地区添加新的翻译
<Editorlocalization={{locale: 'zh',}}
/>

五、mention / hashtag(提及)

mention

  1. separator: 分割符
  2. trigger: 触发符
  3. suggestions: 建议
    • text: 选择显示的值
    • value: 编辑器显示的值
    • url: href 链接，如果不存在则使用 value 替代

hashtag

  1. separator: 分隔符
  2. trigger: 触发符
<Editormention={{separator: ' ',trigger: '@',suggestions: [{ text: 'APPLE', value: 'apple', url: 'apple' },{ text: 'BANANA', value: 'banana', url: 'banana' },{ text: 'CHERRY', value: 'cherry', url: 'cherry' },{ text: 'DURIAN', value: 'durian', url: 'durian' },{ text: 'EGGFRUIT', value: 'eggfruit', url: 'eggfruit' },{ text: 'FIG', value: 'fig', url: 'fig' },{ text: 'GRAPEFRUIT', value: 'grapefruit', url: 'grapefruit' },{ text: 'HONEYDEW', value: 'honeydew', url: 'honeydew' },],}}hashtag={{separator: ' ',trigger: '#',}}
/>

六、callbacks(回调)

  1. onFocus: 编辑器聚焦
  2. onBlur: 编辑器失焦
  3. onTab: 键盘 tab 回调
<EditoronFocus={(event) => {}}onBlur={(event, editorState) => {}}onTab={(event) => {}}
/>

toolbar 配置

{options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],inline: {inDropdown: false,className: undefined,component: undefined,dropdownClassName: undefined,options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace', 'superscript', 'subscript'],bold: { icon: bold, className: undefined },italic: { icon: italic, className: undefined },underline: { icon: underline, className: undefined },strikethrough: { icon: strikethrough, className: undefined },monospace: { icon: monospace, className: undefined },superscript: { icon: superscript, className: undefined },subscript: { icon: subscript, className: undefined },},blockType: {inDropdown: true,options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code'],className: undefined,component: undefined,dropdownClassName: undefined,},fontSize: {icon: fontSize,options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],className: undefined,component: undefined,dropdownClassName: undefined,},fontFamily: {options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],className: undefined,component: undefined,dropdownClassName: undefined,},list: {inDropdown: false,className: undefined,component: undefined,dropdownClassName: undefined,options: ['unordered', 'ordered', 'indent', 'outdent'],unordered: { icon: unordered, className: undefined },ordered: { icon: ordered, className: undefined },indent: { icon: indent, className: undefined },outdent: { icon: outdent, className: undefined },},textAlign: {inDropdown: false,className: undefined,component: undefined,dropdownClassName: undefined,options: ['left', 'center', 'right', 'justify'],left: { icon: left, className: undefined },center: { icon: center, className: undefined },right: { icon: right, className: undefined },justify: { icon: justify, className: undefined },},colorPicker: {icon: color,className: undefined,component: undefined,popupClassName: undefined,colors: ['rgb(97,189,109)', 'rgb(26,188,156)', 'rgb(84,172,210)', 'rgb(44,130,201)','rgb(147,101,184)', 'rgb(71,85,119)', 'rgb(204,204,204)', 'rgb(65,168,95)', 'rgb(0,168,133)','rgb(61,142,185)', 'rgb(41,105,176)', 'rgb(85,57,130)', 'rgb(40,50,78)', 'rgb(0,0,0)','rgb(247,218,100)', 'rgb(251,160,38)', 'rgb(235,107,86)', 'rgb(226,80,65)', 'rgb(163,143,132)','rgb(239,239,239)', 'rgb(255,255,255)', 'rgb(250,197,28)', 'rgb(243,121,52)', 'rgb(209,72,65)','rgb(184,49,47)', 'rgb(124,112,107)', 'rgb(209,213,216)'],},link: {inDropdown: false,className: undefined,component: undefined,popupClassName: undefined,dropdownClassName: undefined,showOpenOptionOnHover: true,defaultTargetOption: '_self',options: ['link', 'unlink'],link: { icon: link, className: undefined },unlink: { icon: unlink, className: undefined },linkCallback: undefined},emoji: {icon: emoji,className: undefined,component: undefined,popupClassName: undefined,emojis: ['😀', '😁', '😂', '😃', '😉', '😋', '😎', '😍', '😗', '🤗', '🤔', '😣', '😫', '😴', '😌', '🤓','😛', '😜', '😠', '😇', '😷', '😈', '👻', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '🙈','🙉', '🙊', '👼', '👮', '🕵', '💂', '👳', '🎅', '👸', '👰', '👲', '🙍', '🙇', '🚶', '🏃', '💃','⛷', '🏂', '🏌', '🏄', '🚣', '🏊', '⛹', '🏋', '🚴', '👫', '💪', '👈', '👉', '👉', '👆', '🖕','👇', '🖖', '🤘', '🖐', '👌', '👍', '👎', '✊', '👊', '👏', '🙌', '🙏', '🐵', '🐶', '🐇', '🐥','🐸', '🐌', '🐛', '🐜', '🐝', '🍉', '🍄', '🍔', '🍤', '🍨', '🍪', '🎂', '🍰', '🍾', '🍷', '🍸','🍺', '🌍', '🚑', '⏰', '🌙', '🌝', '🌞', '⭐', '🌟', '🌠', '🌨', '🌩', '⛄', '🔥', '🎄', '🎈','🎉', '🎊', '🎁', '🎗', '🏀', '🏈', '🎲', '🔇', '🔈', '📣', '🔔', '🎵', '🎷', '💰', '🖊', '📅','✅', '❎', '💯',],},embedded: {icon: embedded,className: undefined,component: undefined,popupClassName: undefined,embedCallback: undefined,defaultSize: {height: 'auto',width: 'auto',},},image: {icon: image,className: undefined,component: undefined,popupClassName: undefined,urlEnabled: true,uploadEnabled: true,alignmentEnabled: true,uploadCallback: undefined,previewImage: false,inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',alt: { present: false, mandatory: false },defaultSize: {height: 'auto',width: 'auto',},},remove: { icon: eraser, className: undefined, component: undefined },history: {inDropdown: false,className: undefined,component: undefined,dropdownClassName: undefined,options: ['undo', 'redo'],undo: { icon: undo, className: undefined },redo: { icon: redo, className: undefined },},
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/873764.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【LeetCode】二叉树的最大深度

【LeetCode】二叉树的最大深度

目录 一、题目二、解法完整代码 一、题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3 示例 2&#x…
阅读更多...
Leetcode2160. 拆分数位后四位数字的最小和：

Leetcode2160. 拆分数位后四位数字的最小和：

问题描述&#xff1a; 给你一个四位 正 整数 num 。请你使用 num 中的 数位 &#xff0c;将 num 拆成两个新的整数 new1 和 new2 。new1 和 new2 中可以有 前导 0 &#xff0c;且 num 中 所有 数位都必须使用。 比方说&#xff0c;给你 num 2932 &#xff0c;你拥有的数位包括…
阅读更多...
InnoDB 的 Buffer Pool

InnoDB 的 Buffer Pool

InnoDB 的 Buffer Pool 是一个关键组件&#xff0c;用于提高数据库的性能和效率。它充当内存中的缓存&#xff0c;用于存储数据页、索引页和其他频繁访问的数据。以下是 InnoDB Buffer Pool 的详细介绍&#xff1a; 1. Buffer Pool 的作用 Buffer Pool 是 InnoDB 的缓冲区&am…
阅读更多...
怎么剪辑音频文件？4款适合新的音频剪辑软件

怎么剪辑音频文件？4款适合新的音频剪辑软件

是谁还不会音频剪辑&#xff1f;无论是个人音乐爱好者&#xff0c;还是专业音频工作者&#xff0c;我们都希望能找到一款操作简便、功能强大且稳定可靠的音频剪辑工具。今天&#xff0c;我就要为大家带来四款热门音频剪辑软件的体验感分享。 一、福昕音频剪辑 福昕音频剪辑是…
阅读更多...
YOLO 模型基础入门及官方示例演示

YOLO 模型基础入门及官方示例演示

文章目录 Github官网简介模式数据集Python 环境Conda 环境Docker 环境部署 CPU 版本官方 CLI 示例官方 Python 示例 任务目标检测姿势估计图像分类 Ultralytics HUB视频流示例 Github https://github.com/ultralytics/ultralytics 官网 https://docs.ultralytics.com/zhhttp…
阅读更多...
【IEEE出版】第四届能源工程与电力系统国际学术会议（EEPS 2024）

【IEEE出版】第四届能源工程与电力系统国际学术会议（EEPS 2024）

第四届能源工程与电力系统国际学术会议&#xff08;EEPS 2024&#xff09; 2024 4th International Conference on Energy Engineering and Power Systems 重要信息 大会官网&#xff1a;www.iceeps.com 大会时间&#xff1a;2024年8月9-11日 大会…
阅读更多...
2024年7月萤火虫航天为NASA发射8颗立方体卫星

2024年7月萤火虫航天为NASA发射8颗立方体卫星

作为美国宇航局立方体卫星发射计划的一部分&#xff0c;萤火虫航空航天公司于7月3日在该公司的阿尔法火箭上发射了八颗小型卫星。这枚名为“夏日噪音”的火箭于太平洋夏令时&#xff08;PDT&#xff09;晚上9点04分从加利福尼亚州范登堡空军基地的2号航天发射场成功升空。 立方…
阅读更多...
解读vue3源码-响应式篇2

解读vue3源码-响应式篇2

提示&#xff1a;看到我 请让我滚去学习 文章目录 vue3源码剖析reactivereactive使用proxy代理一个对象1.首先我们会走isObject(target)判断&#xff0c;我们reactive全家桶仅对对象类型有效&#xff08;对象、数组和 Map、Set 这样的集合类型&#xff09;&#xff0c;而对 str…
阅读更多...
【数学建模】多波束测线问题(持续更新)

【数学建模】多波束测线问题(持续更新)

多波束测线问题 问题 1建立模型覆盖宽度海水深度重叠长度重叠率 问题二问题三问题四 问题 1 与测线方向垂直的平面和海底坡面的交线构成一条与水平面夹角为 α \alpha α的斜线&#xff08;如下图&#xff09;&#xff0c;称 α \alpha α为坡度。请建立多波束测深的覆盖宽度及…
阅读更多...
Python代码，强化学习，深度学习

Python代码，强化学习，深度学习

python代码编写&#xff0c;Python算法设计&#xff0c;强化学习优化&#xff0c;改进模型&#xff0c;训练模型&#xff0c;测试模型&#xff0c;可视化绘制&#xff0c;代编运行结果&#xff0c;交互多模型改进&#xff0c;预测模型&#xff0c;算法修改&#xff0c;Python包…
阅读更多...
Memcached集群管理：构建高可用性缓存系统

Memcached集群管理：构建高可用性缓存系统

Memcached集群管理&#xff1a;构建高可用性缓存系统 目录 引言Memcached简介高可用性缓存系统的需求Memcached集群架构 单点故障与负载均衡数据分片 构建Memcached集群 环境准备配置和部署 高可用性策略 服务器故障处理数据一致性 监控与维护 性能监控日常维护 总结 1. 引言…
阅读更多...
【Spring Boot 自定义配置项详解】

【Spring Boot 自定义配置项详解】

文章目录 一、配置文件1. properties配置1.1 创建配置文件1.2 添加配置项1.3 在应用中使用配置项1.4 多环境配置 2. YAML配置2.1 创建配置文件2.2 添加配置项2.3 在应用中使用配置项2.4 多环境配置 二、自定义配置类1. 创建配置类2. 使用配置类 一、配置文件 Spring Boot支持多…
阅读更多...
11.斑马纹列表 为没有文本的链接设置样式

11.斑马纹列表 为没有文本的链接设置样式

斑马纹列表 创建一个背景色交替的条纹列表。 使用 :nth-child(odd) 或 :nth-child(even) 伪类选择器,根据元素在一组兄弟元素中的位置,对匹配的元素应用不同的 background-color。 💡 提示：你可以用它对其他 HTML 元素应用不同的样式,如 <div>、<tr>、<p&g…
阅读更多...
利用PyTorch进行模型量化

利用PyTorch进行模型量化

利用PyTorch进行模型量化 目录 利用PyTorch进行模型量化 一、模型量化概述 1.为什么需要模型量化&#xff1f; 2.模型量化的挑战 二、使用PyTorch进行模型量化 1.PyTorch的量化优势 2.准备工作 3.选择要量化的模型 4.量化前的准备工作 三、PyTorch的量化工具包 1.介…
阅读更多...
linux的rm命令是删除到回收站吗?

linux的rm命令是删除到回收站吗?

不会删除到回收站&#xff0c;在 Linux 中&#xff0c;rm 命令用于直接删除文件或目录&#xff0c;而不是将其移至回收站。这与 Windows 系统的回收站机制有所不同。主要原因有以下几个方面&#xff1a; 设计哲学&#xff1a;Linux 设计哲学之一是尽可能简单直接地处理任务。rm…
阅读更多...
【小程序开发】TypeError: _this4.getOpenerEventChannel(...).emit is not a function 问题解决

【小程序开发】TypeError: _this4.getOpenerEventChannel(...).emit is not a function 问题解决

使用uni-appvue2开发微信小程序时遇到一个界面之前传参的问题。想实现的逻辑是界面返回并通知前一个界面刷新。代码如下&#xff1a; GroupManager.getInstance().addGroupRemote(this.createGroupModel(), () > {uni.hideLoading()uni.showToast({icon: "success&quo…
阅读更多...
openGauss学习笔记-312 openGauss 数据迁移-MySQL迁移-迁移MySQL数据库至openGauss-概述

openGauss学习笔记-312 openGauss 数据迁移-MySQL迁移-迁移MySQL数据库至openGauss-概述

文章目录 openGauss学习笔记-312 openGauss 数据迁移-MySQL迁移-迁移MySQL数据库至openGauss-概述312.1 工具部署架构图 openGauss学习笔记-312 openGauss 数据迁移-MySQL迁移-迁移MySQL数据库至openGauss-概述 312.1 工具部署架构图 当前openGauss支持对MySQL迁移服务&#x…
阅读更多...
live555搭建实时播放rtsp服务器

live555搭建实时播放rtsp服务器

live555关于RTSP协议交互流程 live555的核心数据结构值之闭环双向链表 live555 rtsp服务器实战之createNewStreamSource live555搭建实时播放rtsp服务器 live555 rtsp服务器实战之doGetNextFrame live555可以说是rtsp的专项库&#xff0c;既可以搭建rtsp服务器&#xff0c;…
阅读更多...
HTTP协议的演进：从HTTP/1.0到HTTP/2.0

HTTP协议的演进：从HTTP/1.0到HTTP/2.0

随着互联网技术的不断发展&#xff0c;HTTP协议作为Web通信的基础&#xff0c;也经历了从HTTP/1.0到HTTP/1.1再到HTTP/2.0的演进。本文将逐步深入探讨这两个版本的特点、不足以及改进&#xff0c;以帮助我们更好地理解HTTP协议的发展历程。 一、HTTP/1.0的特点与不足 HTTP/1.…
阅读更多...
【多任务YOLO】 A-YOLOM: You Only Look at Once for Real-Time and Generic Multi-Task

【多任务YOLO】 A-YOLOM: You Only Look at Once for Real-Time and Generic Multi-Task

You Only Look at Once for Real-Time and Generic Multi-Task 论文链接&#xff1a;http://arxiv.org/abs/2310.01641 代码链接&#xff1a;https://github.com/JiayuanWang-JW/YOLOv8-multi-task 一、摘要 高精度、轻量级和实时响应性是实现自动驾驶的三个基本要求。本研究…
阅读更多...
最新文章

Copyright @ 2022~2023