React集成Draft富文本

最新推荐文章于 2024-12-26 09:54:58 发布

木瞳

最新推荐文章于 2024-12-26 09:54:58 发布

阅读量328

点赞数 1

分类专栏：网站开发文章标签： react.js javascript 前端前端框架

本文链接：https://blog.youkuaiyun.com/qq_39663113/article/details/127726120

版权

网站开发专栏收录该内容

48 篇文章

订阅专栏

React集成Draft富文本

import React, {Component} from 'react';
import {Editor} from 'react-draft-wysiwyg';
import {ContentState, convertToRaw, EditorState} from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from "draftjs-to-html"
import htmlToDraft from 'html-to-draftjs';

// Draft 富文本编辑器
class Draft extends Component {
  constructor(props) {
    super(props);
    const html = this.props.value;
    let editorSta;
    if (html) {
      // 如果有值, 根据html格式字符串创建一个对应的编辑对象
      const contentBlock = htmlToDraft(html);
      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        editorSta = EditorState.createWithContent(contentState);
      } else {
        editorSta = EditorState.createEmpty();
      }
    }
    this.state = {
      editorState: editorSta,
      contentEdit: ''
    }
  }

  // draft 转 html
  transformDraftStateToHtml(editorState) {
    if (!editorState.getCurrentContent) {
      return '';
    }
    return draftToHtml(convertToRaw(editorState.getCurrentContent()));
  };


  editorStateChange(editorState) {
    this.setState({editorState: editorState})
    let transdata = this.transformDraftStateToHtml(editorState);
    this.props.onChange(transdata);
    this.setState({contentEdit: transdata});
  }

  contentStateChange(editorState) {

  }

  render() {
    return (
      <Editor editorState={this.state.editorState} onEditorStateChange={this.editorStateChange.bind(this)}
              onContentStateChange={this.contentStateChange.bind(this)}/>
    )
  }
}

export default Draft