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

braft官網：https://braft.margox.cn/

在項目中引用：

# 使用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;