react項(xiàng)目中 使用react-draft-wysiwyg這個(gè)富文本組件，因?yàn)楣卷?xiàng)目圖片都是上傳到阿里云oss服務(wù)器上，廢話不說上代碼，代碼如下：
// 安裝組件
yarn add react-draft-wysiwyg draftjs-to-html? html-to-draftjs?draft-js? js-md5 axios
或者用npm install ** 來安裝
// 引用組件
import axios from 'axios';
import {EditorState, convertToRaw, ContentState} from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import{Editor} from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import md5 from 'js-md5';
export default class Wysiwyg extends Component{
? ? constructor(props) {
? ? ? ? super(props);
?????? // 編輯器里的默認(rèn)值
? ? ? ? const html = '<p>Hey this <strong>editor</strong> rocks ??</p>';
? ? ? ? const contentBlock = htmlToDraft(html);
? ? ? ? if (contentBlock) {
? ? ? ? ? const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
? ? ? ? ? const editorState = EditorState.createWithContent(contentState);
? ? ? ? ? this.state = {
? ? ? ? ? ? editorState,
? ? ? ? ? };
? ? ? ? }
? ? }
? ? componentWillMount(){
? ? ? ? axios({? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? url: '**/frontend_sts_token',? //后臺(tái)接口的鏈接，主要返回上傳到oss要用到的key, accesskeyid等
? ? ? ? ? ? method: 'GET',
? ? ? ? ? ? timeout: 4000,
? ? ? ? ? ? headers: {
? ? ? ? ? ? ? ? 'content-type': 'application/json',
? ? ? ? ? ? ? ? 'Authorization': "Bearer token"? //用到的token是從后臺(tái)獲取到, 這看后端要怎么傳給他們，
? ? ? ? ? ? },
? ? ? ? ? ? params: ''
? ? ? ? }).then((response)=>{
? ? ? ? ? ? console.log(response.data.data)
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? frontend_sts_token: response.data.data
? ? ? ? ? ? })
? ? ? ? })
? ? }
//編輯器輸入方法
? ? onEditorStateChange = Function = (editorState)=>{
? ? ? ? this.setState({
? ? ? ? ? ? editorState
? ? ? ? })
? ? }
//圖片上傳到oss的方法
? ? uploadImageCallBack = Function = (file)=>{
? ? ? ? console.log(file)
? ? ? ? const {frontend_sts_token} = this.state;
? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? ? let name = md5(file.name) +".jpg";? //生成md5文件名
? ? ? ? ? ? let formData = new FormData();
? ? ? ? ? ? let _key = frontend_sts_token.dir + name;
? ? ? ? ? ? // 文件名字，可設(shè)置路徑
? ? ? ? ? ? console.log(_key)
? ? ? ? ? ? formData.append('key',? frontend_sts_token.dir + name);
? ? ? ? ? ? // policy規(guī)定了請(qǐng)求的表單域的合法性
? ? ? ? ? ? formData.append('policy', frontend_sts_token.policy)
? ? ? ? ? ? // Bucket 擁有者的Access Key Id
? ? ? ? ? ? formData.append('OSSAccessKeyId', frontend_sts_token.accessid)
? ? ? ? ? ? // 讓服務(wù)端返回200,不然，默認(rèn)會(huì)返回204
? ? ? ? ? ? formData.append('success_action_status', '200')
? ? ? ? ? ? // 根據(jù)Access Key Secret和policy計(jì)算的簽名信息，OSS驗(yàn)證該簽名信息從而驗(yàn)證該P(yáng)ost請(qǐng)求的合法性
? ? ? ? ? ? formData.append('callback', frontend_sts_token.callback)
? ? ? ? ? ? formData.append('signature', frontend_sts_token.signature)
? ? ? ? ? ? formData.append('name', name)
? ? ? ? ? ? formData.append('file', file)
? ? ? ? ? ? console.log(formData)
? ? ? ? ? ? axios({
? ? ? ? ? ? ? ? url: frontend_sts_token.host,
? ? ? ? ? ? ? ? method: 'post',
? ? ? ? ? ? ? ? data: formData,
? ? ? ? ? ? ? ? headers: { 'Content-Type': 'multipart/form-data' } ,
? ? ? ? ? ? ? ? // 或者
? ? ? ? ? ? ? ? // headers: {
? ? ? ? ? ? ? ? //? ? 'Content-Type': 'application/x-www-form-urlencoded'
? ? ? ? ? ? ? ? // },
? ? ? ? ? ? })
? ? ? ? ? ? .then((res) => {
? ? ? ? ? ? ? ? console.log(res)
? ? ? ? ? ? ? ? //添加到虛線框
? ? ? ? ? ? ? ? let imgurl = res.data.filename;
? ? ? ? ? ? ? ? let imgObj = {
? ? ? ? ? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ? ? ? link: res.data.oss_domain + imgurl
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? resolve(imgObj)
? ? ? ? ? ? })
? ? ? ? ? ? .catch((err) => { reject(err) })
? ? ? ? });
? ? }
? ? render(){
? ? ? ? console.log(EditorState.createEmpty())
? ? ? ? const { editorState } = this.state;
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <Editor
? ? ? ? ? ? ? ? ? ? editorState={editorState}
? ? ? ? ? ? ? ? ? ? wrapperClassName="wrapper-class"
? ? ? ? ? ? ? ? ? ? editorClassName="editor-class"
? ? ? ? ? ? ? ? ? ? toolbarClassName="toolbar-class"
? ? ? ? ? ? ? ? ? ? onEditorStateChange={this.onEditorStateChange}
? ? ? ? ? ? ? ? ? ? localization={{
? ? ? ? ? ? ? ? ? ? ? ? locale: 'zh',
? ? ? ? ? ? ? ? ? ? }}
? ? ? ? ? ? ? ? ? ? toolbar={{
? ? ? ? ? ? ? ? ? ? ? ? options: ['inline', 'colorPicker', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],
? ? ? ? ? ? ? ? ? ? ? ? colorPicker: {
? ? ? ? ? ? ? ? ? ? ? ? ? className: undefined,
? ? ? ? ? ? ? ? ? ? ? ? ? component: undefined,
? ? ? ? ? ? ? ? ? ? ? ? ? popupClassName: undefined,
? ? ? ? ? ? ? ? ? ? ? ? ? colors: ['rgb(97,189,109)', 'rgb(26,188,156)', 'rgb(84,172,210)', 'rgb(44,130,201)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? 'rgb(147,101,184)', 'rgb(71,85,119)', 'rgb(204,204,204)', 'rgb(65,168,95)', 'rgb(0,168,133)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? 'rgb(61,142,185)', 'rgb(41,105,176)', 'rgb(85,57,130)', 'rgb(40,50,78)', 'rgb(0,0,0)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? 'rgb(247,218,100)', 'rgb(251,160,38)', 'rgb(235,107,86)', 'rgb(226,80,65)', 'rgb(163,143,132)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? 'rgb(239,239,239)', 'rgb(255,255,255)', 'rgb(250,197,28)', 'rgb(243,121,52)', 'rgb(209,72,65)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? 'rgb(184,49,47)', 'rgb(124,112,107)', 'rgb(209,213,216)'],
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? image: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? urlEnabled: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? uploadEnabled: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? alignmentEnabled: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? uploadCallback: this.uploadImageCallBack,
? ? ? ? ? ? ? ? ? ? ? ? ? ? previewImage: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? inputAccept: 'image/*',
? ? ? ? ? ? ? ? ? ? ? ? ? ? alt:{ present: true, mandatory: true }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }}
? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? ? <textarea
? ? ? ? ? ? ? ? ? ? disabled
? ? ? ? ? ? ? ? ? ? value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
? ? ? ? ? ? ? ? />
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
github下載地址：react-draft-wysiwyg-oss
參考資料：
https://jpuri.github.io/react-draft-wysiwyg/#/docs
https://jpuri.github.io/react-draft-wysiwyg/#/demo
https://www.cnblogs.com/xufeimei/p/9804659.html
