React版TinyMCE富文本初始化加载过慢的问题

news/2024/7/15 20:12:06 标签: react.js, 前端, reactjs

解决React版TinyMCE富文本初始化加载过慢的问题

关于如何构建React版的TinyMCE富文本,可以参照我的上一篇博客:
https://blog.csdn.net/m0_37138425/article/details/105812111

这里只是关于如何解决加载速度过慢的问题。
其实就是一句话: 本地部署

我询问官方给的回复也是如此:

在这里插入图片描述

关于本地部署:

先是下载js文件,链接如下:
https://www.tiny.cloud/get-tiny/self-hosted/

在这里插入图片描述
我选择的是5.9.2这个版本。
将文件下载到本地后,放入到项目中。
如果你需要的是中文,需要下载语言包。

在这里插入图片描述
下载语言包后放入到如下文件目录:
在这里插入图片描述
之后实例化的jsx或tsx文件中修改,如下:

 <Editor
        value={templateStr}
        id={"tincyEditor"}
        tinymceScriptSrc={'/tinymce/js/tinymce/tinymce.min.js'}
        apiKey="dz7inj0opak6uzuun6txozvu83ecik5lk75x8vgdvnfgymx9"
        init={{
            language: 'zh_CN',
            width: 1046,
            min_height: 716,
            plugins: 'preview searchreplace autolink',
            toolbar: 'bdmap indent2em lineheight formatpainter axupimgs',
            fontsize_formats: '8px 9px 10px 11px 12px 14px 16px 18px 24px 36px 48px 56px 72px',
            onEditorChange={this.handleEditorChange}
            onInit = {this.onInit}
    />

注意: tinymceScriptSrc={’/tinymce/js/tinymce/tinymce.min.js’}
这边引用的就是你下载的js文件。

这样你再试试打开富文本的速度,绝对是飞一样的感觉。

注意:

下载的js包应放在项目的public目录下,如果放在其他目录可能有取不到或报错的风险。
在这里插入图片描述
还有一种方式,我没有尝试,是通过script标签的形式引进去。
src是js的文件地址。

<script src="%PUBLIC_URL%/tinymce/tinymce.min.js"></script>

应该也是有用的。

以上!!


http://www.niftyadmin.cn/n/1499191.html

相关文章

文本自动换行(遇见句号就换行)

HTML代码&#xff1a;<p id"text_desc_p">银河我是在英国威尔士的Pembroke海边看到的。如果你和我一样没怎么见过世面&#xff0c;面对如今这天穹上神迹般的飘带就真的在你眼前的时候&#xff0c;绝对会让你叫出声来。文字说再多都苍白无力。只有亲眼见见才能让…

IDEA 中 gradle面板显示重复工程

使用 IDEA 构建多模块工程时&#xff0c;每新建一个模块&#xff0c;gradle 构建后&#xff0c;面板上就会出现一个重复的根工程&#xff0c;如下图红框部分&#xff0c;怎么处理下

OAuth2 API-GATEWAY Using @EnableOAuth2Sso

2019独角兽企业重金招聘Python工程师标准>>> Spring Cloud api-gateway using EnableOAuth2Sso 注解。 Start API-GATEWAY application。 When request arrived&#xff0c;会进入ApplicationFilterChain的过滤器链。 ApplicationFilterChain位于tomcat-embed-core.…

关于打印机-打印次数累计研究 调研结果报告

关于打印机-打印次数累计研究 调研结果报告 现阶段web端使用的打印功能是基于webApi中对外暴露的window.print()方法&#xff0c;这个fn没有任何的返回&#xff0c;且除此之外&#xff0c;webApi没有其他关于打印模块的接口。 但是&#xff01;提供了window.print()的监听方法…

JAVA入门[12]-JavaBean

一.什么是JavaBean JavaBean是特殊的Java类&#xff0c;使用Java语言书写&#xff0c;并且遵守规范&#xff1a; 提供一个默认的无参构造函数。需要被序列化并且实现了Serializable接口。可能有一系列可读写属性。可能有一系列的"getter"或"setter"方法。二…

关于Vue路由获取query中base64解码出错的问题

关于Vue路由获取query中base64解码出错的问题 最近在使用vue-router&#xff0c;通过路由获取url中传递的base编码的数据&#xff0c;对数据进行解码的时候发现数据错乱。 找了许久才发现问题所在&#xff0c;其实就是vue-rouer在截取路由时&#xff0c;会把其中的 替换成空…

《Spring Boot极简教程》第3章 一键启动应用程序

第3章 一键启动应用程序 3.1 SpringBoot版的Restful Hello,World 3.1.1 Spring Boot CLI groovy版Hello World 首先安装Spring Boot CLI&#xff0c;参考文档&#xff1a;http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/#getting-started-inst…

动态调用dll遇到的问题

问题&#xff1a;动态调用第三方提供的dll报错。 Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call. This is usually a result of calling a function declared with one calling convention with a function pointer declared w…