Vue弹框中使用tinymce只有第一次可使用

最新推荐文章于 2024-03-13 11:34:33 发布
最新推荐文章于 2024-03-13 11:34:33 发布
阅读量2.1k 收藏 1
点赞数 2
分类专栏： tinymce 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_C_sunny/article/details/123693205
版权

我在vue中使用tinymce
第一次打开页面初始化有效果
在这里插入图片描述

但第二次进入页面 初始化便无效 必须刷新页面才可以
在这里插入图片描述
以下是解决代码：

 <el-form-item label="富文本" prop="richText">
   <tinymce-editor v-model="form.richText" v-if="open" :key="form.id" :height="600" />
</el-form-item>

直接给一个唯一值就可以

Sunny
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Layui+TinyMCE编辑回显第一次能回显,关闭弹出层后再次打开就不能编辑,富文本支持从word复制内容
lin_Lobster_的博客
07-05 1531
前端框架使用的layui,富文本用的tinymce,项目中是在弹出新增或者修改页面的时候,才打开的富文本,所以我的富文本要在打开layui弹出页面后再加载出来.之所以关闭弹出层在打开不能使用,或者打开显示的内容一样,是因为富文本的容器没有销毁.所以要在调用方法的时候销毁容器. 新增的方法里面: 修改的方法里面: 重点是后面的方法,我把调用富文本的方法封装起来了,调用方法前先销毁容器,再创建. /*tinymce富文本*/ function init_tiny_mce(content){
tinymce 初始化后回调_Spring的destory回调你真的搞懂了吗？
weixin_39638086的博客
01-21 728
销毁回调Spring的初始化回调你真的搞懂了吗？ 接着前篇，有初始化对应着就有销毁。Spring提供了多种方式的销毁回调方法，这些方法在手动关闭容器的时候就会触发。销毁回调方式：后置处理器DestructionAwareBeanPostProcessor的postProcessBeforeDestruction()方法，此方式是对所有bean有效在类方法上使用@PreDestroy注解实现接口Di...
vue-element-admin 富文本TINYMEC - 编辑组件第二次打开出问题记录
weixin_37651366的博客
01-25 676
问题描述： 可对每行的内容进行编辑。第一次ID=1的编辑如下图： 打开ID=2之后内容el-dialog弹窗中内容为空白，但是后台传给前端的是有内容的。 后来百度之后发现以前也有人遇到过这种问题。再次记录一下前人的解决方式。 更详细的转致：我也是借鉴的此文章，感谢此文章的作者。vue-element-admin使用Tinymce富文本插件的踩坑填坑_Queen-Shir的博客-CSDN博客vue-element-admin项目的作者已经封装好了Tinymce富文本组件，我直接在Git上下载d
Vue弹框中使用tinymce只有第一次可使用，后续就获取不到光标，只有刷新后才能再次使用
qq_41154522的博客
08-04 2121
原因：在弹框出现之前tinymce就创建了 解决 在tinymce编辑器外层加v-if<div class="ruleDiv" v-if="editversion"> <editor v-model="myValue" :init="init" :disabled="false"></editor> </div> 在弹框version设置为true后，设置editversion为truethis.$nextTick(() => { th.
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
amoureux555的博客
04-12 2471
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
TinyMCE-Vue组件销毁后无法初始化编辑器
this is it
03-18 2505
环境说明： 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多输入框手动激活解决方案 (init()初始化 回调)
itomorrow的专栏
09-02 2509
昨晚弄那个TinyMCE编辑器，对于单输入框的时候还是比较好处理的，直接自动生成实例就激活了，但是当一个页面有多个输入框的时候就变得很复杂了。比如有三个四个的输入框，默认生成实例激活的话会很难看很乱，我们的目标是当一个输入框onfocus状态的时候激活TinyMCE编辑器，激活另一个输入框onfocus状态的时候，已激活的TinyMCE编辑器关闭，并在新的输入框中显示编辑器。 对于已经初始化
vue3中使用tinyMCE
07-01
在Vue3中使用TinyMCE，我们可以利用其强大的功能并结合Vue的新特性，如Composition API和setup语法糖，来实现更加灵活和高效的组件化开发。 首先，我们来看一下如何在Vue3项目中安装和配置TinyMCE。在解压后的文件...
在vue3项目中使用tinymce编辑器
01-22
以上就是在Vue3项目中使用带有汉化包的TinyMCE编辑器的详细步骤。通过灵活的配置和丰富的插件系统，你可以进一步定制编辑器功能，以适应不同项目的需求。同时，确保在开发过程中遵循最佳实践，以保证项目的可维护性...
vue项目中使用tinymce编辑器的步骤详解
10-18
### 第四步：在Vue应用中使用TinyMCE组件 在需要使用TinyMCE编辑器的Vue组件中，首先导入`Tinymce.vue`，然后在`components`对象中注册它。接着，你可以在模板中使用`<tinymce>`标签，并传递`v-model`来同步编辑器...
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
vue实现在模态窗中使用富文本编辑器Tinymce功能，保留编辑器格式展示在页面
weixin_45226511的博客
11-15 1058
vue实现富文本编辑器Tinymce功能，保留编辑器格式文章展示在页面上tinymce只有第一次可使用，后续就获取不到光标，只有刷新后才能再次使用。
tinyce编辑器第二次点击不了的问题
m0_62838929的博客
04-07 410
/ 随机生成0-99 的随机数，以防key一样，最开始我并没有定义这个参数，直接取form.id，然后发现点击编辑关闭，再次点击进来富文本里得内容就不显示了，而且不能点击和修改，这里就是因为点击第一次取的id和第二次取的id是一样的。首先我是引入了这个tinymceEditor,重点就是这两个参数。// 只需要在methods中添加这个方法就可以了。// 新建、编辑之后。
vue中使用 tinymce 只有第一次打开时赋值有效问题
weixin_45595203的博客
11-03 1094
vue中使用 tinymce富文本编辑器 只有第一次打开时赋值有效问题已解决
关于tinymce富文本第二次点击无法编辑，切换页面后无法点击，刷新页面可以点击
weixin_52031155的博客
04-27 5173
无法点击时： 可以点击： 说一说最近遇到的一个大大大BUG吧，如上图所示，我点击进去一个有富文本编辑的页面，这时候我是可以编辑的，第一次点击！随后我切到了别的页面，或者我再次点击同一个页面，这时候就无法编辑了！ 好，我不慌!我找啊找解决方法，网上都说是第二次点击的时候，它的init方法不行了，才怪！ 接下里说说我的解决方法，绝对有用！！！ 首先我认为我们使用的这个富文本就如同我们调用接口使用返回数据时，我们在渲染的时候v-for要带一个key值的是一样的。 我们第一次点击进去的时候，tinymce一切正常
Crmeb框架关于Tinymce组件在修改后，再次进入修改后不显示内容的解决
最新发布
weixin_43612593的博客
03-13 302
Crmeb框架关于Tinymce组件
vue-element-admin使用Tinymce富文本插件的踩坑填坑
Queen-Shir的博客
07-29 6753
vue-element-admin项目的作者已经封装好了Tinymce富文本组件，我直接在Git上下载demo运用到自己项目里。 这是Git地址：https://github.com/PanJiaChen/vue-element-admin 一、Bug描述： （组件的代码和demo基本一致的前提下）我在编辑弹窗里引用了Tinymce富文本组件，如下图，table的每条数据都有一个“修改”按钮，每次点击“修改”按钮，则弹窗里显示该行对应的HTML。可是从第二次开始每次富文的内容都和第一次的一样，按道理不
Vue 踩坑 tinycme富文本组件在dialog弹窗中的问题解决
Software As Business
07-17 4251
tinycme富文本组件在dialog弹窗中的问题应用场景问题和解决方案1.第二次打开弹窗时，富文本组件中的内容为空原因：此处就不贴图了，原因是在第二次dialog弹窗时，第一次弹窗的tinycme组件未销毁，因此先于第二次dialog出现，而第二次dialog中的传值也就后于富文本组件初始化，也就未被渲染了。解决方案：我的解决方案如下代码，只要保证富文本后于dialog初始化就行了，因此在富文本组件上添加 v-if即可简单解决2.弹窗中的富文本组件的工具栏点击无响应，具体如图原因：tinycme和dial
Vue3中使用Tinymce富文本编辑器
07-27
在Vue3中使用Tinymce富文本编辑器，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Tinymce和Tinymce-Vue的相关包。你可以通过运行以下命令来安装Tinymce-Vue版本3： ``` npm install --save @tinymce/tinymce-vue@^3 ``` 2. 在你的Vue组件中，引入Tinymce-Vue组件： ```javascript import { Editor } from '@tinymce/tinymce-vue'; ``` 3. 在你的模板中，使用Tinymce-Vue组件： ```html <template> <div> <editor v-model="content" :init="editorConfig"></editor> </div> </template> ``` 4. 在你的Vue组件中，定义Tinymce的配置项： ```javascript export default { data() { return { content: '', editorConfig: { // 在这里配置Tinymce的选项 } }; } } ``` 5. 根据你的需求，配置Tinymce的选项。你可以参考Tinymce的官方文档和中文文档来了解所有可用的选项。你也可以参考Tinymce-Vue在GitHub上的项目来获取更多示例和用法。 请注意，Tinymce-Vue版本4支持Vue3.0，而不支持Vue2.0。如果你的项目是Vue2.0，你需要安装Tinymce-Vue版本3。 希望这些信息对你有帮助！如果你需要更多的参考文档，你可以访问Tinymce的官方网站和中文文档，以及Tinymce-Vue在GitHub上的项目。 #### 引用[.reference_title] - *1* *2* *3* [在vue3.0项目中使用tinymce富文本编辑器](https://blog.csdn.net/mrjimin/article/details/121648927)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sunny

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值