react集成tinymce富文本编辑器
import { useState, useEffect } from 'react'
import { Editor } from '@tinymce/tinymce-react'
import 'tinymce/tinymce'
import 'tinymce/models/dom'
import 'tinymce/icons/default'
import 'tinymce/themes/silver/theme'
// Skins
import './index.less'
// Plugins 组件根据init中调用情况自行加载
import 'tinymce/plugins/accordion'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/help'
import 'tinymce/plugins/media'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/code'
import 'tinymce/plugins/image'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/table'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/importcss'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/template'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/link'
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/save'
import 'tinymce/plugins/wordcount'
import './langs/zh-Hans'
export default function RichEditor({ value, onChange }) {
const [showEditor, setShowEditor] = useState(true)
useEffect(() => {
setShowEditor(false)
setShowEditor(true)
}, [value])
const onEditorChange = (e) => {
console.log(e)
onChange(e)
}
const imagesUploadHandler = (blobInfo, progress) =>
new Promise((resolve, reject) => {
console.log(blobInfo, progress)
resolve('1.jpg')
})
const config = {
skin: false,
content_css: false,
height: 500,
plugins: [
'advlist',
'anchor',
'autolink',
'help',
'image',
'link',
'lists',
'searchreplace',
'table',
'wordcount',
'charmap',
'preview',
'anchor',
'visualblocks',
'code',
'fullscreen',
'insertdatetime',
'media',
'code',
'codesample',
],
toolbar:
'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify |bullist numlist outdent indent | removeformat |image|codesample|code|preview|fullscreen | help',
menu: {
file: { title: '文件', items: 'newdocument restoredraft | preview | print ' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
view: {
title: 'View',
items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen',
},
insert: {
title: 'Insert',
items:
'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime',
},
format: {
title: 'Format',
items:
'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat',
},
tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
favs: {
title: 'My Favorites',
items: 'code visualaid | searchreplace | spellchecker | emoticons',
},
},
menubar: 'file edit view insert format tools table favs',
codesample_languages: [
{ text: 'HTML/XML', value: 'markup' },
{ text: 'JavaScript', value: 'javascript' },
{ text: 'CSS', value: 'css' },
{ text: 'PHP', value: 'php' },
{ text: 'Ruby', value: 'ruby' },
{ text: 'Python', value: 'python' },
{ text: 'Java', value: 'java' },
{ text: 'C', value: 'c' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' },
{ text: 'Scala', value: 'scala' },
],
promotion: false, //阻止更新提示
language: 'zh-Hans',
image_uploadtab: true,
images_upload_handler: imagesUploadHandler,
}
return (
<>
{showEditor && (
<Editor
initialValue={value}
init={config}
// tinymceScriptSrc="./1/tinymce.min.js"
onEditorChange={onEditorChange}
/>
)}
</>
)
}