react-draft-wysiwyg API

吴旭华  论坛元老 | 2024-7-24 08:10:06 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1778|帖子 1778|积分 5334

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
目录
一、class / style(样式)
二、state(编辑器状态)
三、toolbar(工具栏)
四、localization(语言翻译)
五、mention / hashtag(提及)
mention
hashtag
六、callbacks(回调)
toolbar 配置


一、class / style(样式)


  • wrapperClassName: 工具栏 + 编辑区 className
  • editorClassName: 编辑区 className
  • toolbarClassName: 工具栏 className
  • wrapperStyle: 工具栏 + 编辑区 style
  • editorStyle: 编辑区 style
  • toolbarStyle: 工具栏 style
  1. <Editor
  2.   toolbarClassName="toolbarClassName"
  3.   wrapperClassName="wrapperClassName"
  4.   editorClassName="editorClassName"
  5.   wrapperStyle="wrapperStyle"
  6.   editorStyle="editorStyle"
  7.   toolbarStyle="toolbarStyle"
  8. />
复制代码
二、state(编辑器状态)


  • defaultEditorState: 初始化默认值(EditorState类型)
  • editorState: 编辑器值
  • onEditorStateChange: 编辑器值改变时调用(EditorState类型)
  • defaultContentState: 初始化默认值(RawDraftContentState类型)
  • contentState: 编辑器值
  • onChange: 编辑器值改变时调用(RawDraftContentState类型)
  • onContentStateChange编辑器值改变时调用(RawDraftContentState类型)
  1. <Editor
  2.   defaultEditorState={defaultEditorState}
  3.   editorState={editorState}
  4.   onEditorStateChange={onEditorStateChange}
  5.   defaultContentState={defaultContentState}
  6.   contentState={contentState}
  7.   onChange={onChange}
  8.   onContentStateChange={onContentStateChange}
  9. />
复制代码
三、toolbar(工具栏)


  • toolbarOnFocus: 是否在focus时才表现toolbar
  • toolbarHidden: 是否表现toolbar
  • toolbar: 工具栏配置(详解看补充)
  • toolbarCustomButtons: 自定义工具栏按钮(详解看补充)
  1. <Editor
  2.   toolbarOnFocus={true/false}
  3.   toolbarHidden={true/false}
  4.   toolbar={toolbar}
  5.   toolbarCustomButtons={toolbarCustomButtons}
  6. />
复制代码
补充：
  1. toolbar属性：
  2.         options: 它是工具栏和每个菜单选项中可用选项的数组。只有在此属性中指定的选项才会按指定的顺序添加到toolbar中。默认情况下，所有选项都存在。在fontSize的情况下，可以使用选项来添加更多的字体大小
  3.         classname: 这个属性可以用来为工具栏中的按钮、下拉菜单和弹出菜单添加classname
  4.         inDropdown: 此属性可用于对下拉菜单中的选项进行分组
  5.         component: 此属性可用于配置自定义react组件，使其用于工具栏选项，而不是预构建的组件
  6.         icon: 可用于指定工具栏按钮的图标
  7.         colorPicker:colors: 这是要在color-picker中显示的颜色数组。Value应为rgb值
  8.         link:showOpenOptionOnHover: 如果是这样，一个小箭头图标显示在鼠标悬停的链接上。单击此图标将在新选项卡中打开链接。默认值为true。Value应为rgb值
  9.         link:defaultTargetOption: 此属性在编辑器中设置链接的目标。默认值是'_self'
  10.         link:linkCallback: 这是处理用户添加的链接的回调。默认使用linkify库，用于此目的。回调函数传入了一个对象，该对象包含以下细节{title: <text>，target: <link>，targetOption: <_blank|_self|_parent|_top>}。它期望返回一个类似的对象与新的细节，将保存在链接中
  11.         emoji:emojis: 该属性是 emoji(unicode) 的数组。它们显示在emoji选项中
  12.         embedded:defaultSize: 此属性可用于在编辑器中传递嵌入式链接的默认 大小(高度和宽度)。默认值为'auto'
  13.         embedded:embedCallBack: 这个回调函数在用户添加要嵌入的url后被调用，它可以用于对url进行任何所需的修改。回调函数传入一个url，应该只返回url
  14.         image:urlEnabled: 这个属性可以用来配置是否启用指定图像源URL的选项。默认值为true
  15.         image:uploadEnabled: 该属性可用于配置是否应该启用上传图像计算机的选项。默认值为true
  16.         image:uploadCallback: 这是图像上传回调。它应该返回一个promise, resolve的值为图像src。默认值为true。上面的uploadEnabled和uploadCallback选项都应该存在，以便启用上传功能。Promise应该返回一个对象{data: {link: <THE_URL>}}
  17.         image: 该属性可用于在图像弹出框中上传后配置图像预览，默认为false
  18.         image:alignmentEnabled: 该属性可用于配置是否启用图像对齐。对齐选项有LEFT、RIGHT和CENTER。默认值为true
  19.         image:inputAccept: 该属性可用于配置哪些文件类型应该允许上传，通过文件输入进行图像上传
  20.         image:alt: 该属性可用于启用图像的alt字段，也可将其设置为必填项
  21.         image:defaultSize: 此属性可用于在编辑器中传递图像的默认 大小(高度和宽度)。默认值为'auto'
  23. 覆盖默认toolbar
  24. 组件 props 接收值：
  25.         config: 工具栏属性
  26.         translations: 工具栏所有属性的 列表(我也不知道啥用)
  27.         onChange: 当选择的值发生变化时的回调函数
  28.         expanded: 如果该选项是下拉式或弹出式的，则可以使用此值将其设置为打开/隐藏状态
  29.         onExpandEvent: 如果该选项是下拉式或弹出式的，可以使用该方法去设置 expanded 值
  30.         doExpand: 设置 expanded 为 true
  31.         doCollapse: 设置 expanded 为 false
  32.         currentState: 选择 option 的值
  34. 新增自定义toolbar
  35. 组件 props 接受值
  36.         onChange: 当选择的值发生变化时的回调函数
  37.         editorState: 当前编辑器的 值(类型为EditorState)
  38.         translations: 工具栏所有属性的列表
  39.         modalHandler: 如果自定义选项有下拉框或弹出框。这可以用来控制它们的打开和关闭。使用这个属性将确保当鼠标在页面的任何地方单击时，所有弹出窗口都关闭
复制代码
toolbar 支持两种模式，一种是通过官方属性进行配置 toolbar，另一种是直接覆盖官方 toolbar 组件。( 具体toolbar见文末 )
toolbarCustomButtons 新增自定义 toolbar 
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { EditorState, Modifier } from 'draft-js';
  4. import { Editor } from 'react-draft-wysiwyg';
  7. class CustomOption extends Component {
  8.   static propTypes = {
  9.     onChange: PropTypes.func,
  10.     editorState: PropTypes.object,
  11.   };
  13.   addStar: Function = (): void => {
  14.     const { editorState, onChange } = this.props;
  15.     const contentState = Modifier.replaceText(
  16.       editorState.getCurrentContent(),
  17.       editorState.getSelection(),
  18.       '⭐',
  19.       editorState.getCurrentInlineStyle(),
  20.     );
  21.     onChange(EditorState.push(editorState, contentState, 'insert-characters'));
  22.   };
  24.   render() {
  25.     return (
  26.       <div onClick={this.addStar}>⭐</div>
  27.     );
  28.   }
  29. }
  31. const EditorCustomToolbarOption = () => (
  32.   <Editor
  33.     toolbarCustomButtons={[<CustomOption />]}
  34.   />
  35. );
复制代码
四、localization(语言翻译)


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

mention


  • separator: 分割符
  • trigger: 触发符
  • suggestions: 建议

    • text: 选择表现的值
    • value: 编辑器表现的值
    • url: href 链接，假如不存在则使用 value 更换

hashtag


  • separator: 分隔符
  • trigger: 触发符
  1. <Editor
  2.   mention={{
  3.     separator: ' ',
  4.     trigger: '@',
  5.     suggestions: [
  6.       { text: 'APPLE', value: 'apple', url: 'apple' },
  7.       { text: 'BANANA', value: 'banana', url: 'banana' },
  8.       { text: 'CHERRY', value: 'cherry', url: 'cherry' },
  9.       { text: 'DURIAN', value: 'durian', url: 'durian' },
  10.       { text: 'EGGFRUIT', value: 'eggfruit', url: 'eggfruit' },
  11.       { text: 'FIG', value: 'fig', url: 'fig' },
  12.       { text: 'GRAPEFRUIT', value: 'grapefruit', url: 'grapefruit' },
  13.       { text: 'HONEYDEW', value: 'honeydew', url: 'honeydew' },
  14.     ],
  15.   }}
  16.   hashtag={{
  17.     separator: ' ',
  18.     trigger: '#',
  19.   }}
  20. />
复制代码
六、callbacks(回调)


  • onFocus: 编辑器聚焦
  • onBlur: 编辑器失焦
  • onTab: 键盘 tab 回调
  1. <Editor
  2.   onFocus={(event) => {}}
  3.   onBlur={(event, editorState) => {}}
  4.   onTab={(event) => {}}
  5. />
复制代码
toolbar 配置

[code]{
  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: [
      '
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

吴旭华

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表