tinymce富文本一次性删除响应式监听不到问题

最新推荐文章于 2024-06-07 10:43:51 发布
最新推荐文章于 2024-06-07 10:43:51 发布
阅读量917 收藏
点赞数 1
文章标签： javascript vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67987829/article/details/129884711
版权

问题描述：使用了tinymce单个文字一个个删除可以监听到变化，文字全选后点击一次删除清空，发给后端的还是上一次删除前的值。

中间试了很多方法，包括监听键盘事件全选删除重新赋值、绑定的值重写watch监听（全选删除watch监听不到），还有很多人说的用ref获取tinymce组件赋值，都不行。

最后成功方法是在编辑修改提交前window.tinymce.get(this.tinymceId).getContent()重新获取到值赋值给给后端的那个字段就行了

m0_67987829
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tinymce富文本编辑器对控制文本中的内容键盘事件的控制enter失效，无法取消他的默认事件
Caroline_Yang的博客
11-05 2236
init_instance_callback : function(editor) { vm.clickEventInTinymce('tinymce_ifr'); }, 在这里个初始回调函数里，设置一些点击事件，发现keydown事件（包在了这个clickEventInTinymce方法里）捕捉到的enter事件return false;不生效，是因为在tinymce.min.js里有了这个键盘捕捉回调，把ent..
tinymce监听内容变化的解决方案
寂寥人生
05-18 4881
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..
vue tinymce清空内容
最新发布
reembarkation的博客
06-07 182
vue tinymce清空内容
elementui中清除tinymce富文本缓存
cmj8043719242的博客
06-28 1051
清除tinymce富文本缓存
tinymce富文本编辑器如何实现部分内容无法删除
byebukesi的博客
07-07 1142
上一篇文章讲了如何使tinymce部分内容无法编辑，那么当然也有特殊需求是如何使部分内容无法删除啦。
TinyMCE富文本编辑器
qq_43427385的博客
06-02 256
安装tinymce-vue npm install @tinymce/tinymce-vue -S 下载tinymce npm install tinymce -S 下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到public下新建的文件夹tinymce里，在下载中文语音包中文语音包 下载完解压之后的结构是： 封装一个Editor的组件: <template> <div class="tinymce-editor">
TinyMCE（富文本编辑器）
weixin_33691817的博客
02-28 96
效果预览：http://www.tinymce.com/tryit/full.php   [转]TinyMCE（富文本编辑器）在Asp.Net中的使用方法 转自：http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html TinyMCE 在Asp.Net中的使用方法其实挺简单的，从官方网站下载TinyMCE),然后将里面的j...
TinyMCE富文本编辑器资源包
02-23
TinyMCE是一款强大的开源富文本编辑器，广泛应用于网页内容编辑和内容管理系统中。这个"TinyMCE富文本编辑器资源包"包含了TinyMCE的最新版本——版本6的相关资源，旨在提供一个功能完备、易用且高度可定制的文本编辑...
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
Tinymce富文本框封装
02-23
富文本编辑器是网页开发中常见的一种工具，用于创建、编辑和格式化HTML内容，而Tinymce就是其中的一款著名开源富文本编辑器。Tinymce以其强大的功能、丰富的插件和良好的可定制性，被广泛应用于各种Web应用中。 ...
tinyMCE方法调用
03-19
tinyMCE方法调用
tinymce 富文本组件
05-17
**Tinymce 富文本组件** TinyMCE是一款强大的开源富文本编辑器，它提供了丰富的功能，使得在网页上创建和编辑复杂的HTML内容变得简单易行。TinyMCE以其高度可定制性和良好的跨平台性而受到开发者的青睐，广泛应用于...
tinymce 富文本编辑器导出插件
11-01
tinymce 富文本编辑器导出插件， 支持导出word 导出pdf,可通过配置修改下载文件名称
wangEditor在Vue框架封装及第一次鼠标全选删除不触发onchange事件决解
云淡风轻的博客
06-14 2251
封装一 vue封装wangEditor，带字数统计及字数限制 <template> <div> <div :ref="id" :wordNumber="wordNumber"></div> <div class="gl-word-number" v-if="isCount"> <span>字数统计：</span> <span>{{ count }} / {{ wo
tinymce在vue中使用
cxy_12345的博客
03-15 784
vue2.0环境 1、安装 npm install --save "@tinymce/tinymce-vue@^3" npm install tinymce -S 2、将node_modules文件夹中tinymce文件夹复制到static下 3、具体代码参考一下文件，注意路径参照自己的写 <template> <div class='tinymce'> <h1>tinymce</h1> <edit.
Tinymce富文本，赋值第二次数据更新，视图不更新问题
weixin_46443526的博客
12-07 6211
Tinymce富文本，赋值第二次数据更新，视图不更新问题 第一次监听改变了hasChange的状态，所以后面没有触发监听事件。 解决方法： Tinymce中的setContent()方法可以改变value
关于textarea监听换行输入内容并取值的操作
weixin_44312576的博客
12-02 1100
关于textarea当中，输入邮箱，通过换行来将不同的邮箱进行取值，并set到数组中。涉及取值赋值回显，取值处理后提交等完整功能代码
tinymce富文本编辑器 处理一行文本不同字体颜色
07-27
对于处理一行文本中不同字体颜色的需求，可以通过使用 TinyMCE 富文本编辑器的内置功能来实现。以下是一种实现方式： 1. 首先，在 HTML 页面中引入 TinyMCE 编辑器的库文件。你可以从 TinyMCE 官网上下载并引入相应的文件。 2. 在文本编辑区域的 `<textarea>` 标签上应用 TinyMCE 编辑器，例如： ```html <textarea id="myTextarea"></textarea> ``` 3. 在 JavaScript 中初始化 TinyMCE 编辑器，并设置相应的选项。在这个例子中，我们将使用 `content_style` 选项来设置不同字体颜色。例如： ```javascript tinymce.init({ selector: '#myTextarea', content_style: 'span.red-text { color: red; } span.blue-text { color: blue; }', }); ``` 这里我们定义了两个样式类 `red-text` 和 `blue-text`，分别用来设置红色和蓝色的字体颜色。 4. 使用 JavaScript 动态地向编辑器中插入带有特定样式的文本。例如： ```javascript // 获取编辑器实例 var editor = tinymce.get('myTextarea'); // 插入带有特定样式的文本 editor.insertContent('<span class="red-text">红色文本</span>'); editor.insertContent('<span class="blue-text">蓝色文本</span>'); ``` 这样，你就可以在 TinyMCE 编辑器中插入带有不同字体颜色的文本了。 请注意，以上只是一个简单的示例，你可以根据实际需求进行更复杂的样式设置和文本处理。同时，也可以参考 TinyMCE 的官方文档获得更多关于样式设置和其他功能的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值