基於 React-draft-wysiwyg 實現的 react 富文本編輯器組件 開箱即用

工作中遇到了一個需要做圖文詳情 的富文本編輯的需求，

於是基於 React-draft-wysiwyg 實現了一個 純組件，

目前支持 常規文本輸入 外部鏈接圖片 以及本地上傳圖片，

由於是純組件， 可直接放在react 項目中引入使用

具體項目中使用十分方便， 一行代碼搞定,

<EditorVan editorState={this.state.editorState} transformHTML={(editorState) => this.setState({ editorState })} />

　　上面代碼中的 props.editorState 為對當前富文本編輯組件傳入的值, 類型為字符串， 傳入后 EditorVan 會自行對字符串進行解析，最終顯示為 html 格式， 

　　props.transformHTML 是一個方法， 用戶在進行富文本編輯時， 實時對父組件 進行更新， 返回的html格式字符， 可以直接傳至后台， 不需要在父組件中額外處理, 如果需要在這個方法中執行其他操作， 例如進行form 表單校驗等操作， 可以寫在 setState回調函數中， 或者用一個父組件方法代替

 

　

以下是組件全部代碼

使用前， 請確保各個包都有安裝好：

 

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

//  這里的 UploadBase64 是我的圖片上傳接口
import { UploadBase64 } from '@/services/common_services';
// 這里的 IMG_URL 圖片的 Host， 因為上面的接口上傳成功返回的是一個相對路徑 頁面展示時需要自行拼接 Host。 這兩處， 大家可根據實際情況自行修改
import { IMG_URL } from '@/utils';

const transformDraftStateToHtml = (editorState) => {
  if (!editorState.getCurrentContent) {
    return '';
  }
  return draftToHtml(convertToRaw(editorState.getCurrentContent()));
};

const transformHtmlToDraftState = (html = '') => {
  const blocksFromHtml = htmlToDraft(html);
  const { contentBlocks, entityMap } = blocksFromHtml;
  const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
  return EditorState.createWithContent(contentState);
}

class EditorVan extends Component {

  state = {
    editorState: ''
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    })
    this.props.transformHTML( transformDraftStateToHtml(editorState) )
  };

  componentDidMount() {
    this.setState({
      editorState: transformHtmlToDraftState(this.props.editorState)
    })
  };

  uploadImageCallBack = (file) => {
    return new Promise((resolve, reject) => {
      (async() => {
        const base64 = await getBase64(file);
        const data = {
            base64: base64.split(',')[1],
            fileName: file.name,
            fileCode: 'material',
        }
        const res = await UploadBase64(data);
        if(res && res.data) {
          resolve({
            data: {
              link: `${IMG_URL}${res.data}`,
            },
          });
        } else {
          reject();
        }
      })();
    })
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onEditorStateChange={this.onEditorStateChange} 
        toolbar={{
          image: {
            uploadCallback: this.uploadImageCallBack,
            alt: { present: true, previewImage: true },
            previewImage: true,
          },
        }}
      />
    )
  }
};

export default EditorVan;

function getBase64(img, callback) {
  return new Promise((res, rej) => {
      const reader = new FileReader();
      reader.addEventListener('load', () => res(reader.result));
      reader.readAsDataURL(img);
  })
}

　組件解析

　　React-draft-wysiwyg 中原生支持外部圖片鏈接上傳 ，使用中直接  粘貼一份圖片的 url 即可

　　實際開發中， 需要上傳本地圖片 這里就需要 自己實現

　　該組件 import 中 UploadBase64 與 IMG_URL 正是用來處理本地圖片上傳、UploadBase64 為 圖片上傳接口 ，該接口 圖片上傳至后台后， 后台會返回一個 相對路徑， 因為相對路徑是沒有辦法在頁面直接展示圖片的， 於是這里我使用了 與后台 約定好的 host:  IMG_URL 對圖片路徑進行拼接展示，這兩部分， 大家可以在實際項目中自行進行增刪處理， 特此說明

　　

　　transformDraftStateToHtml 該方法是對傳入的 字符串 解析成 html

　　

　　transformHtmlToDraftState 用於編輯修改后 將當前編輯框中的內容 轉換成 字符串 ， 傳入父組件 以供與后台接口使用

　　

　　整個組件大致如此， 基本上滿足了日常需要， 如果哪里不清楚 請在下方留言 或直接查閱官方文檔😀😀