react-draft-wysiwyg API - IT评测·应用市场-qidao123.com技术社区

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

复制代码

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

复制代码

<Editor
toolbarOnFocus={true/false}
toolbarHidden={true/false}
toolbar={toolbar}
toolbarCustomButtons={toolbarCustomButtons}
/>

复制代码

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: 如果自定义选项有下拉框或弹出框。这可以用来控制它们的打开和关闭。使用这个属性将确保当鼠标在页面的任何地方单击时，所有弹出窗口都关闭

复制代码

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 />]}
/>
);

复制代码

<Editor
localization={{
locale: 'zh',
}}
/>

复制代码

<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: '#',
}}
/>

复制代码

<Editor
onFocus={(event) => {}}
onBlur={(event, editorState) => {}}
onTab={(event) => {}}
/>

复制代码