React 富文本编辑 braft-editor

推荐一种react-富文本编辑器，braft-editor

braft-editor的github：https://github.com/margox/braft-editor

braft-editor的文档：https://www.yuque.com/braft-editor/be/lzwpnr

在项目中引用：

# 使用npm安装

npm install braft-editor --save

# 使用yarn安装

yarn add braft-editor

添加引用，然后直接添加组件

import BraftEditor from 'braft-editor';

import 'braft-editor/dist/index.css';

  <span className="form-richText-box">
    <BraftEditor
      value={editorValue}
      placeholder={placeholder}></BraftEditor>
  </span>

value值、placeholder水印等文本属性都是通用的。

详细的属性，见 文档属性列表

文本的更新

组件渲染时，将html数据转换为富文本支持的对象数据。

var editorValue = BraftEditor.createEditorState(value);

数据变更保存时，将富文本的对象数据转换为Html数据。

const htmlContent = editorValue.toHTML();

import React, { Component } from 'react';
import './style.less';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

interface PropsData {
  label: string;
  placeholder: string;
  value?: string;
  inputValueChanged: (value: any) => void;
}
interface StateData {}

class InputRichTextControl extends Component<PropsData, StateData> {
  constructor(props) {
    super(props);
    this.state = {
      isInputError: false,
    };
  }
  handleEditorChange = (editorValue) => {
    const htmlContent = editorValue.toHTML();
    this.props.inputValueChanged(htmlContent);
  };
  render() {
    const { label, placeholder, value } = this.props;
    var editorValue = BraftEditor.createEditorState(value);
    return (
      <div id="form-richText-group">
        <div className="input-lable">{label}</div>
        <BraftEditor
              className="form-richText-large"
              value={editorValue}
              onChange={this.handleEditorChange}
              placeholder={placeholder}></BraftEditor>
      </div>
    );
  }
}

富文本编辑器的控件列表显示调整

比如隐藏多媒体和全屏按钮，怎么操作？

直接定义controls并替换

import React, { Component } from 'react';
import './style.less';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

interface PropsData {
  label: string;
  placeholder: string;
  value?: string;
  inputValueChanged: (value: any) => void;
}
interface StateData {}

class InputRichTextControl extends Component<PropsData, StateData> {
  constructor(props) {
    super(props);
    this.state = { };
  }
  render() {
    const { label, placeholder, value } = this.props;
    var editorValue = BraftEditor.createEditorState(value);

    const controls:any[] == [
        'undo', 'redo', 'separator',
        'font-size', 'line-height', 'letter-spacing', 'separator',
        'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
        'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',
        'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
        'link', 'separator', 'hr', 'separator',
        // 'media', 'fullscreen',
        'separator','clear'
    ]
    return (
      <div id="form-richText-group">
        <div className="input-lable">{label}</div>
        <BraftEditor
              className="form-richText-large"
              value={editorValue}
              placeholder={placeholder}
              controls={controls}></BraftEditor>
      </div>
    );
  }
}
export default InputRichTextControl;

如上已经把多媒体禁用，所以是无法粘贴图片的

另，关于控件列表，支持原有控件类型BuiltInControlType（不修改标题和内容，只控制隐藏显示）、ControlType对象（可以修改标题和内容）、ExtendControlType

它有三个列表属性可以设置：

• controls
• excludeControls
• extendControls

所以要隐藏控件，还可以使用excludeControls来排除控件。

修改如下：

import React, { Component } from 'react';
import './style.less';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

interface PropsData {
  label: string;
  placeholder: string;
  value?: string;
  inputValueChanged: (value: any) => void;
}
interface StateData {}

class InputRichTextControl extends Component<PropsData, StateData> {
  constructor(props) {
    super(props);
    this.state = { };
  }
  render() {
    const { label, placeholder, value } = this.props;
    var editorValue = BraftEditor.createEditorState(value);

    const excludeControls: any[] = [24       'fullscreen',
    ];
    return (
      <div id="form-richText-group">
        <div className="input-lable">{label}</div>
        <BraftEditor
              className="form-richText-large"
              value={editorValue}
              placeholder={placeholder}
              excludeControls={excludeControls}></BraftEditor>
      </div>
    );
  }
}
export default InputRichTextControl;