tinymce本地化引入方案

Admin 2020-11-24 PM 543℃ 1条

在公司React项目开发过程中,我们需要用到富文本编辑器,用于商品详情信息的录入;由于商品信息需要导入图片,最终在同事的推荐下,使用了TinyMCE。

不过,在使用的一段时间后,公司测试同事说这个富文本编辑器经常出现加载不出来的情况,经过排查发现,虽然我们使用npm安装了TinyMCE,但是TinyMCE还是采用了云加载的方式加载功能组件和插件;但是这个网站的服务器经常出现加载失败或者打不开的问题,这就导致了在我们自己的项目加载TinyMCE模块时显示空白;

经过一般折腾,最终找到了从本地引入的一套解决方案,⬇️⬇️⬇️

官方文档

https://github.com/tinymce/tinymce-react

本篇文章TinyMCE版本 “@tinymce/tinymce-react": "^3.6.0",

一. 基本安装过程

1. 在React项目中安装TinyMCE依赖
npm install --save @tinymce/tinymce-react
2. 在项目中引入 Editor
import { Editor } from "@tinymce/tinymce-react";
3. 使用 Editor
                        <Editor
              initialValue="<p>请输入内容</p>"
              value={formIntroduce}
              init={{
                height: 500,
                language: "zh_CN", //调用放在langs文件夹内的语言包
                menubar: true,
                plugins: [
                  "advlist autolink lists link image charmap print preview anchor",
                  "searchreplace visualblocks code fullscreen",
                  "insertdatetime media table paste code help wordcount",
                ],
                a11y_advanced_options: true,
                toolbar:
                  "image undo redo | formatselect | bold italic backcolor | \
                    alignleft aligncenter alignright alignjustify | \
                    bullist numlist outdent indent | removeformat | help",
              }}
              onEditorChange={(content: any, editor: any) => {
                setFormIntroducn(content);
              }}
            />

二. TinyMCE本地化引入

Tip:思路为将TinyMCE插件包下载至本地,通过script标签的形式在index.html文件中引入

  1. 首先下载TinyMCE插件包,插件包下载地址如下:
https://info.qzroc.com/355.html
  1. 文件解压后,将tinymce文件夹移动至工程根目录下的public文件夹中

tinymce本地化引入方案

  1. 打开public文件夹中的index.html文件,在title标签上增加script标签,如下所示
    <script src="%PUBLIC_URL%/tinymce/js/tinymce/tinymce.min.js"></script>
    <title>React App</title>

tinymce本地化引入方案

  1. 保存项目,刷新页面即可;
标签: React, tinymce, 富文本

非特殊说明,本博所有文章均为博主原创。

上一篇 清除NPM缓存
下一篇 没有了

评论啦~


选择表情

唉呀 ~ 仅有一条评论


  1. TinyMCE本地化引入包-大鹏资源站

    [...]正文地址  正文地址[...]

    回复 2020-11-24 15:31