验证多个TinyMCE编辑器
首先，确保您已经正确安装了 TinyMCE 插件，并激活了富文本编辑器功能。接下来，您需要按照以下步骤对多个 TinyMCE 编辑器进行验证：
- 安装和配置 TinyMCE
- 前往 TinyMCE 官网 (https://www.tinymce.com/) 下载插件。
- 将插件上传到 WordPress 插件目录。
- 在 WordPress 后台激活 TinyMCE 插件。
- 配置插件，例如设置媒体库 URL、允许使用的 HTML 标签等。
- 创建多个编辑器实例
- 使用 JavaScript 创建多个 TinyMCE 编辑器实例。例如：
var editors = [];
editors.push(new TinyMCE({
selector: '#editor1', theme: 'modern', plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media table contextmenu paste', 'save table textcolor colorpicker textpattern'], toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | print preview media | forecolor backcolor emoticons',}));
editors.push(new TinyMCE({
selector: '#editor2', theme: 'modern', plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media table contextmenu paste', 'save table textcolor colorpicker textpattern'], toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | print preview media | forecolor backcolor emoticons',}));
- 设置全局样式和插件
- 在 WordPress 主题的 CSS 文件中添加全局样式。例如：
body {
font-family: Arial, sans-serif;}
#editor1, #editor2 {
width: 100%; height: 200px; padding: 10px; box-sizing: border-box;}
- 如有必要，可以添加自定义样式。
- 在 WordPress 内容编辑器中添加 TinyMCE 编辑器
- 打开 WordPress 文章或页面编辑器（例如：Gutenberg），在您想要添加编辑器的地方，点击 "添加区块"，然后选择 "TinyMCE 高级编辑器"。
- 拖放 TinyMCE 编辑器到您想要的位置。
现在，您已经成功在 WordPress 中添加了多个 TinyMCE 编辑器。您可以根据需要进一步定制它们，使用 CSS 调整样式，添加更多插件等。
相关·内容
6回答
正在验证多个TinyMCE编辑器
jquery、validation、tinymce
我有一个具有多个TinyMCE编辑器的表单。有些编辑器是高级的，有些是简单的编辑器。我曾经在客户端使用过进行验证。我一直在通过添加以下代码来验证单个TinyMCE编辑器。$('#submit').click(function() {
var content = tinyMCE.activeEditor.getContent(); // get the content$
浏览 0提问于2012-04-25得票数 3
回答已采纳
6回答
如果tinyMCE编辑器是空的，那么我如何验证它呢？
javascript、jquery、tinymce、validation
我需要验证一个表单。这个表单有一些下拉列表和tinyMCE编辑器，我正在验证这个表单通过附加字符串“必填”后的每个字段，如果它是空的，但我无法验证tinyMCE编辑器，如果编辑器是空的，我尝试了一些东西
tinyMCE.get
浏览 16提问于2012-01-06得票数 12
回答已采纳
14回答
TinyMCE 4-删除()或删除()
jquery、tinymce
我正在使用，我想删除或销毁tinymce编辑器(页面包含多个编辑器)。还删除tinyMCE添加的类和ID。但保留可编辑内容tinymce.remove()tinymce.execCommand('mceRemoveControl',true,'.editable');我的编辑器类是.editable，我的页面中有不止一个编辑器
浏览 58提问于2013-07-20得票数 36
回答已采纳
1回答
TinyMCE onsubmit不填充文本区域。
javascript、forms、tinymce、tinymce-4、onsubmit
我已经对表单提交进行了javascript验证，但是当验证代码被触发时，编辑器文本区域是空的。所以我仍然得到一个错误“字段是必需的.”。我不明白TinyMCE是如何处理这一问题的，但这毫无意义。我用于js验证的事件侦听器位于scritps的末尾，但文本区域仍然是空的。
是否有什么触发因素迫使TinyMCE用提交的内容填充文本区域？
浏览 1提问于2017-07-08得票数 3
回答已采纳
1回答
Xval和Tinymce
asp.net-mvc、tinymce、xval
我在提交asp.net mvc表单时遇到了问题，该表单使用Xval进行验证，并在两个文本区域使用TinyMce作为编辑器。TinyMce编辑器是用新的tinymce jquery插件初始化的，如果我删除编辑器，表单验证和提交就能很好地工作。如果我第二次提
浏览 3提问于2009-10-19得票数 1
回答已采纳
1回答
TinyMCE在MVC和Umbraco中的AngularJS验证
html、angularjs、asp.net-mvc、tinymce、umbraco8
我无法让TinyMCE在使用MVC应用程序或Umbraco时使用下面的代码进行验证该按钮将被禁用，直到我在名称文本框中输入一些
浏览 8提问于2022-01-19得票数 0
1回答
jQuery TinyMCE和jQuery RSV是如何工作的？
jquery、validation、forms、tinymce
我使用RSV验证表单元素，使用tinymce将文本区域转换为编辑器。如何使用RSV验证文本区域？提前谢谢。
浏览 0提问于2010-03-18得票数 0
回答已采纳
1回答
错误消息使用laravel-jsvalidation插件不能与tinyMCE一起工作
validation、laravel-5、tinymce-4
", "id"=>"description", "autocomplete"=>"off" ] ) }}</div>2)如果laravel-jsvalidation插件有一些
浏览 0提问于2018-11-02得票数 0
1回答
将tinyMCE内容添加到序列化数组(WordPress)中
jquery、wordpress、tinymce
我在我的(WordPress)网站的前端有一个HTML表单，它有可能显示一个TinyMCE字段。对于表单本身，
浏览 4提问于2016-09-28得票数 0
回答已采纳
2回答
jQuery模式窗口中的TinyMCE 4
jquery、jquery-ui、tinymce、rich-text-editor
我正在jQuery模式对话框中加载TinyMCE富文本编辑器。问题是，如果我在窗口加载时初始化，那么对齐方式就不正确。如果我在模式窗口open函数中进行初始化，它会工作得很好。所以我可以看到两个编辑器。
来自TinyMCE 3.X的executeCommand在4.X中不能在关闭模式窗口时销毁编辑器。我想知道如何卸载TinyMCE编辑器，或者如何检测TinyMCE编辑器是否已经加载，以便我可以跳过第二次加载。//<
浏览 0提问于2013-07-08得票数 0
回答已采纳
1回答
tinymce触发器html验证
javascript、tinymce
我通过javascipt将html添加到tinymce编辑器中。在添加html之后，我想要tinymce使用内置的html验证器根据valid_elements来验证添加的html。我必须调用哪个js函数来运行验证？
浏览 3提问于2012-06-19得票数 2
回答已采纳
3回答
样式不适用于某些元素，图库在TinyMCE中消失，WP3.5
wordpress、google-chrome、tinymce、chromium、wordpress-3.5
我注意到Chromium/Chrome中有一个奇怪的bug，在一些编辑之后，一个或多个图库占位符(WP3.5中的相机和图片)消失了。/plugins/wpgallery/img/t.gif" data-mce-src="http://localhost/wordpress/wp-includes/js/tinymce/plugins/wpgallery/img/t.gif">
浏览 1提问于2013-03-30得票数 3
回答已采纳
1回答
TinyMCE -全屏模式查找调用编辑器
tinymce
我在一个页面上有多个tinyMCE编辑器，我使用： ed.onKeyPress.add(function(ed, e) {我想知道的是，在这个keypress事件运行时，如何获得对调用的tinyMCE编辑器的引用。例如,
在按键编辑器id = "TinyMCE_editor1“-点击全屏模式，和ed.id = "mce_fullscreen”。我想提到"TinyMCE<
浏览 3提问于2013-02-28得票数 2
1回答
在Wordpress中保存小工具后，TinyMCE消失
javascript、php、jquery、html、wordpress
但是在网上搜索了3天也没有结果之后，我决定自己问一下……这是我的第一个问题，当我添加一个新项目时，新项目中的TinyMCE被禁用，我无法单击按钮或在其中键入文本。控制台日志中没有错误。我的第二个问题是，当我保存小部件时，所有的TinyMCE-Editor都消失了，只剩下带有html代码的textareas。我在将wordpress编辑器添加到我的小工具时遇到了问题，所以我集成了
浏览 5提问于2017-02-10得票数 3
1回答
Vue与TinyMCE问题
vue.js、tinymce、vue-component
我正在尝试将编辑器集成到Vue应用程序中。从Developer控制台，我能够访问tinymce对象并对其进行操作。例如：上面的代码将替换TinyMCE编辑器中选定的文本。我想使用Vue内部的tinymce对象(在多个组件中)，但我不知道如何访问它。当我将上述代码输入函数时，所得到的确切错误是：错误'tin
浏览 3提问于2020-04-06得票数 0
回答已采纳
3回答
如何删除TinyMCE编辑器中的所有html？
jquery、tinymce
在TinyMCE编辑器中，当您删除"p“时，就像下面的代码一样。
如何去除所有的？tinyMCE.activeEditor.dom.remove(tinyMCE.activeEditor.dom.select('p'));
浏览 3提问于2012-10-24得票数 3
1回答
TinyMCE命令还是对象API？
javascript、api、tinymce
流行的TinyMCE富文本编辑器有一个直接与各种类交互的应用程序接口，它有一个基于“execCommand”和“execInstanceCommand”方法的基于命令的应用程序接口。
浏览 2提问于2009-10-01得票数 0
1回答
a.nativeSelection为空TinyMCE编辑器
javascript、tinymce
我的页面中嵌入了一个tinyMCE编辑器。有时它会加载find。其他时候它会抛出"a.nativeSelection is null“。
会出什么问题呢？
浏览 0提问于2012-09-25得票数 1
回答已采纳
2回答
集成响应式文件管理器-仅在最后一个TinyMCE编辑器中显示的图标
tinymce、tinymce-4
我有一个php页面与多个tinymce编辑器(文本区)与相同的类名和独立的id。我的问题是图像上传图标只在最后一个编辑器上显示，而不是在上面的编辑器中显示。我使用的是tinymce版本4.7.2。
浏览 27提问于2017-12-28得票数 0
2回答
加载两个文本时TinyMCE不起作用
tinymce
我的tinyMCE看起来像这样 mode : "textareas", });
出于某种奇怪的原因，只有第一个文本区域会被分配编辑器，而第二个文本区域则不会。
浏览 1提问于2010-12-14得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
