js 可靠cdn地址（富文本编辑器tinymce的实践）

推荐一个 cdn源的可靠源地址（免费且持久）

/?query=tinymce

有个富文本编辑的需求，要求导入html字符串去生成富文本htm，使用的是react

在react中 单一的使用tinymce.init去初始化富文本容器元素会导致初始化有时候不生效，因为tinymce是异步加载初始化的，于是，我们需要配合@tinymce/tinymce-react这个针对react的tinymce包去展示

需要注意的是，tinymce作为富文本编辑器，它本身自带了一些插件和工具，但是也有一些是不携带的，属于第三方提供的，比如plugins/indent2em

用Npm下载的tinymce以及@tinymce/tinymce-react这两个包都不支持展示菜单栏中的工具，使用的部分cdn也不可靠，因为它们内部引用文件报错，再加上公司的网络限制很严格，一些cdn无法获取到对应的资源，因此写了这篇文章记录可靠方案

解决后的截图：

具体使用如下：

<script src="/npm/tinymce@5.1.0/tinymce.min.js" ></script>

import {Editor } from '@tinymce/tinymce-react';// import tinymce from 'tinymce/tinymce';import moment from 'moment';import lang from '../../../../public/zh_CN';import 'tinymce/themes/silver/theme';import 'tinymce/skins/ui/oxide/skin.min.css';import 'tinymce/skins/ui/oxide/content.min.css';import 'tinymce/plugins/lists';import 'tinymce/plugins/advlist';import 'tinymce/plugins/hr';import 'tinymce/plugins/image';import 'tinymce/plugins/charmap';// import 'tinymce/plugins/indent2em';import '../../../../public/indent2em';

useEffect(() => {const Tinymce = tinymce.init({selector: '#tinydemo',plugins: 'searchreplace wordcount visualblocks code fullscreen insertdatetime media nonbreaking', // 这排的插件如果不完整，会导致菜单栏相关功能不显示 他们是有依赖的contextmenu: 'configurepermanentpen',toolbar: 'permanentpen code',menubar: 'file edit view format table tools help', // tools就是我们想要实现的功能menu: {format: {title: 'Format',items: 'configurepermanentpen | bold italic underline strikethrough ' +'superscript subscript codeformat | formats blockformats fontformats ' +'fontsizes align | forecolor backcolor | removeformat'}},permanentpen_properties: {fontname: 'arial,helvetica,sans-serif',forecolor: '#E74C3C',fontsize: '12pt',hilitecolor: '',bold: true,italic: false,strikethrough: false,underline: false},height: 500,content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'});return () => {tinymce.remove('#tinydemo');}}, []);

const tinymce = window.tinymce;

<div id="tinydemo"><Editorinit={{setup: EditorView,height: '600px',language_url: lang,language: 'zh_CN',fontsize_formats: '8px 10px 12px 14px 16px 18px 24px 28px 32px 36px 42px',font_formats:'微软雅黑;宋体;仿宋;黑体;楷体;隶书;幼圆;Arial=arial;sans=serif;Georgia=georgia;Symbol=symbol;Arial Black=arial black;Times New Roman=times new roman;',plugins: 'code fullscreen lists advlist hr image indent2em',toolbar1: `undo redo | style-p style-h1 style-h2 style-h3 style-pre style-code | formatselect fontselect fontsizeselect indent2em`,toolbar2: `bold italic underline strikethrough hr backcolor forecolor | alignleft aligncenter alignright alignjustify removeformat | bullist numlist outdent indent | image`,// branding: false, // 是否禁用“Powered by TinyMCE”// menubar: false, // 顶部菜单栏显示elementpath: false,images_upload_handler: async (blobInfo: any, success: (url: any) => void, failure: () => void) => {var formData = new FormData();formData.append('file', blobInfo.blob());if (formData) {const res = await upload(formData);t = 1;// let url = res.url && res.url.split('?auth.token=')[0];// success(url + '?auth.token=' + Cookie.get('auth.token'));success(res.url);}},}}onEditorChange={(v) => {onChangeDrawer(v);}}value={htmlContent}/></div>

如果觉得《js 可靠cdn地址（富文本编辑器tinymce的实践）》对你有帮助，请点赞、收藏，并留下你的观点哦！