1、引入tinymce
npm install --save @tinymce/tinymce-react
2、在public中引入tinymce的靜態文件，下載地址：
https://files.cnblogs.com/files/uimeigui/tinymce.zip
//如果上述地址不能用，用官方的下載地址，官方下載，官方下載需要添加powerpaste到下載的tinymce的plugins中，這是word復制文件
//在react的public的index.html中的head位置引入tinymce.min.js
<head> <script src="./tinymce/tinymce.min.js"></script>//我的tinymce相對路徑，填你們自己的 </head>
3、封裝組件
import React, { memo } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { update_img } from '../api/img' //update_img是自己定義的上傳圖片視頻方法,需要自行封裝，很簡單
const Tinymce = memo((props) => {
//上傳內容改變，處理
let handleEditorChange = (content, editor) => {
// console.log('Content was updated:', content);
props.setarticleContentHandle(content) //props.父級的方法，自己定義
}
//上傳圖片
let images_upload_handler = async (blob, success, fail) => {
let param = new FormData();
param.append("img", blob.blob());
let data = await update_img(param);//update_img是自己定義的上傳圖片視頻方法,需要自行封裝，很簡單
success(data.url);
}
//上傳視頻
let file_picker_callback = async (cb, value, meta) => {
//當點擊meidia圖標上傳時,判斷meta.filetype == 'media'有必要，因為file_picker_callback是media(媒體)、image(圖片)、file(文件)的共同入口
if (meta.filetype == 'media') {
//創建一個隱藏的type=file的文件選擇input
let input = document.createElement('input');
input.setAttribute('type', 'file');
input.onchange = async function () {
let file = this.files[0];
var formData;
formData = new FormData();
//假設接口接收參數為file,值為選中的文件
formData.append('img', file);
//正式使用將下面被注釋的內容恢復
let data = await update_img(formData); //update_img是自己定義的上傳圖片視頻方法,需要自行封裝，很簡單
// console.log(data);
cb(data.url)
}
//觸發點擊
input.click();
}
}
let self = this;
return (
<Editor
initialValue={props.detail} //父組件傳的值
apiKey="3gumwdw2xrvqkfci99fk6pqqqnfayhqg2c3w5scmzx9q9ymc" //可以到官網獲取自己的
init={{
language: 'zh_CN',
height: 500,
menubar: false,
images_upload_url: "/api/pc/upload/img",
images_upload_base_path: "/api/pc/upload/img",
images_upload_credentials: true,
convert_urls: false, //這個參數加上去就可以了
file_picker_types: 'media',
plugins: 'powerpaste textcolor print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
powerpaste_word_import: 'propmt',
powerpaste_html_import: 'propmt',
powerpaste_allow_local_images: true,
paste_data_images: true,
toolbar: 'preview undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify| forecolor backcolor removeformat |image media numlist bullist | outdent indent | pagebreak | charmap emoticons | fu',
video_template_callback: function (data, videoTemplateCallback) {
return `<span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src='${data.source}' data-mce-p-width='${data.width}' data-mce-p-height='${data.height}' data-mce-p-controls="controls" data-mce-html="%20"> <video width='${data.width}' height='${data.height}' controls="controls"> <source src='${data.source}' type='${data.sourcemime}'></source> </video> </span>`
},
images_upload_handler,
file_picker_callback
}}
onEditorChange={handleEditorChange}
/>
);
});
export default Tinymce
4、頁面中使用
//引入
import Timymce from '../../components/tinymce'; //這是我的相對路徑，填你們自己的
//使用
<Timymce setarticleContentHandle={(value) => setarticleContentHandle(value, 0)} detail={detail}></Timymce>
//注釋：setarticleContentHandle是自行定義修改值的方法，detail為富文本的值