使用tinymce富文本编辑器二次修改渲染问题

最新推荐文章于 2024-07-18 23:55:26 发布
最新推荐文章于 2024-07-18 23:55:26 发布
阅读量2.5k 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuai1999m/article/details/115897047
版权

首次修改后进入其他页面富文本编辑器，内容区显示都一样的：

  • 想了半天不知道为什么，此时就想到v-if组件，使组件创建销毁，默认布尔类型为true、进入页面后赋值false
  • 然后使用$nextTick让布尔赋值为true，此时在进入其他页面会发现，渲染数据是不一样了，但我输入的内容没有被动态绑定的value取到，然后我使用input事件，从新给value赋值，这样就好了、
  • 简单来说就是每次进入组件页面都是让富文本组件创建销毁，使之初始化
码小帅分帅
关注
tinymce 富文本编辑器在多个路由页面切换时不渲染内容且不能编辑要刷新才能正常显示解决方案
sw_onload的博客
09-08 5984
因为做的后台系统做了切换路由功能，使每个路由都keep-alive，使用tinymce编辑器时总是第一次打开渲染不出内容而且不能编辑，都要刷新下才能正常显示和编辑，百度找了许多方法，试了一遍后找到了对我的项目有效的办法： 首先就是给编辑器加上个key， <tinymce-editor :init="init" v-model="form.container" id="tinymce" :key="tinymceFlag"></tinymce-editor> data() {
在vue中使用tinymce富文本编辑器（踩坑记录）
AngelSum的博客
01-15 4662
在vue中使用tinymce富文本编辑器（踩坑记录）准备基础设置上传图片和视频vue中的双向绑定图片一直显示为相对路径编辑器中输入的光标一直在前面 在开始这篇文章之前博主还用了quill和wangeditor，都算是比较轻量级的富文本编辑器了，不过功能也是超轻量级！而且用起来也不方便，尤其是自己在使用wangeditor时为了上传视频弄好久，最后发现尺寸也不好改！终于遇见了tinymce 相见恨晚，tinymce算得上是所见即所得，想要什么功能就直接在配置里面加就好了，人家都写的好好的，废话不多说 直接开始
Vue3组件中如何获取已存在的TinyMCE实例并获取纯文本
最新发布
前面的区域以后再来探索吧
07-18 509
然后获取纯文本部分的代码也比较简单，由于已经将编辑器存储在editor对象中，所以使用editor.getContent({ format: 'text' })即可获取不带html标签的纯文本内容（否则，如果在父组件中直接访问editorContent，得到的结果将带有<p>等标签，不利于进行后端文本处理）。额外说一下，这里我还用到了defineExpose方法，这样可以将子组件中声明的属性暴露给父组件，从而在父组件中使用getPlainText函数。组件库在初始化编辑器时，会将编辑器实例添加到。
vue modal下tinymce 二次渲染失败
weixin_45503703的博客
10-21 2927
vue modal 标签下 form表单子项tinymce 富文本编辑器 第一次打开页面渲染成功，关闭后之后相关页面打开都渲染失败，富文本编辑器渲染成了底层的textarea标签 因为项目某一模块也引用了tinymce,并且也在modal下的form表单，但是功能正常。 相对比，不成功的模块只是外层多了个tab 尝试的方法 tinymce 绑定一个自增的key (失败) 尝试去掉tab（失败） 尝试在渲染页面时动态给一个key/id （失败） 尝试在页面关闭时手动销毁相关组件（失败） 尝试修改相关组件的
Vue2中ant-design-vue modal中使用tinymce富文本框二次打开后渲染失败
earthOLtainanwan的博客
01-11 1064
在Vue2中使用ant-design-vue的modal，刷新页面，第一次打开时正常，如下图。然后再切换回tinymce所在页面，打开modal后，tinymce渲染出现问题，如下图。当切换到其他页面（也有可能有其他触发BUG的方式，但目前只发现这种），如下图。打开modal设置为true，关闭modal设置为false。加上v-if判断条件。
vue3富文本编辑器的二次封装开发-Tinymce
SunnyRun
10-07 1348
1、安装：pnpm add tinymce / pnpm add @tinymce/tinymce-vue ===> Vue3 + tinymce + @tinymce/tinymce-vue2、功能实现图片上传、基金卡片插入、收益卡片插入、源代码复用、最大长度限制、自定义表情包插入、文本内容输入、预览等功能。
Vue中使用富文本编辑器tinymce及遇到的问题
weixin_39172079的博客
12-18 7824
vue中使用tinymce项目中使用tinymcetinymce富文本编辑器说明及效果示例安装tinymce代码实现页面引入tinymce及需要使用的组件![在这里插入图片描述](https://img-blog.csdnimg.cn/2019121817311378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow...
简单的富文本编辑器 .net
04-06
富文本编辑器通常会使用HTML和CSS来渲染文本，因此，对于.NET开发者来说，理解HTML和CSS的基础知识是必要的。在使用富文本编辑器时，开发者需要了解如何设置和获取HTML内容，以及如何处理用户输入的数据安全问题，...
富文本编辑器小技巧大杂烩之TinyMce
ITsmallchen的博客
06-10 2625
TinyMce富文本编辑器问题点总结 由于是第一次接触富文本编辑器，走过不少歪路，在这里另起一篇特别记录： 问题一、如何获取编辑器内容和回显编辑器 获取编辑器的内容： var content = tinymce.get('myTextarea').getContent(); 解析： myTextarea是编辑器的id 将数据回显到编辑器： $("#myTextarea").val('content') 解析： #myTextarea 是你创建的容器的id属性值 如果回显到其他普通的标签，也是一样的做
vue、element ui中使用组件比如tinymce或el-tree等二次渲染问题
VanCool
05-26 1449
记录一下用vue和element ui经常遇到的渲染问题 有时在页面初始化好组件后，修改了值保存需要再次打开组件，发现页面并没有重新渲染。这和vue的渲染机制有关， Vue中的nextTick涉及到Vue中DOM的异步更新。 需要在每次渲染前将组件置为false，等到$nextTick方法后置为true显示。注意nextTick放在回调函数中 <tinymce v-if="showIntroduction" v-model="introduction" :hei
用<pre>预格式化的文本
aoxiaochun1220的博客
10-09 265
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 提示:<pre> 标签的一个常见应用就是用来表示计算机的源代码。 转载于:https://www.cnblogs.com/XUYIYUAN/p/9758970.html...
TinyMCE-Vue组件销毁后无法初始化编辑器
this is it
03-18 2551
环境说明： tinymce-vue: 3.2.8 tinymce: 5.10.0 （使用<scripts>引入） antd-design-vue:1.7.8 问题背景及描述 使用antd下Modal封装tinymce富文本编辑器 具体层级为 Modal |-- Tab1 |-- Tab2 (包含tinymce-editor) ...
TinyMce富文本编辑器 在Vue3 vue-vite中使用，遇到的重载和加载空白问题
c1263779060的博客
01-04 1631
路由跳转后TinyMce富文本编辑器加载空白。el弹出框二次加载空白问题
vue中使用 tinymce 只有第一次打开时赋值有效问题
weixin_45595203的博客
11-03 1149
vue中使用 tinymce富文本编辑器 只有第一次打开时赋值有效问题已解决
vue富文本编辑器中样式冲突和不能修改的问题
qq_37622750的博客
12-21 2861
在vue项目中，富文本回显通常采用的是v-html指令来渲染html字符串。但是在回显的过程中，发现了一些问题，以此记录下来。 1.富文本（tinyMec）在编辑的时候采用的是iframe隔离，这样的话富文本中编辑的样式就是浏览器原生的样式。但是回显的时候，就会遇到项目中的全局样式所覆盖，导致所见不是所得。 解决： 通过 @import 将浏览器默认样式文件导入到v-html的页面中，并添加scoped 2.通过上一步操作，发现虽然v-html中的内容显示正常了，但是其它页面的样式也出现问题了。 查阅
vue中富文本回显问题（tinymce）
Codernmx
04-01 4236
this.$nextTick(() => window.tinymce.get('节点id').setContent('回显的值') );
第一次使用TinyMce的手记
lizhe10177的专栏
05-13 614
1、首先将TinyMCE解压缩，会建立如下的目录结构: 　　/tinymce/ 　　/tinymce/docs/ 　　/tinymce/docs/zh_cn/ 　　/tinymce/examples/ 　　/tinymce/examples/zh_cn/ 　　/tinymce/jscripts/ 　　/tinymce/jscripts/tiny_mce/
tinymce在keep-alive缓存中渲染错误的问题
lijiabin102的博客
11-13 1259
如果一个页面是处于被缓存状态，比如在keep-alive中 那么当同时出现2个页面中都含有tinymce时，比如下面的编辑公告和编辑活动这两个页面，都含有tinymce，而他们俩是可以点击tab来回切换的： 在来回切换这两个页面时，一个tinymce会出现渲染错误，比如这样： 解决方法： 在tinymce组件中，使用一个v-if，让该组件在activated和deactivated下不停的重新渲染。如下： activated和deactivated方法是在keep-alive中的页面使用的两个特殊
TinyMCE富文本编辑器CMS集成与图片上传教程
本文档详细介绍了如何在JavaScript开发中使用TinyMCE富文本编辑器解决CMS网站中的编辑器问题。作者提到，原系统采用的FCKEditor在插入图片时存在不便，因为所有用户共享同一文件目录。因此，TinyMCE编辑器因其易用性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值