首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

隐藏DIV中的TinyMCE在打开两次时会关闭

是因为TinyMCE编辑器的初始化只能在页面加载时执行一次。当隐藏的DIV中的TinyMCE被打开两次时,第一次打开时会成功初始化并显示编辑器,但是第二次打开时由于已经初始化过了,会导致编辑器关闭。

为了解决这个问题,可以采取以下几种方法:

  1. 使用延迟加载:在第一次打开隐藏DIV时,延迟一段时间再初始化TinyMCE编辑器。这样可以确保第二次打开时编辑器能够正常初始化。
  2. 销毁和重新初始化:在每次隐藏DIV关闭时,需要销毁TinyMCE编辑器实例。然后在下次打开时重新初始化编辑器。这样可以确保每次打开都是一个新的编辑器实例。
  3. 使用单例模式:在页面加载时就初始化一个全局的TinyMCE编辑器实例,并将其保存在一个全局变量中。每次打开隐藏DIV时,直接使用这个全局实例进行编辑。这样可以避免多次初始化和销毁的问题。

总结起来,解决隐藏DIV中的TinyMCE在打开两次时会关闭的问题,可以采用延迟加载、销毁和重新初始化、使用单例模式等方法。具体选择哪种方法取决于具体的需求和场景。

关于TinyMCE编辑器,它是一款功能强大的富文本编辑器,可以用于网页开发中的文本编辑需求。它支持自定义样式、插入图片、表格、链接等功能,可以满足各种富文本编辑的需求。

腾讯云相关产品中,可以使用腾讯云COS(对象存储)来存储TinyMCE编辑器中上传的图片等文件。腾讯云COS是一种高可用、高可靠、低成本的云存储服务,可以满足各种存储需求。详情请参考腾讯云COS产品介绍:腾讯云COS

注意:以上答案仅供参考,具体的解决方案和腾讯云产品选择还需要根据实际情况进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【从零学习python 】51.文件打开关闭及其Python应用

文件打开关闭 想一想: 如果想用word编写一份简历,应该有哪些流程呢?...打开word软件,新建一个word文件 写入个人简历信息 保存文件 关闭word软件 同样,操作文件整体过程与使用word编写一份简历过程是很相似的 打开文件,或者新建立一个文件 读/写数据...关闭文件 1....打开文件 python,使用open函数,可以打开一个已经存在文件,或者创建一个新文件 open(文件路径,访问模式) 示例如下: f = open('test.txt', 'w') 说明: 文件路径...w+打开一个文件用于读写。如果该文件已存在则将其覆盖。如果该文件不存在,创建新文件。a+打开一个文件用于读写。如果该文件已存在,文件指针将会放在文件结尾。文件打开时会是追加模式。

11310
  • 三种插件开发模式,带你玩废tinymce

    此侧边栏容器附加到编辑器右侧,可以打开关闭。注册后,将创建一个具有相同侧边栏名称新工具栏切换按钮。...此外,还有一个 ToggleSidebar 命令和一个“ToggleSidebar”事件,可用于管理侧边栏打开/关闭状态。tinycomments 插件为其 Ui 组件使用侧边栏。...因为是自定义标签,并且是 tinymce 编辑器,所以出了这个编辑器,客户端浏览器可是识别不了, 所以需要想个办法 转换一下。...通过两个过滤器 ,针对自定义节点 加入对应转换逻辑,实现无论是在编辑器环境 还是客服浏览器中都能完美的渲染出来 Parser : 即 API tinymce.html.DomParser...tinymce 实例 Window 因为自定义节点是插入 tinymce 实例

    5K30

    vue富文本编辑器tinymce

    一、概述 TinyMCE是一款易用、且功能强大所见即所得富文本编辑器。...它使用了最新前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型业务模型,提供了丰富功能组件,它可以帮助你快速搭建企业级后台产品原型。...官方链接:https://panjiachen.github.io/vue-element-admin-site/zh/ 我尝试直接使用tinymce模块使用会有各种问题,打开页面无法加载出富文本编辑器或者出现其他问题...src\components目录下创建测试文件test.vue,此时:tinymce_demo项目src目录结构如下: ./ ├── App.vue ├── assets │   └── logo.png...选富文本过程,我也走了很多弯路。市面上常见富文本基本都用上了,我最终选择了Tinymce。请参阅更详细富文本比较和介绍。

    2.6K50

    WordPress自带TinyMCE编辑器相关功能增强

    WordPress 默认那个编辑器叫做TinyMCETinyMCE是一个轻量级基于浏览器所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好支持。...'); 添加更多HTML标签(慎用) 此功能请慎用,因为WordPress自带TinyMCE编辑器会默认过滤掉不符合XHTML 1.0html标签,不排除某些情况下也可能会用到这些标签,所以把方法放出来供大家参考吧...添加方法:将以下代码粘贴到主题functions.php文件里即可: WordPress自带编辑器强大往往被人忽略,很大程度上就是其隐藏编辑按钮默认情况下没有被显示出来而已。...设置方法:主题functions.php文件里添加如下代码即可: function fb_mce_external_languages($initArray){ $initArray['spellchecker_languages...、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),\n表示换行。

    2.8K50

    Vue富文本_ueditor编辑器

    使用复杂,属于前后端不分离插件,使用时需要配置后端一些东西。 bootstrap-wysiwyg bootstrap-wysiwyg:是bootstrap官网推荐。...Tinymce 官网:http://tinymce.ax-z.cn/ Tinymce:是国外一款富文本编辑器,开源可商用,免费!...vue-quill-editor 插入图片方式是将图片转为base64再放入内容,这样就会产生一个问题,如果图片比较大的话,富文本内容就会很大,这样,就会有两个问题: (1)内容存在数据库中一方面会占用大量数据库存储空间...当然也有解决方案:将图片上传到自己服务器或第三方服务,然后将获得图片url插入到文本。...基于这几款富文本编辑器特点,我选择了一款轻量级 wangeditor 项目中使用。

    3K20

    谷粒学院day08——课程章节与小节实现

    (1)配置html变量 配置文件\build\webpack.dev.conf.js中进行如下配置:配置html变量,这是为了使项目能够找到刚才复制插件路径。...一级分类页面对subjectOneList默认进行了初始化,但二级分类subjectTwoList没有。下面具体解决下,看下代码就可以更好理解这个过程了。...我们data设置它默认值为false,上面使使用了chapter,也进行下初始化。...实际上,实际开发,对于类似删除一二级分类一级分类问题,我们需要自己service层实现删除业务逻辑。...还有一个小bug,第二次点添加章节时,之前添加表单数据没有清空。解决如下。事件@Click改为绑定方法,方法清空数据。

    1.4K40

    tinymce 如何实现动态国际化

    tinymce 如何实现动态国际化 tinymce 是一个非常强大富文本编辑器,tinymce是支持开启通过配置 language 来决定 tinymce 语言版本 例如 下面配置 日文 英文...中文 且同一个页面 tinymce.init({ selector: 'textarea.tinymce', plugins: `code image imagetools media...否则只能得到 最后一个实例语言版本 但是问题来了 因为 tinymce 菜单面板 是动态生成 , tinymce 官方 这一块逻辑并没有考虑到 不同语言实例 同一页面,【具体,可以近似看成...原型链问题 】,所以菜单面板语言就会出现 生成是最后一个语言配置, 如下图 英文实例 菜单 生成 结果为中文 那么这个问题该 如何解决 解决方案就是 当鼠标 每个tinymce 实列上方,立即进行一次语言重置...= _language && editor.editorManager.i18n.setCode(_language) }; 解决方案 我已经集成 到了 Tinymce-plugin

    1.3K30

    WordPress主题开发,从入门到精通。

    () 函数启用它们,add_theme_support可以主题functions.php调用,如需hook调用必须在after_theme_setup调用; add_theme_support...esc_url() – 输出 URL 时,使用此函数,包括src和href属性 URL。 esc_js() – 对内联 JavaScript 使用此函数。...可以处理函数最终返回值上调用 do_shortcode() ,使 $content 包含简码也可以被解析。...(),设置被选中对象内容 windowManager,可打开一个新窗口或者对话框;https://www.tiny.cloud/docs-4x/api/tinymce/tinymce.windowmanager...,没有这个action了,任务还会继续,所有插件关闭时需要同步取消任务,同理表单开关也需要同步任务开启和关闭

    10.6K40

    Django 2.1.7 使用富文本编辑器 tinymce

    富文本编辑器 借助富文本编辑器,网站编辑人员能够像使用offfice一样编写出漂亮、所见即所得页面。此处以tinymce为例,其它富文本编辑器使用也是类似的。 虚拟环境安装包。...安装tinymce应用 1)项目/settings.py为INSTALLED_APPS添加编辑器应用。.../', include('tinymce.urls')), # 导入tinymce应用urls.py .... ] 到这里已经配置好了tinymce注册使用了,下面Admin后台使用。...: 4)打开python3环境目录,找到tinymce目录。...问:模板怎么关闭转义 可以参考Django 2.1.7 模板 - HTML转义 方式一:过滤器safe 方式二:标签autoescape off 1)assetinfo/views.py定义类视图

    1K20

    Vue富文本编辑器_前端富文本编辑器插件

    这两个组件安装完之后,public目录下新建文件夹static/tinymce,目录建好后(如果没有public文件,就在index.html同级static创建tinymce文件),找到node_modules...文件夹下tinymce/skins目录,将skins目录复制到我们创建static/tinymce文件夹内,如下图所示 2、配置中文语言 到官网下载中文语言包 zh_CN.js 刚才创建static.../tinymce文件夹内再新建langs文件夹,用来存放我们下载中文语言包,如下图所示 3、组件编写 新建一个组件,在此我把它命名为imcoder-tinymce.vue 组件我们引入tinymce...-- 富文本 --> init是tinymce...解决方案:src/assets下新建/tinymce/plugins目录,把下载插件解压缩放进去,然后引用进来,如下所示 这里我使用了行高插件和百度地图插件 // 扩展插件 import "..

    3.3K20

    Django—第三方引用

    一、富文本编辑器 借助富文本编辑器,网站编辑人员能够像使用offfice一样编写出漂亮、所见即所得页面。此处以tinymce为例,其它富文本编辑器使用也是类似的。 虚拟环境安装包。...'tinymce', ) View Code 2)项目的settings.py添加编辑器配置。...上去 1.3 显示 通过富文本编辑器产生字符串是包含html。 在数据库查询如下图: ? 模板显示字符串时,默认会进行html转义,如果想正常显示需要关闭转义。...模板关闭转义 方式一:过滤器safe 方式二:标签autoescape off 1)booktest/views.py定义视图show,用于显示富文本编辑器内容。...whoosh_cn_backend.py 6)打开复制出来新文件,引入中文分析类,内部采用jieba分词。

    1.1K10

    vue弹窗屏蔽滑动两种解决方案

    2019-5-28 任世界改变,我未时过境迁 序   开发过程,我们经常会遇到要加弹窗需求,而如果当前页展示数据一屏展示不完,则在打开弹窗后,有滑动操作时,页面也会随之滑动。...常见问题   我们开发过程,最常见问题上文已叙述:打开弹窗后,有滑动操作时,页面也会随之滑动。问题示意图如下: ? 最终效果 我们来看一波正确示范 ?...思路   首先,我们使用正常vue操作,比如刚才修饰符/语法糖进行操作时,虽然可以屏蔽掉背景数据滑动,但是该事件同时会将弹框内滑动也阻止掉,我们则无法完成该需求。...步骤分解如下: 写一个样式放到公共css备用; 点击按钮,控制弹窗显示隐藏; 两个方法,一个控制将步骤 1写css动态添加到 body上,另外一个则控制移除该效果; 添加方法:①获取当前页面距离顶部高度...备注 .modalOpencss样式,放在公共样式,因为我们要改变是body样式,因此组件样式可能会失效。

    1.9K10

    Vue项目中使用Tinymce

    嗯,就选它啦(虽然文档是英文,但是谷歌翻译也不错 ☚) 我们项目要解决需求说复杂也不复杂,但是却很烦人, 比如: 实现图片上传(基础功能) 模拟手机预览功能(基础功能) 编辑内容app显示要适配...构建, 将TinyMCE下载放在index.html同级目录下, 并在index.html引入TinyMCE 初始化 引入文件后,html元素上初始化TinyMCE, 由于TinyMCE允许通过CSS选择器来标识可替换元素,所以我们只需要将包含选择器对象传递给...TinyMCE.init(),代码如下: <textarea :id=...图片处理就告一段落~ 关于预览 TinyMCE配置了预览插件preview, 前面plugin.js也加入了, 但是我们需求是实现手机模式下预览, 所以还需要设置一下预览内容宽度以及高度 plugin_preview_width

    4.7K20

    WPJAM「用户管理插件」新增记录用户最后登录时间功能

    一键抓取公众号文章到 WordPress 博客 支持一键将文章图片下载到 WordPress 媒体库 搜索优化 支持限制和关闭搜索 WordPress 插件 编辑器优化 优化 WordPress...内容模板 通过短代码在内容插入一段共用内容模板,并且支持表格。...外部链接 将文章或评论外部链接加上安全提示中间页。 让用户确认之后再跳转,并还支持添加 nofollow rel 属性。 话题标签 文章插入 #话题标签#。...格式文章 WordPress 实现真正文章格式 草稿分享 一键生成草稿临时分享链接 并可设置分享链接有效期 文章专题 设置文章专题,并在文章末尾显示一个文章专题列表。...文章隐藏 设置文章列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置 Meta 数据: Post Meta,Term Meta

    1K20
    领券