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

拼搏现实的明天。 2023-01-13 05:54 169阅读 0赞

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

`https://www.jsdelivr.com/?query=tinymce`

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

在react中 单一的使用`tinymce.init`去初始化富文本容器元素会导致初始化有时候不生效，因为tinymce是异步加载初始化的，于是，我们需要配合`@tinymce/tinymce-react`这个针对react的tinymce包去展示  
需要注意的是，tinymce作为富文本编辑器，它本身自带了一些插件和工具，但是也有一些是不携带的，属于第三方提供的，比如`plugins/indent2em`

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

具体使用如下：

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">
                          <Editor
                            init={ { 
                              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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021041612192616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1]: /images/20221022/ab31bfc8b1e34c2ebeb57b9aa5b6fe78.png