import React from 'react'; // Import TinyMCE // @ts-ignore import tinymce from 'tinymce/tinymce'; // A theme is also required import 'tinymce/icons/default/index'; import 'tinymce/themes/silver'; import 'tinymce/skins/ui/oxide/skin.css'; // Any plugins you want to use has to be imported import 'tinymce/plugins/advlist'; import 'tinymce/plugins/autolink'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/link'; import 'tinymce/plugins/image'; import 'tinymce/plugins/charmap'; import 'tinymce/plugins/print'; import 'tinymce/plugins/preview'; import 'tinymce/plugins/anchor'; import 'tinymce/plugins/searchreplace'; import 'tinymce/plugins/visualblocks'; import 'tinymce/plugins/code'; import 'tinymce/plugins/fullscreen'; import 'tinymce/plugins/insertdatetime'; import 'tinymce/plugins/media'; import 'tinymce/plugins/table'; import 'tinymce/plugins/paste'; import 'tinymce/plugins/help'; import 'tinymce/plugins/wordcount'; import 'tinymce/plugins/hr'; import 'tinymce/plugins/pagebreak'; import 'tinymce/plugins/spellchecker'; import 'tinymce/plugins/visualchars'; import 'tinymce/plugins/template'; import 'tinymce/plugins/nonbreaking'; import 'tinymce/plugins/emoticons'; import 'tinymce/plugins/emoticons/js/emojis'; import {LocaleProps} from '../locale'; interface TinymceEditorProps extends LocaleProps { model: string; onModelChange?: (value: string) => void; onFocus?: () => void; onBlur?: () => void; disabled?: boolean; config?: any; outputFormat?: 'html' | 'text'; receiver?: string; } export default class TinymceEditor extends React.Component { static defaultProps = { outputFormat: 'html' }; config?: any; editor?: any; currentContent?: string; elementRef: React.RefObject = React.createRef(); componentDidMount() { const locale = this.props.locale; this.config = { inline: false, skin: false, content_css: false, height: 400, language: !locale || locale === 'zh-CN' ? 'zh_CN' : 'en', plugins: [ 'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker', 'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking', 'table emoticons template paste help' ], toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' + 'bullist numlist outdent indent | link image | print preview media fullpage | ' + 'forecolor backcolor emoticons | help', menu: { file: { title: 'File', 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' }, help: {title: 'Help', items: 'help'} }, paste_data_images: true, ...this.props.config, target: this.elementRef.current, readOnly: this.props.disabled, setup: (editor: any) => { this.editor = editor; editor.on('init', (e: Event) => { this.initEditor(e, editor); }); } }; tinymce.init(this.config); } componentDidUpdate(prevProps: TinymceEditorProps) { const props = this.props; if ( props.model !== prevProps.model && props.model !== this.currentContent ) { this.editor?.setContent(props.model || ''); } } componentWillUnmount() { tinymce.remove(this.editor); } initEditor(e: any, editor: any) { const {model, onModelChange, outputFormat, onFocus, onBlur} = this.props; const value = model || ''; editor.setContent(value); if (onModelChange) { editor.on('change keyup setcontent', (e: any) => { const newContent = editor.getContent({format: outputFormat}); if (newContent !== this.currentContent) { this.currentContent = newContent; onModelChange(newContent); } }); } onFocus && editor.on('focus', onFocus); onBlur && editor.on('blur', onBlur); } render() { return