react antd使用TinyMCE富文本编辑器

1、引入tinymce

npm install --save @tinymce/tinymce-react

2、将tinymce的文件放在public目录下

tinymce下载地址：https://www.tiny.cloud/get-tiny/self-hosted/

语言包下载地址：https://www.tiny.cloud/get-tiny/language-packages/

语言包下载后放在tinymce\js\tinymce\langs下

3、自定义组件

import { Editor } from '@tinymce/tinymce-react';
import services from '@/services';
import { message } from 'antd';interface Props {content: string | undefined;setContent: Function;
}const TinyMceEditor: React.FC<Props> = (props) => {const { content, setContent } = props;const handleEditorChange = (content: any) => {setContent(content);};const handleImageUpload = async (blobInfo: any, success: Function, failure: Function) => {if (blobInfo.blob().size > 20 * 1024 * 1024) {failure('上传图片大小不能超过 20MB');}if ('image/jpeg, image/png'.indexOf(blobInfo.blob().type) >= 0) {let formdata = new FormData();formdata.set('file', blobInfo.blob());//调用自己实现的后台文件上传apiservices.api.upload(formdata).then((res) => {if (res.code === 201) {success(res.data);} else {failure('上传失败');}});} else {failure('上传图片只能是 JPG 或 PNG 格式!');}};const file_picker_callback = async (cb: any, value: any, meta: any) => {console.log(meta);//当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口if (meta.filetype == 'media') {//创建一个隐藏的type=file的文件选择inputlet input = document.createElement('input');input.setAttribute('type', 'file');input.onchange = async function (this: any) {let file = this.files[0];let formdata = new FormData();formdata.set('file', file);services.api.upload(formdata).then((res) => {if (res.code === 201) {cb(res.data);} else {message.error('上传失败');}});};//触发点击input.click();}if (meta.filetype == 'file') {let input = document.createElement('input');input.setAttribute('type', 'file');input.onchange = async function (this: any) {let file = this.files[0];let maxSize = 100 * 1024 * 1024;if (file.size > maxSize) {message.error('上传文件大小不能超过 100MB');} else {var extensions = ['.jpg','.jpeg','.png','.zip','.rar','.doc','.docx','.xls','.xlsx','.ppt','.pptx','.pdf',];var extension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();if (extensions.indexOf(extension) > -1) {let formdata = new FormData();formdata.set('file', file);services.api.upload(formdata).then((res) => {if (res.code === 201) {let mediaLocation = res.data;cb(mediaLocation, {title: file.name,});} else {message.error('上传失败');}});} else {message.error('上传文件只能是 jpg, png,zip,rar,doc,docx,xls,xlsx,ppt,pptx,pdf 格式!');}}};//触发点击input.click();}};return (<Editorinline={false}value={content}//获取你自己的key  地址：https://www.tiny.cloud/my-account/dashboard/apiKey="key"//指向第二步下载到public目录下的tinymce静态文件tinymceScriptSrc={'/tinymce/js/tinymce/tinymce.min.js'}id={'tincyEditor'}init={{language: 'zh_CN',min_height: 800,height: 800,skin_url: '/tinymce/js/tinymce/skins/ui/oxide',//去掉商标消息” Powered by TinyMCE”branding: false,statusbar: true,font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",plugins:'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount  textpattern noneditable help charmap quickbars emoticons',mobile: {plugins:'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount  textpattern noneditable help charmap quickbars emoticons',},menubar: 'file edit view insert format tools table 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 file media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor | 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 ',},table: {title: 'Table',items: 'inserttable | cell row column | tableprops deletetable',},help: {title: 'Help',items: 'help',},},style_formats: [{title: '首行缩进',block: 'p',styles: {'text-indent': '2em',},},{title: '行高',items: [{title: '1',styles: {'line-height': '1',},inline: 'span',},{title: '1.5',styles: {'line-height': '1.5',},inline: 'span',},{title: '2',styles: {'line-height': '2',},inline: 'span',},{title: '2.5',styles: {'line-height': '2.5',},inline: 'span',},{title: '3',styles: {'line-height': '3',},inline: 'span',},],},],toolbar:'undo redo |  formatselect | bold italic forecolor backcolor fontselect fontsizeselect  | alignleft aligncenter alignright alignjustify styleselect | bullist numlist outdent indent | lists image link media table | removeformat | preview fullscreen',fontsize_formats: '10px 12px 14px 16px 18px 24px 36px 48px 56px 72px',content_style: 'body { font-family:微软雅黑,Arial,sans-serif; font-size:14px }',paste_data_images: true,convert_urls: false,media_live_embeds: true,file_picker_types: 'media file',images_upload_credentials: true,images_upload_handler: (blobInfo: any, success: any, failure: any) => {handleImageUpload(blobInfo, success, failure);},file_picker_callback,}}onEditorChange={handleEditorChange}/>);
};
export default TinyMceEditor;

4、组件调用

import TinyMceEditor from '@/components/TinyMce';const Content: React.FC = () => {const [content, setContent] = useState<string>();return (<TinyMceEditor content={content} setContent={setContent} />);
};
export default Content;

react antd使用TinyMCE富文本编辑器相关推荐

tinymce富文本编辑器做评论区
今天分享一下tinymce富文本编辑器做评论区的全过程. 文章目录一.介绍 1.最终效果 2.功能介绍 3.主要项目包版本介绍: 二.每个功能的实现 1.自定义toolbar的功能区 ①对应的样式以 ...
react中使用simditor富文本编辑器
react 中使用没有启用图片上传功能的simditor 富文本编辑器环境介绍功能需求步骤实现 npm安装simditor依赖 jsx页面引入 componentDidMount 获取DOM ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
Layui 使用 TinyMCE 富文本编辑器
Layui 使用 TinyMCE 富文本编辑器 Layui 使用 TinyMCE 富文本编辑器 1.进入 Layui 第三方组件平台下载该拓展组件 2.写一个测试 Demo 3.调用 TinyMCE ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
TinyMCE富文本编辑器自动链接插件 AutoLink配置
TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签通过如下设置 ...

react antd使用TinyMCE富文本编辑器

1、引入tinymce

2、将tinymce的文件放在public目录下

3、自定义组件

4、组件调用

react antd使用TinyMCE富文本编辑器相关推荐

最新文章

热门文章