前端知识 | 富文本编辑器 React-draft-wysiwyg

Posted 2021-04-27 SEATELL海说软件

-海说软件接受各种技术咨询及开发业务-

富文本编辑器:

富文本编辑器是一种可内嵌于浏览器的文本编辑器，富文本编辑器又不同于普通文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。

React-draft-wysiwyg 的简单使用:

这是一个基于 ReactJS 和 DraftJS 的一种富文本组件，想使用首先我们需要安装依赖，我们可以使用 nodejs 中的 npm 或者 yarn 来安装：

 

1.    npm install -Sreact-draft-wysiwyg

2.    yarn addreact-draft-wysiwyg

 

接下来你还需安装的包和对应版本：

 

1.    draft-js:0.10.x

2.    immutable:3.x, 4.x

 

最后我们就可以来简单的使用这个组件

 

import React, {Component } from 'react';

import { Editor } from'react-draft-wysiwyg';

import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

 

const EditorComponent= () => <Editor />

React-draft-wysiwyg 的样式设计：

默认情况下编辑器将使用 DraftJS 编辑器，因为它没有任何样式，它将占用100%宽度的容器。可以通过组件自带的类或样式对象来改变富文本编辑器的样式。

 

1.wrapperClassName：类应用于编辑器和工具栏上

2.editorClassName： 类应用于编辑器的周围

3.toolbarClassName： 类应用于工具栏中的

4.wrapperStyle：样式对象在编辑器和工具栏上应用

5.editorStyle： 样式对象在编辑器中应用

6.toolbarStyle： 样式对象在工具栏上应用

React-draft-wysiwyg 中的 state：

编辑器可以实现为受控组件，可实现非受控构件的自动生成。

1.defaultEditorState：属性在创建编辑器状态时初始化一次，可用来改变EditorState。

2.EditorState：以受控方式更新编辑器状态的属性。

3.onEditorStateChange：每当编辑器的状态发生变化时都会调用函数，可用来改变 EditorState。

4.defaultContentState：属性在创建编辑器状态时初始化一次。

5.contentState：以受控方式更新编辑器状态的属性。

6.onChange：每当编辑器的状态发生变化时都调用函数。

7.onContentStateChange：每当编辑器文本框内容的状态发生变化时都会调用函数，可用来改变 contentState。

代码示例：

class ControlledEditor extends Component {

  constructor(props) {

    super(props);

    this.state = {

      editorState:EditorState.createEmpty(), //用来清空编辑器中的内容

    };

  }

 

  onEditorStateChange:Function = (editorState) => {

    this.setState({

      editorState,

    });

  };

 

  render() {

    const { editorState} = this.state;

    return (

      <Editor

       editorState={editorState}

        editorClassName="editor-class"

toolbarStyle="tool-style"       

onEditorStateChange={this.onEditorStateChange}//每次改变编辑器中的内容时都调用这个函数来把参数传入 editorState

      />

    )

  }

}

获取 React-draft-wysiwyg 文本框中的值：

我们可以从上面介绍的 contentState 中获取到文本框的内容，下面我们来看下获取到的 json 值的格式：

{"entityMap":{},"blocks":[{"key":"637gr","text":"Initializedfromontentstate.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]};

内容主要是存在了 blocks 中其中的 text 就是你在文本框输入的内容，后面的 type 传的是你是否改变了原文本格式，如有改变后面会给出文本框样式的改变。接下来就可以简单的来使用富文本编辑器 react-draft-wysiwyg。

React-draft-wysiwyg在网站中的应用：

实际应用 React-draft-wysiwyg 的过程中，我们不仅需要获取 React-draft-wysiwyg 中的值，我们还需要把这个值上传到服务器，而它本身是 json 格式的值，我们需要序列化之后再上传到服务器，这样可以方便以后从服务器接收数据。

序列化代码如下：

JSON.stringify(contentState)

其中 contentState 就是在上文中提到的文本输入框的状态。

从服务器中接收到数据后，我们需要再把数据反序列化在把数据转化回来，在显示到文本框中。

反序列化代码如下：

this.setState({

contentState：JSON.parse(服务器数据)

 })

先把服务器数据反序列化之后，再把数据从新传回 contentState，这样从服务器返回的数据就被加载到文本框中了。

海说软件会持续推出前端教学课程、技术干货。

往期课程：

-END-