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

在metabox中使用wp_editor tinyMCE会导致离开页面时出现表单警告

的问题是由于浏览器的自动保存表单功能引起的。当使用wp_editor或tinyMCE编辑器时,这些编辑器会生成一些隐藏的表单字段,用于保存编辑器的内容。当用户离开页面时,浏览器会检测到这些隐藏字段的变化,并弹出表单警告,询问用户是否要离开页面。

解决这个问题的方法是禁用浏览器的自动保存表单功能。可以通过在表单元素上添加autocomplete="off"属性来实现。具体来说,在metabox中使用wp_editor或tinyMCE时,可以在生成编辑器的代码中添加这个属性,例如:

代码语言:txt
复制
$settings = array(
    'textarea_name' => 'content',
    'textarea_rows' => 10,
    'tinymce' => array(
        'toolbar1' => 'bold,italic,underline',
    ),
);
wp_editor('', 'editor_id', $settings);

在上面的代码中,可以在wp_editor函数的第三个参数中添加'tinymce' => array('setup' => 'function (editor) { editor.getElement().setAttribute("autocomplete", "off"); }')来禁用自动保存表单功能。

另外,如果你使用的是自定义的表单,可以在表单元素上直接添加autocomplete="off"属性,例如:

代码语言:txt
复制
<textarea name="content" autocomplete="off"></textarea>

这样就可以解决在metabox中使用wp_editor或tinyMCE时离开页面出现表单警告的问题了。

推荐的腾讯云相关产品:无

参考链接:

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

相关·内容

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

与上下文菜单项类似,上下文表单匹配内容谓词出现输入表单元素的项。上下文表单的一个示例是使用配置 { link_context_toolbar: true } 的链接插件。...当光标位于链接上,会出现一个上下文输入表单,允许快速更改 url 字段。...有关创建上下文表单的信息,可以参阅 : UI Components - Context forms. addContextMenu() 注册一个新的上下文菜单部分,该部分仅在匹配内容谓词出现,例如,光标位于表内...再次使用常规 DOM 方法克隆模板并将其附加到您的 shadow DOM 页面任何您喜欢的位置使用自定义元素,就像使用常规 HTML 元素那样。...哪该如何转化,还得再了解认识一下 tinymce tinymce 富文本编辑的数据 抽象为 ASTNode (可以直接看成tinymce官方自制简易版的DOM树),如打印出来如下图 既然有转换

5K30

离开页面前,如何防止表单数据丢失?

本文介绍了如何实现一个FormPrompt组件,在用户尝试离开具有未保存更改的页面发出警告。...下面是正文~ 今天的数字化环境,为涉及表单提交的 Web 应用程序提供最佳用户体验非常重要。用户常见的一个烦恼来源是由于意外离开页面而丢失未保存的更改。...使用 Prompt ,导航到主页路由时行为正确,但是当用户输入表单数据并进入下一步,确认对话框也会出现。这是不希望的,因为我们导航到下一步保存表单数据。...,并在尝试离开未保存更改的表单收到警告。...本文演示了如何创建一个 FormPrompt 组件,当用户尝试离开具有未保存更改的页面,该组件向用户发出警告

5.8K20
  • 表单开发』一次即通关的5个技巧

    表单提交或出错的Loading提示 业务场景:表单提交后没展示Loading导致问题:当请求request较久页面像是卡死了,没任何响应,用户体验很差。...造成问题:恢复为默认数据触发表单校验规则,因此会有显眼的警告“XX不能为空”。...解决方法: 一是避免关闭窗口恢复为默认数据 二是使用 resetFields将所有字段值重置为初始值并移除校验结果(但不能解决点编辑后再点新增,恢复为默认数据) 5....不小心点击关闭页面,要提示让用户确认 业务场景:当用户填写一个长表单,手误点了关闭页面或者点击去到其他页面导致问题:用户花时间填写的表单数据丢失,用户又要重新填一遍。用户体验大大降低。...(e.returnValue = "确定离开当前页面?")

    64420

    Django—第三方引用

    一、富文本编辑器 借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例,其它富文本编辑器的使用也是类似的。 虚拟环境安装包。...pip install django-tinymce 安装完成后,可以使用在Admin管理,也可以自定义表单使用。...url(r'^tinymce/', include('tinymce.urls')), ] View Code 接下来介绍Admin页面、自定义表单页面使用方式。...在数据库查询如下图: ? 模板显示字符串,默认进行html转义,如果想正常显示需要关闭转义。...上去 2.2 使用 按照配置,admin管理添加数据后,自动为数据创建索引,可以直接进行搜索,可以先创建一些测试数据。 1)booktest/views.py定义视图query。

    1.1K10

    【to B管理端】后台管理系统的消息反馈如何设计

    何时使用完结某个独立页面后的反馈(如:提交某个落地页表单一个操作区域或一系列操作完成之后的总体反馈(如:提交分步骤表单的某个表单某个操作点之后的反馈(如:点击关闭某个功能的结果反馈)...局部的表单操作,表单组件离开focus态立即判断输入是否合法,如果不合法,则立即在组件下方反馈错误提示: 3.2 全局反馈 操作后对整个页面会有影响的操作,结果反馈建议使用全局反馈来反馈 场景1...然后就会出现下面这样的页面: 其实页面强提示太多,视觉焦点反而不集中,提示效果也大大降低。...表单校验: 如图所示,CIDR填写内容范围广泛,若不及时告知错误原因,导致用户一直试错。...如主机过期等信息提示,当所有相同等级的信息都用这样的提示条反馈,用户页面出现相同的提示就会引起关注。

    1.4K43

    Django 2.1.7 使用富文本编辑器 tinymce

    富文本编辑器 借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例,其它富文本编辑器的使用也是类似的。 虚拟环境安装包。...pip3 install django-tinymce 安装完成后,可以使用在Admin管理,也可以自定义表单使用。.../', include('tinymce.urls')), # 导入tinymce应用的urls.py .... ] 到这里已经配置好了tinymce库的注册使用了,下面Admin后台使用。...Admin中使用富文本编辑器 1)assetinfo/models.py,定义模型的属性为HTMLField()类型。...----------------------------------------------------+------------+ 1 row in set (0.00 sec) mysql> 模板显示字符串

    1K20

    JavaWeb防止表单重复提交的几种方式

    一、表单重复提交的常见应用场景 网络延迟的情况下用户多次点击submit按钮导致表单重复提交 用户提交表单后,点击【刷新】按钮导致表单重复提交(点击浏览器的刷新按钮,就是把浏览器上次做的事情再做一次,因为这样也导致表单重复提交...(5)、提交后重定向到一个提交成功的页面 表单提交后跳转到另外一个成功页面。这样可以避免用户按F5导致的重复提交,浏览器也不会出现表单重复提交的警告,以及消除按浏览器前进和后退按导致的同样问题。...与此同时将token放到页面的隐藏input,发给浏览器。用户页面上提交带着这个token一块提交到服务端,服务端通过比对token的值。...(7)、cookie记录表单提交的状态 使用Cookie记录表单提交的状态,根据其状态可以检查是否已经提交过表单。...跟上一种类似,服务端生成token存入Cookie,表单提交将Cookietoken和服务端token比对。 (8)、数据库添加唯一索引约束 向数据库字段添加一个唯一索引。

    2.2K20

    最新iOS设计规范四|3大界面要素:视图(Views)

    一、动作表单(Action Sheets) 动作表单是一种特定的警示样式,它表示与当前上下文有关的两个或多个选择。较小的屏幕上,动作表单从屏幕底部向上滑动。...较大的屏幕上,动作表以弹出框的形式同时出现。 ? 执行潜在的破坏性操作之前,请使用操作表请求确认。如果是非破坏性的操作可以使用下拉菜单(控件的一种,后面会讲到)。...当浮层出现时,其他视图的交互行为会被禁止,直到浮层被取消/关闭。使用浮层所显示的内容要与当前页面的内容关联。例如:当你点击“操作”按钮,许多iPad应用会弹出一个浮层(如下图)。 ?...插入的分组样式常规宽度的环境效果最佳。因为紧凑的环境中空间较小,所以插入的分组表可能导致文本换行,尤其是在内容本地化时。 ? 设计规范 注意列表的宽度。...避免将索引与包含右对齐元素的表单结合在一起。索引一般通过大的滑动手势来控制的。如果附近存在其他交互元素,例如显示指示器,则在出现手势很难辨别用户的意图,并且可能激活错误的元素。

    8.5K31

    模态对话框-B 类产品设计细节:对话框 vs 抽屉

    说明:对话框和抽屉都是在当前页面之上覆盖出现的组件,让用户离开主路径的情况下,查看信息/提示/反馈,或快速执行某些的操作。两者的交互模式有类似之处,使用场景也有所重叠。...何时使用模态重要的警告使用,避免出现严重问题、或修正已出现的问题。例如:用户未保存就要关闭,弹出模态对话框提示用户保存。   2....抽屉的模态 vs 非模态   项目管理工具 Jira 的帮助文档入口页面右侧,点开后从右侧划入非模态抽屉展示内容,这样便于用户进行对照查看和操作:   搜索功能入口页面左侧的导航,点开后从左侧划入模态抽屉进行交互...模态抽屉 vs 气泡卡片   文档工具 ,产品功能和交互都很简洁轻量,没有出现对话框组件,文档插入图片或文件、编辑导航、导入文档等稍重的操作使用抽屉,而插入表情、标签等位置指向明确、操作很轻的使用气泡卡片...例如:为一个表单选择组件,从应用场景来看,对话框和抽屉皆可;从交互维度,该表单的填写需要参考表单的父级页面的内容,则确定选择非模态抽屉模态对话框,不需要再从长短考虑。

    1.8K20

    防止用户将表单重复提交的方法 原

    表单重复提交是多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次。 点击刷新按钮。...使用浏览器后退按钮重复之前的操作,导致重复提交表单使用浏览器历史记录重复提交表单。 浏览器重复的HTTP请求。   几种防止表单重复提交的方法 1.禁掉提交按钮。...提交后执行页面重定向,这就是所谓的Post-Redirect-Get (PRG)模式。简言之,当用户提交了表单后,你去执行一个客户端的重定向,转到提交成功信息页面。   ...这能避免用户按F5导致的重复提交,而其也不会出现浏览器表单重复提交的警告,也能消除按浏览器前进和后退按导致的同样问题。 3.session存放一个特殊标志。...当表单页面被请求,生成一个特殊的字符标志串,存在session,同时放在表单的隐藏域里。接受处理表单数据,检查标识字串是否存在,并立即从session删除它,然后正常处理数据。

    2K20

    JeecgBoot 2.4 微服务正式版发布,基于SpringBoot的低代码平台

    多表头导出,多出一列空白列issues/1513 tinymce第一次打开正常,页面切换后再切换回来内容空白且无法编辑issues/1507 抽屉式界面下方有一点奇怪的显示issues/1532 头部菜单样式...column "xxx" does not existissues/1680 Online在线表单开发,查询配置勾选“是否启用”,将会取消选中“页面配置”的是否查询选项issues/1669 online...访问权限控制 无法使用的问题issues/1740 online表单开发的权限控制使用报错issues/1733 online表单开发权限控制的勾选框没反应issues/1741 找不到jeecg-cloud-module...issues/1772 Mybatis-plus的IdType配置问题issues/1789 [popup相关]如何实现带动态参数的报表popup中使用issues/1666 当进入登录页,有一定几率出现验证码错误...依赖版本issues/1856 按部门选择用户控件问题issues/1871 怎么配置测试环境和生产环境啊issues/1815 所有页面都设置了缓存路由,已打开的tab来回切换不会刷新页面,但是新打开一个

    2.8K50

    Web测试检查清单

    众多的软件产品交易量不大都可以正常运行,但一旦交易量增大,会出现各种各样的问题,比如交易响应时间急剧增加甚至导致无法完成交易的情况,更严重的可能导致整个系统瘫痪。...表格是否显示了所有的部分,是否十分正确的排列,文字内容是否处于正确的位置 7、滚动条是否需要出现 2.2、数据验证 1、任何时候当输入非法数据,系统都不能表现糟糕 2、如果用户在产品使用过程删除...2、验证网页上的所有操作均可以通过键盘操作完成 3、面包屑导航是否存在 4、确保未保存当前页面离开页面有用户提示信息 3.2、链接 1、检查站点地图中的所有链接并查看是否存在损坏的链接 2、确保所有链接的目的地址跟标题描述相符...3.4、字体 1、确保整个网页产品字体设置的一致性 2、确保字体放大页面布局不被破坏 3、确保所有字体设置的易读性 4、确保不同类型内容同一页面显示尽量选用不同字体 4、内容、图片、按钮 4.1...,页面出现响应时间过长打开不开等 2、压力测试的区域包括表单、登陆和其他信息传输页面

    1.6K10

    如何让用户选择是否离开当前页面

    抄一个微信公众号的编辑器的类似功能场景来实现 为什么要让用户选择是否离开页面 如果用户填写了很多数据此时 不小心点了其他a标签或者关闭了浏览器,不做判断,那么用户数据直接丢了 梳理需求 离开页面方式,被...用户选择离开就要继续逻辑,反之则不离开 正式开始 首先要知道一个事件:onbeforeunload,MDN的说明是:当浏览器窗口关闭或者刷新触发beforeunload事件。...⚠️:HTML规范指出在此事件调用window.alert(),window.confirm()以及window.prompt()方法,可能失效 实践一下 微信公众号编辑器界面,输入一部分内容后,...参考微信公众号编辑器,如果你编辑了内容后(跟初始进入的数据不一致),而且你是通过页面内a标签跳转的,那么就出现弹窗确认) ?...❞ 实现思路讲解 组件初始化时候,深拷贝一份表单数据存入组件 当用户通过a标签离开页面,触发handlePrompt方法,存储离开的目的url,此时使用isEqual比较当前的数据和组件初始化的表单数据是否一致

    2.2K30

    对话框、模态框和弹出框看起来很相似,它们有何不同?

    但就这些组件而言,解释的差异就可能导致糟糕的用户体验。...您可以在对话框包含一个以 method="dialog" 提交的表单。该表单将在提交关闭对话框。 例子 插入链接对话框,其背后为暗色背景。...一个警告对话框出现,询问您是否真的想“离开”,不需要先“保存您的更改”吗。 特征 警告对话框始终是模态的,并且它们的焦点是固定的。它们也需要一个易于访问的名称。...但是如果它在 popover 或其中使用,它将只 popover 显示设置焦点 (如果 defaultopen 被使用,则可能在页面加载)。 为了定位弹出框,。...但是,他补充道:你的 ARIA 披露组件将不会拥有/的一些功能,例如页面内搜索 (Chromium 的内容包含页面内搜索查询触发其开放状态)。

    3.7K00

    xwiki功能-页面编辑

    简单模式 简单模式下点击“编辑”按钮后,XWiki将自动基本模式(WYSIWYG or Wiki)下编辑页面,而以表单形式的页面Form模式下(即页面使用#includeForm()宏)。...选择一个语法 在编辑页面,可以选择要使用的语法(见XWiki语法指南了解详细介绍)。wiki编辑模式下,可以右侧信息面板中选择当前页面使用的语法。...用XWiki 企业1.7开始,我们有2个所见即所得的编辑器,我们正在逐步淘汰旧的使用XWiki语法1.0的编辑器(基于TinyMCE)。...页面名称URL使用而标题是用来显示页面的简短说明。查看页面,标题是用来作为一个页面顶部的标题。 页面标题可以wiki或WYSIWYG模式下编辑文件进行设置。...因为你可以标题中使用任何wiki语法,如果一个页面没有设置标题(标题不强制要求),则显示该页面的标题,最上面的标题任何wiki标记会被呈现。

    2.1K10
    领券