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

这篇具有很好参考价值的文章主要介绍了Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

问题截图

如果只导入import Editor from '@tinymce/tinymce-vue',那么会从tinymce云上调用组件,此刻若没api-key的话,会提示需要注册。
Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key

三种解决办法

1. 注册并配置api-key

点击提示中的注册链接【create an account】,去注册一个账号,就能获得一个 api-key
Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去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文件找不到的错误。
    Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key
  • 情况二:用import导入css
    Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key
    打包后可看到assets目录里有tinymce.css(注意文件名中有个随机数,这样开发时就无法提前配置打包后的css路径)。
    Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key
    这个情况下虽然系统能把编辑器渲染出来,但tinymce还是会根据skin_url参数的默认值去调用css,于是抛出404错误。
    Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key
    只有设置skin:falseskin_url:''content_css:'',明确告知tinymce不需要读取skin,才能取消这些错误。
    content_css为空的话,编辑器内部的样式又怎么办呢?还好tinymce提供一个content_style参数,让开发者可以手写style。利用这个参数,我们就可以实现全部css用import调用啦。

必须注意,用import 调用CSS文件时,不要使用默认和命名导入的语法,而应使用?inline查询参数,比如:
import content_style from 'tinymce/skins/content/dark/content.min.css?inline'
否则最新版本可能会弹出错误提示:Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import content_style from 'tinymce/skins/content/dark/content.min.css?inline'
这是因为使用默认和命名导入的方式,CSS文件会单独链接被加载, 而使用?inline查询则实现了CSS文件直接内嵌到 JavaScript 中。
二者的区别是:

  • 默认和命名导入:
  1. 会产生多次http请求,降低性能。
  2. 可能存在CSS文件加载顺序的问题。
  • ?inline查询:
  1. 会将CSS文件内容直接内嵌到JavaScript中,避免多次http请求。
  2. 避免了CSS文件加载顺序的问题。
    所以报错信息的含义是:建议您改用内联式(inline)的方式import CSS文件,而非单独加载,这样能提高性能和避免CSS加载顺序带来的潜在问题。

参考代码:

<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?inline' //将内容存入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文件的。
    Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key
    只需配置参数skin_urlcontent_url,并将tinymce\skins复制到public目录里,就能解决调用问题。
    Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key
    这样在webpack 打包时系统会将public目录中的内容直接复制到dist目录中供tinymce使用:
    Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key

参考代码:

<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 按钮文章来源地址https://www.toymoban.com/news/detail-401058.html

到了这里,关于Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-key的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui实现表格每行可以编辑数据

    每行可以编辑数据可以不使用弹窗实现修改数据的功能,这里使用到element-ui框架 效果图如下: 代码如下: 可获取到编辑的数据 这里展示axios.post请求来实现编辑功能

    2024年02月12日
    浏览(53)
  • element-ui实现密码复杂度验证

    1、el-form中的rules属性,rules属性定义的是存放多个验证规则的数组formRules(这个数组是个人起的名字),el-form-item中的prop属性,对应的是formRules数组中的对应的规则名称,然后在el-input标签内,设置一个v-model双向数据绑定,以及其他的属性等。:model是绑定属性,置空 在规则

    2024年02月07日
    浏览(40)
  • element-ui的两种远程搜索实现

    1. 实现效果: 2. 利用el-autocomplete实现远程搜索 el-autocomplete是使用fetch-suggestions方法实现,当输入的时候,会调用我们提供的方法,传入的参数是输入的value,以及callback。 把请求到的下拉列表通过callback返回(列表的每一项以key为value的形式传,也可以通过value-key换成其key)

    2024年02月11日
    浏览(37)
  • Element-ui 实现多个日期时间发范围查询

    el-form-item label=\\\"生产时间\\\"             el-date-picker                 v-model=\\\"dateProduct\\\"                 style=\\\"width: 240px\\\"                 value-format=\\\"yyyy-MM-dd\\\"                 type=\\\"daterange\\\"                 range-separator=\\\"-\\\"                 start-placeholder=\\\"生产开始日期\\\"    

    2024年02月11日
    浏览(40)
  • 如何实现element-UI循环表单以及数据验证

    可能看到这篇文章,你很困惑。为啥要循环表单?其实并不难理解,我们以系统设置页面为例,一般直接按照客户需要来写表单就行了。但是吧,慢慢你会发现这并不高效,因为存在很多客户,他们对自己的需求几乎是模糊不清的,系统菜单就会经常变动,这就很浪费时间。

    2024年02月11日
    浏览(44)
  • Element-UI控件Tree实现数据树形结构

            在前端开发中,有时会遇到所有菜单数据在同一级的情况,后端未对数据进行分级处理;但前端渲染需要是树状结构的数据,如何实现数据的树状化?将数组中通过父节点的ID与子节点的parentId关联,通过递归函数来实现。         前端框架这里使用element-ui的tree控件

    2024年02月05日
    浏览(119)
  • vue+element-ui 实现下拉框滚动加载

    该功能是由 自定义滚动指令 结合下拉框 :remote-method 远程搜索 实现的 开启远程搜索 参考官方文档 绑定自定义指令 v-el-select-loadmore=“loadmore”

    2024年02月14日
    浏览(65)
  • Vue2 +Element-ui实现前端页面

    以一个简单的前端页面为例。主要是利用vue和element-ui实现。 里面涉及的主要包括:新建vue项目、一行多个输入框、页面实现等。   ①首先安装nodejs,这部分在此就不讲啦。 ②然后安装vue-cli: 查看是否安装成功: 安装成功之后就输出vue的版本 ③在cmd窗口新建一个vue2脚手架

    2024年02月16日
    浏览(45)
  • 基于vue+element-ui实现上传进度条

    目录 基于el-upload组件实现进度条的编写 后台进度前台进度条显示 基于el-upload组件实现进度条的编写 ①编写文件上传时的钩子函数 ②监听进度百分比 后台进度前台进度条显示 参考文章: 后台进度前台显示进度条_weixin_30646505的博客-CSDN博客 后端思路: ①创建一个类,封装进

    2023年04月08日
    浏览(45)
  • (vue)element-ui 表格实现勾选单选

    效果: 重选后: 解决参考:https://blog.csdn.net/m0_58373910/article/details/125912828

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包