文本编辑字数统计_React整合最新版Tinymce富文本编辑器5.3.2

使用Angular、Vue、React有个痛苦的地方就是富文本编辑器，选型时候最好要选择一个能自己扩展的，功能要丰富的，能响应式适应PC端和移动端的，能自定义图片上传的，能查看生成的 HTML代码的，能使用HTML自定义ExecComand功能的，能同时支持Angular、Vue、React和传统HTML引入使用的，唯一能胜任的就只有Tinymce的，轻量级，免费，有开源社区版。

那么怎么接入最新版呢？Angular、Vue差不多，而且我此前发过文章了，今天闲的蛋疼就发个React的记录。

首先就是创建React项目，或者在已有React项目下安装Tinymce依赖。

npm i @tinymce/tinymce-react tinymce

然后在项目中引用Editor组件即可。

import React from 'react';import {Editor} from "@tinymce/tinymce-react";import 'tinymce';

不过这样的话需要配置license key的，也就是序列号。

可以在官网注册账户获取，本文开头已经安装了tinymce依赖了，那就直接引入后自己配置路径即可。

var baseUrl = '/static/'var annTinymce = {    icons_url: `${baseUrl}/tinymce/icons/default/icons.min.js`,    language_url: `${baseUrl}/tinymce/langs/zh_CN.js`,    language: 'zh_CN',    skin_url: `${baseUrl}/tinymce/skins/ui/oxide`,    content_css: `${baseUrl}/tinymce/skins/content/default/content.css`,    // skin_url: `${baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系    // content_css: `${baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系    height: 300,    plugins: [],    toolbar: [],    branding: false,    menubar: true,    // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，    // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler    // eslint-disable-next-line no-unused-vars    images_upload_handler: (blobInfo, success, failure) => {        console.log('typeof blobInfo', typeof blobInfo)        const img = 'data:image/jpeg;base64,' + blobInfo.base64()        success(img)    }}return (    )

至于上面的配置的路径文件在哪呢？

去官网下载社区版代码即可，还有语言包，共同下载网址：

https://www.tiny.cloud/get-tiny/self-hosted/

下载后在你的项目静态资源路径下存放即可，不过这样icons_url在最新版无效，还报错。

把下载目录的icons文件改名，放到项目静态路径里，比如我新建项目路径：

public/static/js/icons/default/icons.js

这里没有使用什么插件和功能，都是默认的。如果需要安装插件，参考代码：

// 编辑器插件plugins// 更多插件参考：https://www.tiny.cloud/docs/plugins/import 'tinymce/plugins/image'// 插入上传图片插件import 'tinymce/plugins/media'// 插入视频插件import 'tinymce/plugins/table'// 插入表格插件import 'tinymce/plugins/lists'// 列表插件import 'tinymce/plugins/wordcount'// 字数统计插件