使用リッチテキストエディタをTinyMCEのは、反応します

このプロジェクトでは、多くの場合、あなたはリッチテキストエディタ、市場には数多くの多様なバージョンを使用する必要がありますが、気持ちはどのように強力な機能、リッチテキストエディタの最近の発見、使いやすいし、強力ではありません。

TinyMCEは：強力な、WYSIWYGリッチテキストエディタ

中国の文書アドレスします。http：//tinymce.ax-z.cn/general/basic-setup.php
英語文書アドレスします。https：//www.tiny.cloud/docs/

リッチテキストエディタ反応しTinyMCEのを使用します

まず、依存関係をダウンロード

npm install --save @tinymce/tinymce-react

プロジェクトで使用

import React from 'react';
 import { Editor } from '@tinymce/tinymce-react';

 class App extends React.Component {
   handleEditorChange = (content, editor) => {
     console.log('Content was updated:', content);
   }

   render() {
   const editorObj={
      height: '800px',
      language: 'zh_CN',
      language_url : '翻译中文的路径，我尝试很多种方法都不成功，最后叫后台的老哥放进项目的服务器上了，用的线上地址',
      plugins: 'table lists link image preview code',
      toolbar: `formatselect | code | preview | bold italic strikethrough forecolor backcolor | 
      link image | alignleft aligncenter alignright alignjustify  | 
      numlist bullist outdent indent`,
      relative_urls: false,
      file_picker_types: 'image',
      images_upload_url: {'上传图片的路径'},
      image_advtab: true,
      image_uploadtab: true,
      images_upload_handler:(blobInfo, success, failure)=>{
      		//这里写你上传图片的方法
      }
   	}
     return (
       <Editor
         inline={false}
         selector='editorStateRef'  // 选择器
   		 apiKey='官网上申请的key值'
         initialValue={editorState}
         init={{...editorObj}}
     	 onEditorChange={this.handleEditorChange}
       />
     );
   }
 }

 export default App;