/**
* 参数说明：
* content： string 编辑器内容
* tips: 验证表单提示
* width: 表单项标题的宽度
* height: 框高度
* articleFlag: 用于数据回填时的标志 父组件在初始化获取到文本内容要传给编辑器作为初始内容时 置为true 当编辑器内容改变 父组件要接收新内容时 在getContent函数里置为false
* getContent(content, tips)： 接收数据用的函数
*/
import React from 'react';
import bind from 'react-autobind';
import 'braft-editor/dist/index.css';
import BraftEditor from 'braft-editor';
import { ContentUtils } from 'braft-utils';
import { ImageUtils } from 'braft-finder';
import { upload } from 'services/fileManage';
import { Upload, Icon } from 'antd';
import cns from 'classnames';
import style from './editor.scss';
export default class UploadDemo extends React.Component {
constructor(p){
super(p);
this.state = {
editorState: {},
content: '',
tips: false
};
bind(this);
}
static getDerivedStateFromProps(nextProps, prevState) {
if (!nextProps.articleFlag && nextProps.tips === prevState.tips) {
return false;
}
if(nextProps.articleFlag){
return {
content: nextProps.content,
editorState: BraftEditor.createEditorState(nextProps.content), // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
tips: nextProps.tips
};
}
if(nextProps.tips !== prevState.tips && !nextProps.content){
return{
tips: nextProps.tips
};
}
}
handleChange(v){
let content = v.toHTML(); //调用editorState.toHTML()来获取HTML格式的内容
console.log('v', v, 'content', content);
this.setState({
editorState: v,
content,
tips: v.isEmpty() ? true : false
}, () => {
this.props.getContent(this.state.content, this.state.tips);}
);
}
uploadHandler = (param) => {
if (!param.file) {
return false;
}
let url = '';
upload(param).then(
res => {
if(res.success){
url = res.data.url;
this.setState({
editorState: ContentUtils.insertMedias(this.state.editorState, [{
type: 'IMAGE',
url: `https://ynszgxzcyy.bbdservice.com/api/v1.0/file/download?p=${url}`
}])
});
}
}
);
}
render () {
const controls = ['undo', 'redo', 'separator', 'font-family', 'font-size', 'headings', 'separator',
'text-color', 'bold', 'italic', 'underline', 'separator',
'superscript', 'subscript', 'remove-styles', 'separator',
'text-indent', 'text-align', 'separator',
'list-ul', 'list-ol', 'separator'
];
const extendControls = [
{
key: 'antd-uploader',
type: 'component',
component: (
<Upload
accept="image/*"
showUploadList={false}
customRequest={this.uploadHandler}
>
{/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
<button type="button" className="control-item button upload-button" data-title="插入图片">
<Icon type="picture" theme="filled" />
</button>
</Upload>
)
}
];
return (
<div className={cns(style.formItem, 'formItem')}>
<label className={style.labelRequired} style={{width: this.props.width}}>{this.props.title}：</label>
<div className={style.myEditor + ` ${this.props.boxWidth}`} >
<BraftEditor
value={this.state.editorState}
onChange={this.handleChange}
controls={controls}
extendControls={extendControls}
readOnly={!this.props.verified}
contentStyle={{height: this.props.height}}
/>
</div>
<p className={style.tips} style={{marginLeft: this.props.width}}>{this.state.tips ? '请输入正文内容' : ''}</p>
</div>
);
}
}
`
image.png
在父组件中使用
<Editor
getContent={this.getRichConditions}
verified={!disabled}
title={'申报条件'}
content={richConditions} // string 编辑器内容
tips={this.state.conditionTips}
articleFlag={this.state.richFlag} // 是否回填内容
width={100}
height={293}
boxWidth={'boxWidth'}
/>
// 富文本框
getRichConditions=(aa, bb)=>{
// 申报条件
this.setState({
richConditions: aa,
conditionTips: bb, // 正文错误提示 bool
richFlag: false
});
}
样式editor.scss
.formItem{
margin-top: 20px;
label {
display: inline-block;
vertical-align: top;
width: 155px;
text-align: right;
padding-right: 6px;
// margin-right: 50px;
color: #333;
font-size: 14px;
}
.labelRequired::before{
display: inline-block;
margin-right: 4px;
content: '*';
font-family: SimSun;
line-height: 1;
font-size: 14px;
color: #f5222d;
}
.tips{
// margin-left: 155px;
color: #f5222d;
font-size: 14px;
}
.myEditor{
display: inline-block;;
width: calc(100% - 155px);
border: 1px solid #D9D9D9;
border-radius: 4px;
font-size: 14px;
overflow: hidden;
}
}
:global{
.formItem{
.component-wrapper {
height: 40px;
line-height: 40px;
}
.bf-container .public-DraftEditorPlaceholder-root{
font-size: 14px;
}
.bf-content{
font-size: 14px;
overflow-Y: 'scroll';
}
.bf-container .public-DraftEditor-content, .bf-container .DraftEditor-editorContainer{
margin-bottom: 20px;
}
}
.boxWidth{
width:803px!important;
}
}
image.png
最简单的使用：https://braft.margox.cn/demos/basic
官方文档：https://braft.margox.cn/demos/basic
配置文档：https://www.yuque.com/braft-editor/be/gz44tn
网友评论