RichText 富文本编辑器
富文本编辑器。
何时使用
当用户需要富文本编辑输入时。
代码演示
基本使用
基本使用。
import React from 'react';
import ReactDOM from 'react-dom';
import { RichText, Switch } from 'choerodon-ui/pro';
const style = { height: 200 };
class App extends React.Component {
state = { readOnly: true };
handleChange = (value) => {
this.setState({ readOnly: value });
};
render() {
const { readOnly } = this.state;
return (
<>
<RichText readOnly={readOnly} style={style} defaultValue={[{"insert":"readOnly"}]} />
<Switch style={{ paddingTop: 10 }} onChange={this.handleChange} checked={readOnly}>readOnly</Switch>
</>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
简单的格式化工具栏
简单的格式化工具栏,数组写法工具栏在 RichText 组件内,外层包裹需考虑工具栏高度。
import React from 'react';
import ReactDOM from 'react-dom';
import { RichText, Switch } from 'choerodon-ui/pro';
const style = { height: 200 };
const options = {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
],
imageDropAndPaste: false,
},
};
class App extends React.Component {
state = { mode: 'editor' };
handlePreviewChange = (value) => {
console.log(value);
this.setState({ mode: value ? 'preview' : 'editor' });
};
受控
受控
import React from 'react';
import ReactDOM from 'react-dom';
import { RichText } from 'choerodon-ui/pro';
const style = { height: 200 };
class App extends React.Component {
state = {
value: [{insert: "Controlled Value"}],
// string 类型值会被转为 Delta 对象
// value: "Controlled Value",
};
handleChange = (value, oldValue) => {
console.log('handleChange', value, oldValue)
this.setState({ value });
};
render() {
return <RichText value={this.state.value} style={style} onChange={this.handleChange} />;
}
}
ReactDOM.render(<App />, document.getElementById('container'));
绑定数据源
绑定数据源
import React from 'react';
import ReactDOM from 'react-dom';
import { RichText, DataSet, Button } from 'choerodon-ui/pro';
const style = { height: 200 };
const defaultValue = [{ 'insert': 'defaultValue' }];
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{ name: 'content', type: 'object', defaultValue, required: true },
],
});
toData = () => {
console.log('toData', this.ds.toData());
};
toJSONData = () => {
console.log('toJSONData', this.ds.toJSONData());
};
getRecord = () => {
console.log('getRecord toData', this.ds.current.get('content'));
};
setRecord = () => {
this.ds.current.set('content', [{ 'insert': 'set value' }]);
// set string 类型值会被转为 Delta 对象,并出现 type 类型转换 warning
// this.ds.current.set('content',"set string value");
};
handleChange = (value, oldValue) => {
console.log('handleChange', value, oldValue);
};
render() {
return <>
自定义工具栏
自定义工具栏。
import React from 'react';
import ReactDOM from 'react-dom';
import { RichText, DataSet, Modal } from 'choerodon-ui/pro';
import { Icon } from 'choerodon-ui';
import { observer } from 'mobx-react';
const defaultValue = [{ insert: 'defaultValue' }];
const style = { height: 200 };
const modalKey = Modal.key();
const { RichTextViewer } = RichText;
@observer
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [{ name: 'content', type: 'object', defaultValue, required: true }],
});
handleFullScreenClick = () => {
console.log('handleFullScreenClick');
Modal.open({
key: modalKey,
title: 'Full screen',
children: (
<RichText
toolbar={this.renderCustomToolbar}
dataSet={this.ds}
name="content"
style={{ height: 600 }}
/>
),
fullScreen: true,
});
};
renderCustomToolbar = ({ id, dataSet }) => {
console.log('id', id, 'dataSet', dataSet);
return (
<div id={id}>
<button type="button" className="ql-bold" />
<button type="button" className="ql-italic" />
<button type="button" className="ql-underline" />
<button type="button" className="ql-strike" />
<button type="button" className="ql-blockquote" />
<button type="button" className="ql-list" value="ordered" />
<button type="button" className="ql-list" value="bullet" />
<button type="button" className="ql-image" />
<button type="button" className="ql-link" />
<select className="ql-color" />
<button
API
RichText
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
options | 编辑器配置,详见Quill Options | object | |
mode | 编辑器模式,可选值 editor preview | string | editor |
toolbar | 工具栏,可选值为钩子或者内置类型:normal none | string | ({ dataSet, id }) => ReactNode |
更多属性请参考 FormField。
RichText.RichTextViewer
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
deltaOps | 编辑器渲染值 | Delta.ops |
toolbar
自定义工具栏文档 Custom Toolbar
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .