草庐IT

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

暂时先用这个名字 2023-09-08 原文

最新的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'

// Theme
import 'tinymce/themes/silver/theme'
// icons
import 'tinymce/icons/default'
// models
import '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'
// Skins
import '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 按钮

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

  1. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  2. ruby - 是否可以覆盖 gemfile 进行本地开发? - 2

    我们的git存储库中目前有一个Gemfile。但是,有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它,我必须将它添加到我们的Gemfile中,但每次我checkout到我们的master/dev主分支时,由于与跟踪的gemfile冲突,我必须删除它。我想要的是类似Gemfile.local的东西,它将继承从Gemfile导入的gems,但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗? 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  3. 屏幕录制为什么没声音?检查这2项,轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题,比如录制的视频没有声音。屏幕录制为什么没声音?今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音,你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音,屏幕录制为什么没声音?如果当时没有打开音频录制,则录制好的视频是没有声音的。因此,建议在录制前进行检查。屏幕上没有声音,很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音,即可录制音频和图画同步视频。操作方法:步骤1:点击电脑屏幕右下侧的“小喇叭”图案,在上方的选项中,选择“声音”。 步骤2:在“声

  4. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容:函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数,那么至少存在一个,使得:通过这个表达式我们可以知道,f(x)是函数的主体,a和b可以看作是主体函数f(x)中所取的两个值。那么可以有,  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法: 外层函数f(x)是一致的,并且h(x)和g(x)是等价无穷小。此时,利用拉格朗日定理,将原式替换为 ,再进行求解,往往会省去复合函数求极限的很多麻烦。使用要注意:1.要先找到主体函数f(x),即外层函数必须相同。2.f(x)找到后,复合部分是等价无穷小。3.要满足作差的形式。如果是加

  5. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  6. ruby - 是否可以将 IRB 提示配置为动态更改? - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录,但我不知道如何在每个命令后进行提示更新。最终,我想在日常工作中更多地使用IRB,让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  7. ruby - 在 Rails 项目中测试本地版本的 gem - 2

    我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时,我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意,我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR,但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好,但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb,这看起来不对或者b)升级版本,推送到Github,然后运行​​bundleup,这除了耗时之外显然是一场灾难,因为我不确定我所做的promise是否正

  8. ruby - 如何更快地解决 project euler #21? - 2

    原始问题Letd(n)bedefinedasthesumofproperdivisorsofn(numberslessthannwhichdivideevenlyinton).Ifd(a)=bandd(b)=a,whereab,thenaandbareanamicablepairandeachofaandbarecalledamicablenumbers.Forexample,theproperdivisorsof220are1,2,4,5,10,11,20,22,44,55and110;therefored(220)=284.Theproperdivisorsof284are1,2,

  9. ruby - 如何捕获所有 HTTP 流量(本地代理) - 2

    我希望访问我机器上的所有HTTP流量(我的Windows机器-不是服务器)。据我了解,拥有一个本地代理是所有流量路线的必经之路。我一直在谷歌搜索但未能找到任何资源(关于Ruby)来帮助我。非常感谢任何提示或链接。 最佳答案 WEBrick中有一个HTTP代理(Rubystdlib的一部分)和here's一个实现示例。如果你喜欢生活在边缘,还有em-proxy伊利亚·格里戈里克。这postIlya暗示它似乎确实需要一些调整来解决您的问题。 关于ruby-如何捕获所有HTTP流量(本地代理)

  10. ruby-on-rails - Rails 3,在RAILS_ROOT上方显示来自本地文件系统的jpg图片 - 2

    我正在尝试找出一种方法来显示来自不在RAILS_ROOT下(在RedHat或Ubuntu环境中)的已安装文件系统的图像。我不想使用符号链接(symboliclink),因为这个应用程序实际上是通过Tomcat部署的,而当我关闭Tomcat时,Tomcat会尝试跟随符号链接(symboliclink)并删除挂载中的所有图像。由于这些文件的数量和大小,将图像放在public/images下也不是一种选择。我查看了send_file,但它只会显示一张图片。我需要在一个格式良好的页面中显示6个请求的图像。由于膨胀,我宁愿不使用Base64编码,但我不知道如何将图像数据与呈现的页面一起传递下去。

随机推荐