首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我的tinymce图标突然消失vue.js?

Tinymce是一个常用的富文本编辑器,用于在网页中实现文本编辑功能。在Vue.js中使用Tinymce时,可能会遇到图标突然消失的问题。这个问题通常是由于Tinymce的图标字体文件无法正确加载所致。

解决这个问题的方法有以下几种:

  1. 确保正确引入Tinymce的样式文件和脚本文件。在Vue.js项目中,可以通过在index.html文件中引入Tinymce的CDN链接或本地文件来加载所需的样式和脚本。
  2. 检查Tinymce的图标字体文件是否正确加载。图标字体文件通常是以字体文件格式(如woff、woff2)存储的,可以通过浏览器的开发者工具查看网络请求来确认字体文件是否成功加载。如果字体文件加载失败,可以尝试重新下载或替换字体文件。
  3. 确保Tinymce的图标字体文件路径正确。有时候,图标字体文件的路径可能与实际存储位置不一致,导致加载失败。可以通过检查Tinymce的配置文件或相关配置项来确认图标字体文件的路径是否正确。
  4. 检查是否存在冲突或重复引入的情况。在Vue.js项目中,可能会存在多个组件同时引入Tinymce,导致冲突或重复加载的情况。可以通过检查组件的引入和使用方式,确保只有一个组件引入Tinymce,并正确初始化。
  5. 更新Tinymce版本或使用其他富文本编辑器。如果以上方法都无法解决问题,可以尝试更新Tinymce的版本或使用其他类似的富文本编辑器,以解决图标消失的问题。

总结起来,当Tinymce的图标突然消失时,可能是由于样式文件或图标字体文件加载失败或路径错误所致。通过检查文件引入、路径配置和版本更新等方法,可以解决这个问题。如果问题仍然存在,可以考虑使用其他富文本编辑器替代。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vue富文本编辑器插件推荐_elementui富文本编辑器

语言包 下载完之后在项目里新建public文件夹 1)在public目录下新建tinymce文件夹,并将下载语言包解压到该目录下 2)在node_modules里面找到tinymce,将skins...'tinymce/themes/silver/theme'//编辑器主题 import 'tinymce/icons/default' //引入编辑器图标icon,不引入则不显示对应图标 // 引入编辑器插件...', myValue :this.value, init: { selector: '#tinymce', language_url: '/tinymce/langs/zh_CN.js',//汉化路径是自定义...传递,忘记为什么要用这个了 const isAccord = blobInfo.blob().type === 'image/jpeg' || blobInfo.blob().type === 'image...$emit('onClick', e, tinymce) }, //可以添加一些自己自定义事件,如清空内容 clear() { this.myValue = '' } } }

2.3K20

tinymce--一款非常好用富文本编辑器 vue集成tinymce编辑器

下图为开启全部功能截图 ​ ? 可以看到功能很多,跟word很类似,基本功能需求都能满足,除此之外还可以变换彩色图标 ​ ? ​​...3、组件编写 新建一个组件,在此把它命名为imcoder-tinymce.vue 在组件中我们引入tinymce import tinymce from "tinymce/tinymce"; import...如果出现这种状况,则是因为没有引入字体图标组件 ​ ?...这时候我们要是使用的话就要把他们引入进来,网上一些文章说把下载插件直接放到node_modules/tinymce/plugins下,然后直接引用就好,但是发现并不能使用,也可能是方式不对。..."; components: { Editor }, 希望这篇文章能够帮到你 欢迎关注公众号:coder自我修养

26.2K113
  • 最好用 6 款 Vue 3 富文本编辑器

    试用了市面上所有主流富文本编辑器,筛掉长期不更新,bug 明显,社区活跃度低,功能单一编辑器,把最好、最有特点 6 款编辑器挑出来,分享给大家。...这些编辑器各有各特点,有些功能多样,但整体很重,有些功能虽然少,但某一项功能优化特别好。希望测评可以帮助你选到合适你需求编辑器。...TinyMCE - 富文本编辑器里 Word ,功能想不到丰富 TinyMCE 是富文本编辑器领域头部玩家之一,主流富文本编辑器,功能非常全,你需要大多数功能它都支持。...TinyMCEVue.js 集成和安装非常友好,支持 Vue3 和 TypeScript,文档写也非常好。...富文本编辑器总结 本文介绍了自己用过 7 款 Vue.js 富文本编辑器特点,大家可以根据自己工作中实际场景来对编辑器进行挑选。 九. 本文作者 蒋川,B 端数据开发。

    14.2K10

    Vue富文本编辑器_前端富文本编辑器插件

    下图为开启全部功能截图 可以看到功能很多,跟word很类似,基本功能需求都能满足,除此之外还可以变换彩色图标 TinyMCE中文文档地址:http://tinymce.ax-z.cn/ vue项目集成.../tinymce文件夹内再新建langs文件夹,用来存放我们下载中文语言包,如下图所示 3、组件编写 新建一个组件,在此把它命名为imcoder-tinymce.vue 在组件中我们引入tinymce...({ }); // 这里传个空对象就可以了 }, 如果出现以下报错,则可能是路径配置错误,仔细检查路径是否写错 如果出现这种状况,则是因为没有引入字体图标组件 手动引入就好 import "tinymce...这时候我们要是使用的话就要把他们引入进来,网上一些文章说把下载插件直接放到node_modules/tinymce/plugins下,然后直接引用就好,但是发现并不能使用,也可能是方式不对。...解决方案:在src/assets下新建/tinymce/plugins目录,把下载插件解压缩放进去,然后引用进来,如下所示 这里使用了行高插件和百度地图插件 // 扩展插件 import "..

    3.4K20

    在页面使用富文本编译器

    富文本编译器选择 Editor.md TinyMCE SimpleMDE CKEditor 还有一些,这里讲的是TinyMCE 1、下载 下载地址:下载tiny | TinyMCE中文文档中文手册...下载开发版本,下载最新版 tinymce_6.4.2_dev.zip 将压缩包解压后可以看到下面目录:  点进js目录,发现还有一个tinymce目录(真正用到),里面的每个目录含义如下:...3、中文设置 语言包下载:Language Packages | Trusted Rich Text Editor | TinyMCE 但是下载解压后发现是zh_Hans.js,然后配置后也没有转换成中文...于是下载了 5版本所有语言包,找到了zh_CN.js,它就可以帮助我们成功转换为简体中文。...去掉右下角图标 branding:false, 自定义工具栏按钮 setup:function (editor){ editor.ui.registry.addButton

    29320

    Vue2使用富文本编译器

    可以先看看我之前一篇文章,属于基础吧 在页面使用富文本编译器_超*博客-CSDN博客 至于为什么还是用TinyMCE,不用ElementUI自带富文本编译器,因为技穷/(ㄒoㄒ)/~~ 同样参考一篇文章...(进行修改、完善): VUE2下版本项目加入富文本框实现_vue2富文本从js文件夹加载_算哪枝小绿植博客-CSDN博客  1、下载资源 npm install tinymce -S npm install...@tinymce/tinymce-vue@3.0.1 2、 开始 这里说一下,按照原博主步骤是将node_module文件下tinymce文件,拷贝一份到静态资源目录中。...script> 注意: language_url中文语言包路径是..../zh_CN.js,将下载zh_CN.js文件复制到node_modules/tinymce目录下就行。 扩展菜单、工具栏可以看看原博主下总结表格!!!

    31720

    三种插件开发模式,带你玩废tinymce

    下面将分享3种方式,带你玩废 tinymce,适合接触过 tinymce 小伙伴,如果没有接触过 就随便看看,收藏也不吃亏,保不齐,后面用得上,知道可以这样玩就好了 利用tinymce官方提供...SVG 图标图标名称引用可以由任何组件配置。...该图标仅适用于为其配置编辑器实例 addMenuButton() 注册一个新菜单按钮。添加单击时打开菜单工具栏按钮。...中 Shadow DOM 相关联),告诉 tinymce 别把自定义标签给过滤掉了 ,过滤了 就没法玩了。...按钮组件: 可扩展丰富按钮样式, 给文章展示类型更加丰富。 以实现一个 CodeGroup 组件(给它自定义标签为tp-codegroup),便于多语言代码展示。

    5K30

    夜幕下代码旋律:Vue 黑暗模式优雅实现

    于是,黑暗模式就像一位救星,在某个寂静深夜悄然降临。黑暗模式是什么? 简单来说,就是让界面的背景变黑,而文字和图标变亮,从而减少对眼睛刺激。...今天,我们要聊,就是如何在 Vue.js 中优雅地实现这个黑暗主题模式。2. 为什么选择黑暗模式选择黑暗模式理由多种多样,其中有些甚至有点令人捧腹大笑。...Vue.js 中实现黑暗模式方式Vue.js 提供了多种方式来实现黑暗模式,每一种都有它独特之处,就像烹饪一样,你可以根据个人口味选择不同“食谱”。...我们可不希望用户在页面跳转时,突然从黑暗模式切换到明亮模式,就像从一个幽暗隧道走进了一个光线刺眼房间。...问题:图片或图标在黑暗模式下看不清undefined解决方案:为黑暗模式设计特定图片和图标,或者使用 CSS 滤镜来调整现有图片亮度和对比度。

    31320

    【开源】2md:将复制内容、网页转成 markdown

    作为一个作者、程序员,兼知名 markdown 程序员,总是要在 Markdown、HTML、PDF 各种格式之间进行转换。...因为日常工作一些使用需要,也创建了各种轮子: 如 ebook-boilerplate 基于 markdown 一步生成电子书: 支持PDF、Mobi、EPUB格式。...MDPub 截图 今天,修复一个 MDPub bug 时,突然意识到我也有将一篇文章转为 Markdown 需要。...而,实际上,只需要一个 WYSIWYG 编辑器,然后再将内容转为 Markdown 就可以了。 因此,就有了 2md: ? 2MD 截图 一如即往,保持了简洁风格。...并且,它代码也足够简单: tinymce.init({ selector: 'textarea#input', height: 500, menubar: false,

    5.8K80

    WordPress 所有的 Dashicons 和其 CSS Class 以及 CODE

    Dashicons 是 WordPress 3.8 版本引进图标字体,在 WordPress 3.9 版本又增加了 30 个,在后台我们可以直接使用这些 Dashicons 图标,只要知道他 CSS...' ); function wpjam_load_dashicons() { wp_enqueue_style( 'dashicons' ); } 但是无论如何都要知道 Dashicons ...CSS Class 和 Code,为了方便自己和大家查询和使用,下面就列出所有的 Dashicons 和它 CSS class 以及 Code,欢迎大家收藏和转载: 后台菜单 - Admin Menu...图片 欢迎界面 - Welcome Screen 图片 日志格式 - Post Formats 图片 媒体 - Media 图片 图标编辑 - Image Editing 图片...富文本编辑 - TinyMCE 图片 图片 日志 - Posts 图片 排序 - Sorting 图片 社交 - Social 图片 WP 相关 图片 内部/产品 - Internal

    42330

    Vue项目中使用Tinymce

    /tinymce4.7.5/tinymce.min.js> 初始化 引入文件后,在html元素上初始化TinyMCE, 由于TinyMCE允许通过CSS选择器来标识可替换元素,所以我们只需要将包含选择器对象传递给...配置项 接下来就是添加配置项, 让TinyMCE编辑器功能丰富起来 基础配置 关于基础配置, 就不一一介绍,文档中都有详细说明,如果英语和我一样弱鸡,可以借助chrome翻译,大概能看明白。...但是却花费了一个小时来搞这个, 因为咋也粘贴不上, 所以不得不提一下这个坑:就因为chrome开发, chrome浏览器直接在文件中复制粘贴图片是无法粘贴上, 但是可以从微信输入框等地方粘贴上...,也能拖入, 暂时还没有进一步去做chrome浏览器粘贴兼容,后续有时间回去做....,接收并保存返回地址,大家可能会好奇为什么不在这里直接利用返回值替换图片地址呢?

    4.7K20

    如何构建你第一个 Vue.js 组件

    -2dc204bca514 译者:凉凉_ 记得当那天使用 CakePHP 开发时候,很喜欢它简易入门特性。...多年以后,Vue.js 上找到了同样感觉。然而,与 Cake 相比,Vue 文档还有一个缺点:(缺乏)真实项目教程。 不管框架文档有多好,对与所有人来说都是不够。...我们将在需要时介绍几个 Vue.js 概念,并介绍为什么要使用它们。 TL;DR: 这篇文章详细介绍了如何使用 vue.js为什么使用 vue.js 。...Vue.js 会编译好你组件并创建合适绑定。 这也是为什么您可以从模板访问组件上下文原因:因为指令绑定到视图模型。与具有单独 HTML 传统项目相反,模板是组件组成部分。...在 Vue.js 中,props 从父级传递给子级,而不是反过来传递,所以你不会改变父级状态。这将违背单向数据流原则,使事情难以调试。这就是为什么你不应该试图改变子组件内 prop。

    2.5K50

    架构图以及vue简介

    vue简单介绍 Vue.js 可以说是MVVM 架构最佳实践,是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。...vue双向数据绑定原理 Vue.js 是采用 Object.defineProperty getter 和 setter,并结合观察者模式来实现数据绑定。...zh/ vue项目说明 vue项目网上有非常多成名模板,推荐一个,想深入学习建议多多浏览下面的地址 vue和element构建后台前端解决方案:<https://panjiachen.github.io...                    # 静态资源 │   │── img                    # 图片 │   │── favicon.ico            # favicon图标...│   └── index.html             # html模板 │   │── Tinymce                # 富文本 ├── src

    6.2K40

    (小说版)【简历优化平台-2】四个部分初显现,上传按钮打头前

    和她第二次相识,为什么这么说呢?因为如果有一个人跟你从小就认识,一起玩了很多很多年,突然有一天消失了。...,这里已经下载过了,直接引入: 然后此时页面还有点小问题: 就是这个图标的问题,目前是个默认,可以通过引入自己提前准备好.ico图标文件,来改变: 效果如下:(没错,直接复制之前vue项目的...ico图标过来!...可惜是,bootstrap官方并未给出上传按钮漂亮样式。如果想强行更改这种上传按钮样式,需要代价不会很小,但是考虑到该功能会面向c端全体粉丝,所以尽量做好看一点。...决定去jquery之家平台样式库中碰碰运气:找到了一款还不错,下载地址:http://down.htmleaf.com/1801/201801241434.zip 注意,下载和本地化二次开发需要一定前端基础

    47730

    动效设计原理:从卡通动画到UI动效 - 腾讯ISUX

    举例来说,在Windows中,如果我们任务是:打开“电脑”中D盘,那流程是这样: 1.双击“计算机”图标; 2.图标扩展成一个窗口; 3.在窗口中选择D盘。...在这种情况下,第一步元素是图标,第二步元素是扩展窗口。界面之间跳转是非常突然且直接,且没有前后关联。如果用户第一次使用Windows,这样界面跳转需要理解一阵子。...例如,用户知道点击图标将打开一个窗口,但是突然变化(突然图标变成窗口)也会让用户迟疑。 卡通中动画效果,非常擅长于提供足够信息让观众理解。...动画中一些令人费解行为没有让用户感到困惑;动画人物并不会突然消失突然出现;动画在发生形状变化时非常自然。 动画提供了必要视觉线索,让人理解某个动作前后发生了什么。...3.为什么使用动画 为什么要在UI中使用动画?动画有2个特点可以解释其在UI设计中价值。 首先,由于卡通是艺术性,他们有超越现实能力。这个能力可以更有效传达信息。

    1.7K20

    动效设计原理:从卡通动画到UI动效

    举例来说,在Windows中,如果我们任务是:打开“电脑”中D盘,那流程是这样: 1.双击“计算机”图标; 2.图标扩展成一个窗口; 3.在窗口中选择D盘。...在这种情况下,第一步元素是图标,第二步元素是扩展窗口。界面之间跳转是非常突然且直接,且没有前后关联。如果用户第一次使用Windows,这样界面跳转需要理解一阵子。 ?...例如,用户知道点击图标将打开一个窗口,但是突然变化(突然图标变成窗口)也会让用户迟疑。 卡通中动画效果,非常擅长于提供足够信息让观众理解。...动画中一些令人费解行为没有让用户感到困惑;动画人物并不会突然消失突然出现;动画在发生形状变化时非常自然。 动画提供了必要视觉线索,让人理解某个动作前后发生了什么。...3为什么使用动画 为什么要在UI中使用动画?动画有2个特点可以解释其在UI设计中价值。 首先,由于卡通是艺术性,他们有超越现实能力。这个能力可以更有效传达信息。

    2.7K80

    ArcMap卡在加载界面、无法打开解决方法

    最近,突然发现ArcMap软件打不开了,每次双击快捷方式后其会显示如下所示加载界面,但是等待很久后加载界面消失,软件窗口却一直不弹出来。   ...此外,在电脑右下角图标区域,可以看到ArcGIS图标原本会出现一段时间,但是等ArcMap软件加载界面消失后片刻,这个小图标也就消失了。   ...1 删除模板文件   首先,找到ArcGIS软件安装路径。例如,当初选择了默认安装路径,因此就是如下图第一个红色方框所显示路径。   随后,找到路径中出现问题软件所对应文件夹。...4 配置Python环境变量   在电脑中,前面三个方法都没有任何作用。此时,突然想到前一段时间在配置一个C++ 第三方库时,在电脑环境变量系统变量中,新建了如下图所示两个变量。   ...这两个变量作用是,强制为电脑指明寻找Python路径。而这两个系统变量值所对应路径,当前指向是一个后来安装3.X版本Python,并不是ArcGIS软件所需2.X版本。

    2.1K20

    腾讯云:WordPress创建带缩略图文章内链

    格式即可调用。 比如,要显示5个内链文章,就直接写短代码: 做SEO多久才能看到效果? 个人提供SEO服务经历中最常被问到问题有两个。 第一个是,做SEO能保证关键词排名和流量吗?...不管网上什么地方什么人说能保证,都是坚持回答不能,哪怕咨询的人一脸鄙视转身就走。因为真的不能保证。...四、添加 TinyMCE 可视化界面下编辑器按钮 1)文本状态下添加快捷按钮 WordPress 默认内置TinyMCE 编辑器。...php } 效果如图: 其实文本按钮也没添加多少,也就二十来个吧,还都挺实用。...选择一个按钮图标。看了一下感觉图标不够丰富,没发现 Link 相关。如果支持 Font Awesome 图标就好了。 可选不太多,就选个 Magic 吧。。

    93730

    13个顶级免费所见即所得文本编辑器工具

    它支持70多种语言,认为这是你网站不错选择。...[https://alex-d.github.io/Trumbowyg/] TinyMCE TinyMCE 5是一款编辑器,它能让你灵活地编辑、添加或删除本程序中部分内容。...除了基本编辑器,那么发现它还提供了很多支持,更好用户体验,如添加评论,测试检查路径,提供优质图标和界面,检查拼写内容.........还发现了如何设置,添加或删除程序中函数文章…都是非常细致。...由于它是用纯JavaScript编写,因此你可以将其用于当今大多数现代前端框架。它还提供了许多有用工具,以及编辑图像,添加或编辑视频,添加图标,管理面板等。

    5.9K00

    新手看Mockplus2.3

    为什么要做这个变动呢?...这一次更新,Mockplus软件再次添加了近200个图标,对于设计者来说这些图标和选项添加将提供更多样选择,进一步减少了寻找、设计合适图标的工作。...就所发现,这一次版本解决了手机上键盘不消失问题和图片组件在手机上查看不清晰,以及复制粘贴可能会使交互目标丢失等问题。...在我看来,他这一次版本更新就好像是对所有的用户说“嘿,把你们麻烦交出来,来搞定他!”。他总是在不断适应用户需求,解决用户麻烦,而不是让我们不断学习使用它。这也是为什么喜欢它原因吧。...他专注让人又爱又恼,爱他不争名利决心,却也恼他不争名利初心。但也许就是因为他这种专注,会突然有一天,他在自己小路上蓦地回头一望,发现不知何时已然踏上了总统山。

    59270
    领券