tinymce编辑器和vue集成的编辑器

最新推荐文章于 2025-06-04 11:39:49 发布

左撇子没秃头

最新推荐文章于 2025-06-04 11:39:49 发布

阅读量140

点赞数

文章标签：编辑器 vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_44191425/article/details/121139376

版权

本文探讨了从vue集成编辑器切换到tinymce编辑器过程中遇到的问题，特别是在处理复杂样式如内联样式和style标签时。为了确保样式正确显示，文章介绍了如何配置tinymce以支持特定的自定义标签，并通过修改源码实现工具栏样式和功能的定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下富文本编辑器的一些问题

一开始编辑器选用的是vue集成的编辑器，但是在页面抓取的时候发现不能显示table 的样式，所以选用了tinymce编辑器

但是tinymce编辑器在钓鱼链接抓取之后，可能抓取的代码里面涉及到内联样式或者写在style里面的样式，包括link的一些样式，tinymce无法识别，导致样式乱掉

所以在初始化的时候需要加上一个自定义标签显示的配置

custom_elements:“style,html,head,body,title,meta”,//允许自定义标签存在

因为产品需求，所以工具栏需要重新一下样式和方法，官网没找遍可以重写的地方，所以只能复制了一份源码进行修改，自定义插件放在static文件夹下面，然后引入使用。

这样一来需要注意的是，tinymce需要在window挂在一下，不然会报错，tinymce不存在

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

左撇子没秃头

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

tinymce 编辑器踩坑之旅----------自定义插件

weixin_44191425的博客

10-21

4674

先贴个官网地址 https://www.tiny.cloud/docs/ 最近开发项目中产品有很多需求，比如说在编辑器里面html代码，本来一开始用的是vue集成的那个编辑器，然后就发现，不能显示table！！！！样式无奈之下找了找好像tinymce这个编辑器可以满足，但是在此之前没用过，所以去通读了一边官方网址，了解了一些基本东西。然后开干最开始么肯定是先安装一下插件 npm install tinymce/tinymce-vue --save npm install tinymce --s

TinyMce介绍、环境配置与使用心得

06-26

4514

　　TinyMCE 是一个基于浏览器(例如MSIE或Mozilla)的强大的所见即所得的编辑器，它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的，比如在Intranets、CMS、LMS等系统中应用。　　特点

参与评论您还未登录，请先登录后发表或查看评论

tinymce编辑器之placeholder插件的实现

weixin_44191425的博客

11-22

2225

由于业务需要，产品希望编辑器的输入框也和input框一样有placeholder的提示，但是编辑器本身是没有这个功能的，所以我们要实现该业务，需要写个插件来实现。

tinymce引入后未显示_tinyMCE编辑器栏未显示

weixin_30983209的博客

01-17

544

I'm running Plone 4.1.4 and when I try to edit a text area that used to display the tinyMCE editor all I get is a dialog box listing a dict of "valid elements". I installed the kupu editor and that w...

vue 集成tinymce富文本编辑器

暮雪超霸

07-04

414

vue 集成tinymce富文本编辑器 安装使用npm安装或者官网下载 npm install tinymce -S 将node下的tinycme全部复制到static目录下或public目录下。然后在页面引入对应的js与css 语言包需要官网下载代码示例 <template> <div id="tinymce-editor">TinyMce Editor</div> </template> <script> import '../..

Vue使用Tinymce 编辑器

伐木小屋

12-25

2445

"微软雅黑='微软雅黑';方正舒体='方正舒体';方正姚体='方正姚体';华文彩云='华文彩云';华文仿宋='华文仿宋';华文行楷='华文行楷';华文楷体='华文楷体';华文隶书='华文隶书';此时还会报一个错，就是editimage下的language找不到，那就把上面的文件拿过来放到对应的位置即可，所以你会看到我的文件里还多了一个language。// 编辑器监听内容改变，和input的change事件不同，官网上解释是除了其他操作外，输入文字不会立即触发，而是只有焦点不在编辑器上是才会触发。

【Vue3知识】Vue3集成富文本编辑器TinyMCE

wendao76的专栏

03-30

1721

创建插件文件text: '自定义按钮',onAction: () => alert('点击自定义按钮')});});通过以上步骤，即可在 Vue 3 项目中快速集成功能丰富的 TinyMCE 编辑器，并支持高度定制化开发。如果需要手动修改翻译内容，可以编辑zh_CN.js'Redo': '重做','Undo': '撤销',// 其他翻译项...});通过以上步骤，TinyMCE 将完全显示为中文界面。

在vue3项目中使用tinymce编辑器

01-22

在Vue3项目中集成TinyMCE编辑器是一个常见的需求，特别是在构建富文本编辑功能时。TinyMCE是一款功能强大的开源富文本编辑器，它提供了丰富的API和插件，可以定制化满足各种复杂的编辑需求。本篇文章将详细讲解如何...

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

08-27

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。资源下载首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...

vue-tinymce-editor Vue2的Tinymce编辑器组件。-Vue.js开发

05-27

可以在此页面中查看演示和示例：演示和示例安装$ npm install vue-tinymce-editor如何使用从'vue'导入import Vue从'vue-tinymce-editor'导入tinymce Vue.component（'tinymce'， tinymce）您可以在标记中使用该组件 ...

vue2+element 集成Tinymce

qq_38388578的博客

02-19

2202

1、安装 cnpm i @tinymce/tinymce-vue tinymce --save 修改版本重装 "@tinymce/tinymce-vue": "^3.2.8", "tinymce": "^5.4.1", 2、封装Editor.vue组件 <template> <div class="tinymce-editor"> <editor v-model="myValue" :init="init" ...

vue/cli 4.5.8使用tinymce富文本编辑器无样式黏贴word表格

qq_39794423的博客

01-05

1659

vue/cli 4.5.8使用tinymce富文本编辑器无样式黏贴word表格tinymce版本第二步第三步组件封装第三步组件的引用第三步效果 tinymce版本附上链接 tinymce4.5.12 附上命令： npm install tinymce -S npm install @tinymce/tinymce-vue -S 由于没有指定版本所以命令执行完可以修改package.json文件指定依赖版本，然后删掉node_module文件夹，重新执行npm install重新安装第二步在pu

Electron-vite【实战】MD 编辑器 -- 系统菜单（含菜单封装，新建文件，打开文件，打开文件夹，保存文件，退出系统）

朝阳39的博客

05-30

759

在 const mainWindow 后。

十六、【前端强化篇】完善 TestCase 编辑器：支持 API 结构化定义与断言配置

最新发布

blues_C的博客

06-04

545

本文介绍如何改造前端测试用例编辑器TestCaseEditView.vue，以支持API测试的结构化定义与断言配置。关键改进包括：1) 更新TypeScript类型定义与后端模型同步；2) 重构表单界面，支持动态管理请求头键值对和多条断言规则；3) 提供用户友好的JSON请求体输入区域。

【unity游戏开发——编辑器扩展】EditorApplication公共类处理编辑器生命周期事件、播放模式控制以及各种编辑器状态查询

向宇

05-29

1303

本文介绍了Unity编辑器扩展中的EditorApplication类功能，主要包括编辑器事件监听、Unity安装路径获取以及播放模式控制三个方面。通过EditorApplication可以监听各类编辑器事件如播放模式变化、项目资源修改等；获取Unity安装路径信息；精确控制播放模式的进入、退出、暂停和单帧步进操作。文中提供了详细的代码示例，包括播放模式状态切换、延迟调用和自定义更新循环的实现，并展示了如何查询编辑器当前状态。这些功能为开发者提供了强大的编辑器定制能力，适合需要深度集成Unity编辑器的开发

Vim 支持多种编程语言编辑器

2501_91968881的博客

06-01

904

Electron-vite【实战】MD 编辑器 -- 文件列表（含右键快捷菜单，重命名文件，删除本地文件，打开本地目录等）

朝阳39的博客

05-30

897

根据搜索框的值 searchFileKeyWord 的变化动态计算 computed 过滤文件列表 fileList 得到 fileList_filtered ，页面循环遍历渲染 fileList_filtered。点击文件列表的文件名称，打开对应的文件。将文件从文件列表中移除（不会删除文件）文件搜索框的清空按钮点击事件。直接用 shell 打开。

深入了解Vue2和Vue3的响应式原理

2301_81253185的博客

06-01

948

想必大家在学习vue的时候都会有这样的疑问，自己在学习JavaScript的时候，不论要修改什么内容，只有在页面刷新的时候，我们的值才会发生更新变化，但是当我们在一个vue项目中进行一样的操作的时候，就可以实现实时的变化，这是为什么呢，这是因为vue当中可以实现响应式数据更新，什么是响应式数据更新？到底是通过什么来进行实现的呢？

vue3 el-input type=“textarea“ 字体样式及高度设置

往事知多少？

05-31

609

在Vue 3中，如果你使用的是Element Plus库中的<el-input>组件作为文本域（），你可以通过几种方式来设置字体样式和高度。

Vue.js实现的Tinymce富文本编辑器快速集成指南

对于开发者而言，将Tinymce编辑器集成到Vue.js项目中是一个简单直接的过程，通常包括引入Tinymce的JavaScript文件和CSS样式文件，然后在Vue组件中进行初始化配置。由于本资源提供了直接下载文件后放到项目中就能使用...