Tinymce富文本，赋值第二次数据更新，视图不更新问题

最新推荐文章于 2023-05-11 15:43:29 发布
最新推荐文章于 2023-05-11 15:43:29 发布
阅读量6.2k 收藏 4
点赞数 1
分类专栏： 笔记 文章标签： html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46443526/article/details/110826311
版权

Tinymce富文本，赋值第二次数据更新，视图不更新问题
第一次监听改变了hasChange的状态，所以后面没有触发监听事件
第一次监听改变了hasChange的状态，所以后面没有触发监听事件。

解决方法：
Tinymce中的setContent()方法可以改变value
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
大家不知道我的这个oneKey是什么操作。。下面是我加的内容
在这里插入图片描述
该问题讲述的是点击第二或以上 的事件。。。点击第一次是可以正常赋值的。。

下面是点击一键生成后的值
在这里插入图片描述

吱吱-
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
tinymce 富文本编辑器在多个路由页面切换时不渲染内容且不能编辑要刷新才能正常显示解决方案
sw_onload的博客
09-08 5929
因为做的后台系统做了切换路由功能，使每个路由都keep-alive，使用tinymce编辑器时总是第一次打开渲染不出内容而且不能编辑，都要刷新下才能正常显示和编辑，百度找了许多方法，试了一遍后找到了对我的项目有效的办法： 首先就是给编辑器加上个key， <tinymce-editor :init="init" v-model="form.container" id="tinymce" :key="tinymceFlag"></tinymce-editor> data() {
tinymce 富文本编辑器 每次查看详情内容不更新问题
西卡卡的博客
04-07 1086
解决方法： 当tinymce 富文本编辑器放弹窗时 只有第一次打开弹窗的时候有初始化tinymce.init（）； 后面再次查看列表详情的时候打开弹窗没有初始化数据，所以 ，富文本编辑器的组件要让它v-if销毁与重建 就可以每次都重新初始化 赋予新的数据!!! ...
tinyMCE编辑器没有实时更新
也简的博客
12-17 1287
tinyMCE编辑器没有实时更新
Vue tinymce富文本数据回显不了问题
Lzy_o的博客
05-11 1746
tinymce富文本数据回显
tinyce编辑器第二次点击不了的问题
m0_62838929的博客
04-07 435
/ 随机生成0-99 的随机数，以防key一样，最开始我并没有定义这个参数，直接取form.id，然后发现点击编辑关闭，再次点击进来富文本里得内容就不显示了，而且不能点击和修改，这里就是因为点击第一次取的id和第二次取的id是一样的。首先我是引入了这个tinymceEditor,重点就是这两个参数。// 只需要在methods中添加这个方法就可以了。// 新建、编辑之后。
TinyMCE富文本编辑器资源包
最新发布
02-23
TinyMCE是一款强大的开源富文本编辑器，广泛应用于网页内容编辑和内容管理系统中。这个"TinyMCE富文本编辑器资源包"包含了TinyMCE的最新版本——版本6的相关资源，旨在提供一个功能完备、易用且高度可定制的文本编辑...
tinymce 富文本编辑器导出插件
11-01
tinymce 富文本编辑器导出插件， 支持导出word 导出pdf,可通过配置修改下载文件名称
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
Tinymce富文本框封装
02-23
富文本编辑器是网页开发中常见的一种工具，用于创建、编辑和格式化HTML内容，而Tinymce就是其中的一款著名开源富文本编辑器。Tinymce以其强大的功能、丰富的插件和良好的可定制性，被广泛应用于各种Web应用中。 ...
tinymce 富文本组件
05-17
**Tinymce 富文本组件** TinyMCE是一款强大的开源富文本编辑器，它提供了丰富的功能，使得在网页上创建和编辑复杂的HTML内容变得简单易行。TinyMCE以其高度可定制性和良好的跨平台性而受到开发者的青睐，广泛应用于...
vue中使用 tinymce 只有第一次打开时赋值有效问题
weixin_45595203的博客
11-03 1127
vue中使用 tinymce富文本编辑器 只有第一次打开时赋值有效问题已解决
layui使用tinymce富文本不可编辑、赋值、获取值
lizaiismy的博客
01-22 2356
富文本不可编辑添加红框内容即可。 富文本赋值：tinyMCE.activeEditor.setContent(“需要添加的内容”);
Vue Tincymce重新加载(init)，更新配置，自定义工具栏按钮
将小宁的博客
12-23 1429
1.富文本在初始化之后，更改配置参数，如何重新加载？ 假设需求是默认关闭顶部的工具栏，当富文本聚焦的时候再打开顶部的工具栏，代码如下： const init = { ...其他配置, setup: function(editor) { // 监听聚焦事件 editor.on('focus', () => { // 先删除插件 editor.editorManager.execCommand('mceRemoveEditor', true, edit..
tinymce监听内容变化的解决方案
寂寥人生
05-18 4999
tinymce.init({ language: 'zh-Hans', selector: '#fang_content', plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesamp..
tinymce富文本组件的主动赋值
Jeremy Liu的博客
02-09 1474
tinymce组件的可实现自定义富文本，同时也要实现将数据插入到组件文本域中。通过tinymce.activeEditor.setContent(val)给组件赋值
tinymce富文本一次性删除响应式监听不到问题
m0_67987829的博客
03-31 944
中间试了很多方法，包括监听键盘事件全选删除重新赋值、绑定的值重写watch监听（全选删除watch监听不到），还有很多人说的用ref获取tinymce组件赋值，都不行。最后成功方法是在编辑修改提交前window.tinymce.get(this.tinymceId).getContent()重新获取到值赋值给给后端的那个字段就行了。问题描述：使用了tinymce单个文字一个个删除可以监听到变化，文字全选后点击一次删除清空，发给后端的还是上一次删除前的值。
关于tinymce富文本第二次点击无法编辑，切换页面后无法点击，刷新页面可以点击
weixin_52031155的博客
04-27 5298
无法点击时： 可以点击： 说一说最近遇到的一个大大大BUG吧，如上图所示，我点击进去一个有富文本编辑的页面，这时候我是可以编辑的，第一次点击！随后我切到了别的页面，或者我再次点击同一个页面，这时候就无法编辑了！ 好，我不慌!我找啊找解决方法，网上都说是第二次点击的时候，它的init方法不行了，才怪！ 接下里说说我的解决方法，绝对有用！！！ 首先我认为我们使用的这个富文本就如同我们调用接口使用返回数据时，我们在渲染的时候v-for要带一个key值的是一样的。 我们第一次点击进去的时候，tinymce一切正常
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格式。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值