当前位置：首页 > news >正文

react-draft-wysiwyg API

news 来源：原创 2024/9/20 12:31:22

一、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

<EditortoolbarClassName="toolbarClassName"wrapperClassName="wrapperClassName"editorClassName="editorClassName"wrapperStyle="wrapperStyle"editorStyle="editorStyle"toolbarStyle="toolbarStyle"
/>

二、state(编辑器状态)

defaultEditorState: 初始化默认值(EditorState类型)
editorState: 编辑器值
onEditorStateChange: 编辑器值改变时调用(EditorState类型)
defaultContentState: 初始化默认值(RawDraftContentState类型)
contentState: 编辑器值
onChange: 编辑器值改变时调用(RawDraftContentState类型)
onContentStateChange编辑器值改变时调用(RawDraftContentState类型)

<EditordefaultEditorState={defaultEditorState}editorState={editorState}onEditorStateChange={onEditorStateChange}defaultContentState={defaultContentState}contentState={contentState}onChange={onChange}onContentStateChange={onContentStateChange}
/>

三、toolbar(工具栏)

toolbarOnFocus: 是否在focus时才显示toolbar
toolbarHidden: 是否显示toolbar
toolbar: 工具栏配置(详解看补充)
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(语言翻译)

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

<Editorlocalization={{locale: 'zh',}}
/>

五、mention / hashtag(提及)

mention

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

hashtag

separator: 分隔符
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(回调)

onFocus: 编辑器聚焦
onBlur: 编辑器失焦
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 },},
}