当前位置:首页 » 《随便一记》 » 正文

Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key

3 人参与  2023年05月07日 10:25  分类 : 《随便一记》  评论

点击全文阅读


最新的tinymce会提示”This domain is not registered with TinyMCE Cloud“,要求注册tinymce官方云才能下载所需组件类库。
既然这样,那么解决办法就简单了:要么去注册云,要么屏蔽掉提示~~,要么全部由本地加载。

问题截图

如果只导入import Editor from '@tinymce/tinymce-vue',那么会从tinymce云上调用组件,此刻若没api-key的话,会提示需要注册。
在这里插入图片描述

三种解决办法

1. 注册并配置api-key

点击提示中的注册链接【create an account】,去注册一个账号,就能获得一个 api-key
在这里插入图片描述

使用时将该值配置给 api-key 就行

<Editor :api-key="abcdefghijklmnopqrst1234567890" />

2. 删除 tinymce.min.js 中的提示部分

这。。。

"service_message":"This domain is not registered with Tiny Cloud.  Please review \u003ca target=\"_blank\" href=\"https://www.tiny.cloud/my-account\"\u003eyour approved domains\u003c/a\u003e."

3. 本地加载所有需要的文件

加入import 'tinymce/tinymce'就启用了本地加载,但还差各种组件和样式的调用,下面以css为主体进行分析。

import 'tinymce/tinymce'// Themeimport 'tinymce/themes/silver/theme'// iconsimport 'tinymce/icons/default'// modelsimport 'tinymce/models/dom'// Skins 下面将具体分析这三个css的调用// import 'tinymce/skins/ui/oxide/skin.min.css'// import 'tinymce/skins/ui/oxide/content.min.css'// import 'tinymce/skins/content/default/content.min.css'// Plugins 组件根据init中调用情况自行加载import 'tinymce/plugins/fullscreen'import 'tinymce/plugins/autoresize'

CSS调用解析:

有两种方法调用css:
一个是使用import,由系统调用;
一个是配置init中的skinskin_urlcontent_css等参数,由tinymce调用,其中
skin默认值是oxide
skin_url默认值是skins/ui/oxide
content_css默认值是skins/content/default/content.css,可url,也可xyz,这样值为skins/content/xyz/content.css

情况一:不配置importinit中参数
如果没有import调用,那么在打包时,tinymce所需的.css会缺失;
如果没有配置init中的参数,那么tinymce就会到默认地址去调用;
这些文件要么不存在,要么地址错误,tinymce只能发出404文件找不到的错误。
在这里插入图片描述情况二:用import导入css
在这里插入图片描述
打包后可看到assets目录里有tinymce.css(注意文件名中有个随机数,这样开发时就无法提前配置打包后的css路径)。
在这里插入图片描述
这个情况下虽然系统能把编辑器渲染出来,但tinymce还是会根据skin_url参数的默认值去调用css,于是抛出404错误。
在这里插入图片描述
只有设置skin:falseskin_url:''content_css:'',明确告知tinymce不需要读取skin,才能取消这些错误。
content_css为空的话,编辑器内部的样式又怎么办呢?还好tinymce提供一个content_style参数,让开发者可以手写style。利用这个参数,我们就可以实现全部css用import调用啦。
参考代码:
<template>  <div>    <Editor :init="init" />  </div>  </template><script setup>import Editor from "@tinymce/tinymce-vue";import 'tinymce/tinymce'import 'tinymce/models/dom'import 'tinymce/icons/default'import 'tinymce/themes/silver/theme'// Skinsimport 'tinymce/skins/ui/oxide/skin.min.css'import 'tinymce/skins/ui/oxide/content.min.css'import content_style from 'tinymce/skins/content/dark/content.min.css' //将内容存入content_style// Plugins 组件根据init中调用情况自行加载import 'tinymce/plugins/fullscreen'import 'tinymce/plugins/autoresize'// 关闭skin,调用路径设置为空const init = {  skin:false,  // skin_url: '', // 因为skin已经为false,所以此参数设不设都无所谓了  content_css: '',  content_style: content_style, //将导入的css内容送给content_style参数使用}</script>
情况三:仅配置skin参数
没有import,在打包后是没有tinymce相关css文件的。
在这里插入图片描述
只需配置参数skin_urlcontent_url,并将tinymce\skins复制到public目录里,就能解决调用问题。
在这里插入图片描述
这样在webpack 打包时系统会将public目录中的内容直接复制到dist目录中供tinymce使用:
在这里插入图片描述

参考代码:

<template>  <div>    <Editor :init="init" />  </div>  </template><script setup>import Editor from "@tinymce/tinymce-vue";import 'tinymce/tinymce'import 'tinymce/models/dom'import 'tinymce/icons/default'import 'tinymce/themes/silver/theme'// Skins 在init的参数中配置// import 'tinymce/skins/ui/oxide/skin.min.css'// import 'tinymce/skins/ui/oxide/content.min.css'// import 'tinymce/skins/content/default/content.min.css'// Plugins 组件根据init中调用情况自行加载import 'tinymce/plugins/fullscreen'import 'tinymce/plugins/autoresize'// 两个参数中提供public目录下的路径const init = {  // skin:'oxide', // 默认值为oxide,和skin_url配合使用  skin_url: 'tinymce/skins/ui/oxide', // skin路径  content_css: 'tinymce/skins/content/dark/content.css', // 以css文件方式自定义可编辑区域的css样式,css文件需自己创建并引入  // 本案例中仅仅针对css分析,如果你想把theme、icons和model都用参数配置,而不是import,那么用下面的三个参数即可  // theme_url:'',  // icons_url:'',  // model_url:'',}</script>
在开发环境下init参数中配置的css地址后,tinymce会直接从public目录调用,而不是node_modules目录。建议在public目录里建个static、res等类似名称的二级目录,将各种css、js文件放在这个二级目录里,这样打包后就不会在dist目录中乱成一团了。import的文件会被打包,init中参数中设置的文件在开发环境会去public目录里调用,在生产环境会从根目录里调用。情况三中的大部分import都可以通过配置init中参数来实现调用:theme_urlicons_urlmodel_urllanguage_url…本文真正领会后,实际开发时遇到类似调用的问题时就都可以解决了。tinymce配置太多了,包括plugin的使用得写好多import,如果形式比较固定的,建议再套个壳做个tm插件,这样每次使用都方便。

参考
This domain is not registered with TinyMCE Cloud
使用tinymce富文本编辑器部署到环境报错:/js/skins/ui/oxide/content.min.css net::ERR_ABORTED 404 (Not Found)
TinyMCE Skin options
Adding or changing the editor content CSS

Vue3集成富文本编辑器TinyMce6
Premium upgrade promotion
tinymce 去掉 ⚡️Upgrade 按钮


点击全文阅读


本文链接:http://zhangshiyu.com/post/61303.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 京圈佛子破戒后,我改嫁京圈纨绔(沈墨渊,白晶晶)
  • 前世被闺蜜害死,重生后我让她从太子妃变疯女苏婉儿,清歌完本_前世被闺蜜害死,重生后我让她从太子妃变疯女(苏婉儿,清歌)
  • 全书浏览七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)_七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)全书结局
  • 今天也没变成昨天(周扬陈默)全书免费_(周扬陈默)今天也没变成昨天后续(周扬陈默)
  • 重生后,秦总非要父以子贵(许沐晴,秦越泽)全书浏览_重生后,秦总非要父以子贵全书浏览
  • 他嫌弃我喝两块钱豆浆上不了台面,我结婚后他又哭又闹全书万照,白青青在线
  • 昭然若梦前尘烬列表_昭然若梦前尘烬(温昭然方池雲)
  • 导师借我股票账号,我倒欠五十万(孟潇潇,宁薇)_导师借我股票账号,我倒欠五十万孟潇潇,宁薇
  • 拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾(周钰泽,蒋清清,思源)全书浏览_拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾全书浏览
  • 我的人生,你已出局(程森凌古楚文)_我的人生,你已出局程森凌古楚文
  • 穿书成病娇女配,睁眼就签下离婚协议书(朱楼)_穿书成病娇女配,睁眼就签下离婚协议书
  • 老婆逼我给白月光捐肾,我死后她悔疯了(宋逸晨沈墨白)全书浏览_老婆逼我给白月光捐肾,我死后她悔疯了全书浏览

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1