react-draft-wysiwyg API

秋色暮光2024-07-20 20:14

目录

[一、class / style(样式)](#一、class / style(样式))

二、state(编辑器状态)

三、toolbar(工具栏)

四、localization(语言翻译)

[五、mention / hashtag(提及)](#五、mention / hashtag(提及))

mention

hashtag

六、callbacks(回调)

[toolbar 配置](#toolbar 配置)

一、class / style(样式)

  1. wrapperClassName: 工具栏 + 编辑区 className
  2. editorClassName: 编辑区 className
  3. toolbarClassName: 工具栏 className
  4. wrapperStyle: 工具栏 + 编辑区 style
  5. editorStyle: 编辑区 style
  6. toolbarStyle: 工具栏 style
TypeScript 复制代码 
<Editor
  toolbarClassName="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类型)
TypeScript 复制代码 
<Editor
  defaultEditorState={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: 自定义工具栏按钮(详解看补充)
TypeScript 复制代码 
<Editor
  toolbarOnFocus={true/false}
  toolbarHidden={true/false}
  toolbar={toolbar}
  toolbarCustomButtons={toolbarCustomButtons}
/>

补充：

TypeScript 复制代码 
toolbar属性： 
	options: 它是工具栏和每个菜单选项中可用选项的数组。只有在此属性中指定的选项才会按指定的顺序添加到toolbar中。默认情况下，所有选项都存在。在fontSize的情况下，可以使用选项来添加更多的字体大小
	classname: 这个属性可以用来为工具栏中的按钮、下拉菜单和弹出菜单添加classname
	inDropdown: 此属性可用于对下拉菜单中的选项进行分组
	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，应该只返回url
	image:urlEnabled: 这个属性可以用来配置是否启用指定图像源URL的选项。默认值为true
	image:uploadEnabled: 该属性可用于配置是否应该启用上传图像计算机的选项。默认值为true
	image:uploadCallback: 这是图像上传回调。它应该返回一个promise, resolve的值为图像src。默认值为true。上面的uploadEnabled和uploadCallback选项都应该存在，以便启用上传功能。Promise应该返回一个对象{data: {link: <THE_URL>}}
	image: 该属性可用于在图像弹出框中上传后配置图像预览，默认为false
	image:alignmentEnabled: 该属性可用于配置是否启用图像对齐。对齐选项有LEFT、RIGHT和CENTER。默认值为true
	image:inputAccept: 该属性可用于配置哪些文件类型应该允许上传，通过文件输入进行图像上传
	image:alt: 该属性可用于启用图像的alt字段，也可将其设置为必填项
	image:defaultSize: 此属性可用于在编辑器中传递图像的默认 大小(高度和宽度)。默认值为'auto'

覆盖默认toolbar
组件 props 接收值：
	config: 工具栏属性
	translations: 工具栏所有属性的 列表(我也不知道啥用)
	onChange: 当选择的值发生变化时的回调函数
	expanded: 如果该选项是下拉式或弹出式的，则可以使用此值将其设置为打开/隐藏状态
	onExpandEvent: 如果该选项是下拉式或弹出式的，可以使用该方法去设置 expanded 值
	doExpand: 设置 expanded 为 true
	doCollapse: 设置 expanded 为 false
	currentState: 选择 option 的值

新增自定义toolbar
组件 props 接受值
	onChange: 当选择的值发生变化时的回调函数
	editorState: 当前编辑器的 值(类型为EditorState)
	translations: 工具栏所有属性的列表
	modalHandler: 如果自定义选项有下拉框或弹出框。这可以用来控制它们的打开和关闭。使用这个属性将确保当鼠标在页面的任何地方单击时，所有弹出窗口都关闭

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

toolbarCustomButtons 新增自定义 toolbar

TypeScript 复制代码 
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 = () => (
  <Editor
    toolbarCustomButtons={[<CustomOption />]}
  />
);

四、localization(语言翻译)

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

五、mention / hashtag(提及)

mention

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

hashtag

  1. separator: 分隔符
  2. trigger: 触发符
TypeScript 复制代码 
<Editor
  mention={{
    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 回调
TypeScript 复制代码 
<Editor
  onFocus={(event) => {}}
  onBlur={(event, editorState) => {}}
  onTab={(event) => {}}
/>

toolbar 配置

TypeScript 复制代码 
{
  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 },
  },
}
相关推荐
让开，我要吃人了几秒前
HarmonyOS开发实战（ Beta5.0）Native Drawing自绘制能力替代Canvas提升性能
前端·华为·性能优化·数据分析·移动开发·harmonyos·鸿蒙
Mr_Xuhhh4 分钟前
C语言深度剖析--不定期更新的第二弹
android·java·c语言·开发语言·数据结构·算法·排序算法
程序员与背包客_CoderZ11 分钟前
C++设计模式——Command命令模式
c语言·开发语言·c++·设计模式·命令模式
月临水12 分钟前
JavaEE:多线程进阶(CAS)
java·开发语言·java-ee
caperxi18 分钟前
vue 踩坑记录
前端·javascript·vue.js
旺旺碎冰冰、21 分钟前
Java之类和对象
java·开发语言
ForRunner12323 分钟前
如何使用 Ruby 中的 Selenium 解决 CAPTCHA
开发语言·selenium·ruby
2301_7969821425 分钟前
location.protocol+‘//‘+location.hostname实现什么功能？
java·前端·javascript·python
工程师老罗26 分钟前
Java笔试面试题AI答之JDBC（1）
java·开发语言
陈在天box27 分钟前
《Python 面试热门问题五》
开发语言·python
热门推荐
012024 高教社杯 数学建模国赛 （A题）深度剖析|“板凳龙” 闹元宵|数学建模完整代码+建模过程全解全析02RAG 实践- Ollama+RagFlow 部署本地知识库03Coze扣子平台完整体验和实践（附国内和国际版对比）042024年高教社杯数学建模国赛赛题浅析——助攻快速选题05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）072024年高教杯国赛（C题）数学建模竞赛解题思路|完整代码论文集合08Codeforces 969 div2[A~E] 个人题解09解决Pycharm下载torch报错：OSError: [WinError 126] 找不到指定的模块。10【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文