tinymce富文本框踩坑

最新推荐文章于 2024-03-08 11:26:17 发布
最新推荐文章于 2024-03-08 11:26:17 发布
阅读量892 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaFnging/article/details/108655469
版权

tinymce富文本框踩坑

1.页面中需要多个富文本框时，每个富文本框的id必须做唯一标识，否则无法编辑
2.在tinymce富文本框需要做判断来显示时，谨慎使用v-if和v-show
v-if会使富文本框在弹出框/页面渲染前渲染，导致无法进行切换
在切换时选用v-show

onceEnding
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
tinymce vue 部分工具不显示_vue项目中使用tinymce富文本的踩坑经历（一）
weixin_39692761的博客
12-20 1974
在项目开发中，一般在后台管理系统会有编辑需求，那我们就需要使用到富文本这个东西。现在在写vue项目中就需要到富文本编辑器，所以给大家推荐一款富文本编辑器(TinyMCE)首先，下载编辑器依赖包npm install tinymce --saveoryarn add tinymce在需要用到编辑器的地方引入import tinymce from 'tinymce/tinymce'import Edi...
vue-element-admin使用Tinymce富文本插件的踩坑填坑
Queen-Shir的博客
07-29 6661
vue-element-admin项目的作者已经封装好了Tinymce富文本组件，我直接在Git上下载demo运用到自己项目里。 这是Git地址：https://github.com/PanJiaChen/vue-element-admin 一、Bug描述： （组件的代码和demo基本一致的前提下）我在编辑弹窗里引用了Tinymce富文本组件，如下图，table的每条数据都有一个“修改”按钮，每次点击“修改”按钮，则弹窗里显示该行对应的HTML。可是从第二次开始每次富文的内容都和第一次的一样，按道理不
tinymce富文本编辑器中文语言包
10-15
tinymce中文语言包，在项目中引入后，需要设置初始化参数：language: 'zh_CN'即可。
tinymce 富文本编辑器导出插件
11-01
tinymce 富文本编辑器导出插件， 支持导出word 导出pdf,可通过配置修改下载文件名称
一文完全掌握富文本编辑器TinyMCE
最新发布
吴智深的博客
03-08 3077
TinyMCE 是主流富文本编辑器，功能非常全，你需要的大多数功能它都支持，类似在线版的 Word。但它的优势也恰恰是它的劣势，如此之多的功能都放上来导致整个编辑器非常重，如果只是需要简单功能，上这么复杂的编辑器，大材小用。TinyMCE 对 Vue.js 的集成和安装非常友好，支持 Vue3 和 TypeScript，文档写的也非常好。
Tinymce富文本框封装
02-23
Tinymce富文本框封装
TinyMCE富文本编辑器资源包
02-23
TinyMCE 版本 6 富文本编辑器资源包
tinymce 富文本组件
05-17
tinymce 富文本组件
vue富文本tinymce踩坑记
qq_41490275的博客
08-19 6297
最近在搞富文本，经过对比我选择了tinymce，也遇到很多七七八八的问题，现在终于搞好了 第一、 安装 我现在的版本 “@tinymce/tinymce-vue”: “^3.2.2”, “tinymce”: “^5.4.2”, npm install @tinymce/tinymce-vue -S,npm install tinymce -S 第二、 从node_modules复制我们想要的东西 下载的时候可以先在static下面建个目录tinymce，下载tinymce完成后在node_modules
【超详细】vue项目：Tinymce富文本使用教程以及踩坑总结+业务需要功能扩展
weixin_55846296的博客
12-01 1万+
在Vue项目的开发过程中，经常需要使用富文本编辑器来处理用户的输入内容。 是一个功能强大且易于使用的富文本编辑器，它支持大多数常见的文本编辑功能，并且可以通过插件进行扩展。本文将详细介绍如何在Vue项目中使用Tinymce富文本编辑器
iview的Affix插件遇到滚动时候的bug处理方法
dianweifu7652的博客
04-04 739
最近有个需求，是用vue做的页面，其中嵌入了一个tinymce编辑器，编辑器设置了自动调整高度，也就是说编辑器中内容越多，高度就会自动撑高 我们需要再页面最下方放一个保存按钮，保存按钮必须固定在屏幕下方，本来想用position:fixed这种简单方法，但是业务比较特殊，不能这么用，无奈只能用position:absolute来 为了省去不必要的麻烦，就用了iview的affix组件...
超过屏幕高度没有滚动条解决方案
愤怒的苹果ext的博客
01-10 694
【代码】超过屏幕高度没有滚动条解决方案。
vue tinymce 富文本编辑器全量工具栏和图片上传功能
bianyingchao的博客
05-09 2425
在做 vue + tinymce 富文本编辑器的时候走了不少弯路，写篇文章记录一下。 先上图看整体效果 这是上传图片的窗口，有两个模式可以选择，普通上传需要具体的文件路径，上传可以上传本地的图片。 下面说一下具体的实现 1：安装tinymce-vue npm install @tinymce/tinymce-vue -S 2：下载tinymce npm install tinymce -S 3：在下载的时候我们在public文件夹下面新建一个tinymce 文件夹，下载完之后在 node_mod
【超详细】Tinymce富文本使用教程
热门推荐
we
06-10 2万+
官网文档：www.tiny.cloud/docs/ 社区版及开发版官方最新打包地址：www.tiny.cloud/get-tiny/self-hosted/ 汉化包：tinymce.ax-z.cn/static/tiny/langs/zh_CN.js例如： 获取内容：tinyMCE.activeEditor.getContent() 设置内容：tinyMCE.activeEditor.setContent("需要设置的编辑器内容") 获取内容：tinyMCE.
【富文本编辑器功能】vue实现富文本编辑器Tinymce功能，保留编辑器格式文章展示在页面上【前后端代码展示，简单好用】
seeeeeeeeeee的博客
04-01 1万+
前言： 这个Tinymce富文本编辑器是vue-element-admin内集成好的，使用过后体验非常不错，很简单易用。这里分享一下，同时又看到了网上帖子都没什么人写前后端同时展示的，很多人想知道编辑器编辑的文章格式展示在前端的。这里统一写一下前后端代码都展示，并配上注释，相信大家看起来会很清晰明了。 效果图 编辑文章的时候，我是直接百度搜了一个小说复制了一段直接粘贴来的，格式还可以自动保留 文章保存后，在页面展示格式也是存在的 编辑器样式：鼠标移上去都会有功能介绍，功能很全 安装步骤 1，git下载
JSON parse error: Cannot deserialize value of type
yaFnging的博客
09-17 1万+
做项目的时候遇到这个问题 JSON parse error: Cannot deserialize value of type `com.lqkj.gis.web.cmgis.modules.elasticsearch.domain.SystemType` from String "": value not one of declared Enum instance names: [cmphs, cmm7721, cmnet, org, cmmas, cms1719, zhuantitu, map, p
ERR_SSL_PROTOCOL_ERROR解决
yaFnging的博客
09-17 3221
在项目中对接接口出现ERR_SSL_PROTOCOL_ERROR 可能是http和https使用出错造成的 进行替换即可
element单选框前置文字
yaFnging的博客
09-17 1926
项目中遇到需求，需要单选框前置文字，一般是在单选框之后设置文字 <el-form-item label="资产首页是否默认显示标签："> <el-radio-group v-model="displayDefaultLabel"> <span class="colortip">显示：</span> <el-radio :label="true" default> <span st
vue tinymce 富文本框 表格转换成markdown格式 不正确
05-26
在Vue中使用Tinymce富文本框时，如果你尝试将表格转换为Markdown格式，可能会遇到一些问题。这是因为Tinymce中的表格在Markdown中的表示方式与常规表格不同。 Tinymce中的表格可以使用HTML标签来创建，如下所示： ``` <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> ``` 但是，在Markdown中，表格的表示方式是使用垂线（|）和破折号（-）来创建，如下所示： ``` | Cell 1 | Cell 2 | | ------ | ------ | | Cell 3 | Cell 4 | ``` 因此，你需要在将Tinymce中的表格转换为Markdown格式时，将其转换为正确的格式。你可以通过编写一些JavaScript代码来实现这一点。 以下是一个简单的例子： ```javascript function convertTableToMarkdown(html) { const tableRegex = /<table>([\s\S]*?)<\/table>/g; const trRegex = /<tr>([\s\S]*?)<\/tr>/g; const tdRegex = /<td>([\s\S]*?)<\/td>/g; html = html.replace(tableRegex, function(match, p1) { let rows = p1.split('</tr>'); rows.pop(); let markdown = '|'; for (let i = 0; i < rows.length; i++) { let cols = rows[i].split('</td>'); cols.pop(); for (let j = 0; j < cols.length; j++) { markdown += ' ' + cols[j].replace(tdRegex, '$1').trim() + ' |'; } markdown += '\n|'; for (let j = 0; j < cols.length; j++) { markdown += ' --- |'; } markdown += '\n'; } return markdown; }); return html; } ``` 这个函数接受一个包含HTML表格的字符串作为参数，并返回一个包含Markdown格式表格的字符串。你可以将它与Tinymce中的onChange事件一起使用，以在用户编辑表格时将其转换为Markdown格式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值