如何在同一页面上有两个不同配置的TinyMCE编辑器
在同一页面上拥有两个不同配置的TinyMCE编辑器，可以通过以下步骤实现：
- 引入TinyMCE库：在页面的头部引入TinyMCE的JavaScript库文件。
<script src="https://cdn.tiny.cloud/1/{API_KEY}/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>请将{API_KEY}替换为您自己的TinyMCE API密钥。
- 创建两个textarea元素：在页面中创建两个textarea元素，分别用于容纳两个不同配置的TinyMCE编辑器。
<textarea id="editor1"></textarea>
<textarea id="editor2"></textarea>- 初始化TinyMCE编辑器：使用JavaScript代码初始化两个TinyMCE编辑器，并分别指定不同的配置。
tinymce.init({
selector: '#editor1',
// 配置1
plugins: 'advlist autolink lists link image charmap print preview anchor',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
});
tinymce.init({
selector: '#editor2',
// 配置2
plugins: 'code table emoticons',
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code | table | emoticons'
});在上述代码中，selector属性指定了要将TinyMCE应用于哪个textarea元素，plugins属性指定了要加载的插件，toolbar属性指定了要显示的工具栏按钮。
- 自定义配置：根据您的需求，可以根据TinyMCE的文档自定义更多的配置选项，例如自定义按钮、样式、事件等。
这样，您就可以在同一页面上拥有两个不同配置的TinyMCE编辑器了。根据您的具体需求，可以根据TinyMCE的文档进一步了解和使用更多功能和配置选项。
请注意，以上答案中没有提及具体的腾讯云产品，因为TinyMCE是一个开源的富文本编辑器，与云计算厂商无关。
相关·内容
1回答
环境：JSP，tinyMCE编辑器
要求：我有一个页面，富文本编辑器必须在该页面上显示。如果检测到的语言是法语，则必须显示法语tinyMCE编辑器，否则必须显示英文。我已经在两个不同的javascript文件中初始化了tinyMCE，其语言为"en“和"fr”，我如何有条件地将javascript文件包含在同一个jsp中？
浏览 4提问于2011-06-17得票数 0
我需要从tinyMCE编辑器获得原始/文本格式。tinyMCE.activeEditor.getContent({format: 'raw'})
将完成这项工作，但我在同一个页面中有两个编辑器(当然，ids不同)。我需要计算window.onload上的字符，但目前我还没有集中精力的编辑器。tinyMCE.get('my_editor
浏览 0提问于2018-04-10得票数 1
它们目前是拖放可折叠元字段，使用剪贴器作为首选的富文本编辑器。从那以后，我相信wp_editor命令已经出现了，这可能会对我有所帮助。我的问题是:在WP的管理区域中，是否有可能在同一</e
浏览 0提问于2012-03-28得票数 0
回答已采纳
1回答
我使用作为HTML页面的WYSIWYG编辑器。但是，当我使用标签成语(如<#if condition>，<#else> in TinyMCE )时，当我从“代码视图”(简单文本区域)转到“设计视图”(WYSIWYG)时，它们就会受到破坏。Q1:是否有一种方法可以配置TinyMCE来处理这些标记，以便当我在编辑器和代码视图之间来回切换时，标记保持一致？Q2:还是(用不同的方式说同样的话) TinyMCE<
浏览 4提问于2016-10-13得票数 9
我有一个ASP.NET MVC项目和一个TinyMCE作为编辑器模板，但基本上问题是只显示了最后一个TinyMCE。{0}", i), })到目前为止，我已经尝试了不同的模式，不同的选择器，甚至降级到TinyMCE 3.0 -没有效果。我在控制台中得到的唯
浏览 2提问于2016-07-12得票数 0
回答已采纳
我正在尝试在页面加载时设置一些文本编辑器的内容。我对TinyMCE不是很熟悉，在某种程度上继承了代码。下面是我初始化编辑器的方式： // General options
mode: "exact",</tbody></table><br clear="all"
浏览 3提问于2011-01-05得票数 1
回答已采纳
我有一个页面，就像一个博客，有两个文本区域(TinyMCE编辑器)，每个编辑器里面都有预览按钮，我想知道如何在两个文本区域的编辑器外只有一个预览按钮，显示两个编辑器的内容。在这里搜索，我试着为每个编辑器、元素分开配置……但我不知道该怎么办。一个想法的图片：，有两个编辑器
浏览 1提问于2011-06-25得票数 1
回答已采纳
我在我的wordpress管理页面上有一个tinymce编辑器。我试图在tinymce文档中查找，但没有找到解决方案。我想在tinymce`s的"text“标签页中插入b-quote，del，ins，img，more，close标签按钮，如下所示： ? 我如何在json数组中做到这一点？
浏览 24提问于2019-01-24得票数 0
早上好,
问题是:我通过文本编辑器(WYSIWYG/TinyMCE)输入了一些文本，并在其他地方显示为posting。我们遇到的问题是，文本在显示为公告时会丢失其格式。在深入研究代码之后，我发现这是用strip_tags() + echo preg_replace()组合体完成的。带下划线和删除的文本是CSS样式，将代码(因为它保存在db表中)添加到strip_tags()列表中并没有解决问题。我的问题是:我可以修改现有的代码来解决这个问题，还是应该使用其他的
浏览 1提问于2012-07-05得票数 1
我正在使用tinymce为一个便笺功能生成一个编辑器。在页面上有一个新的便笺按钮，它重定向到包含通过tinymce生成的编辑器的页面。有人能帮我找出为什么这个问题只出现在一个新的</
浏览 5提问于2013-01-25得票数 0
1回答
我已经在我的tinyMCE应用程序中通过使用tinyMCe的最新版本(4.x)和最新版本的angular /ui-tinymce ()来设置tinymce。所有的代码都被缩小了。在我的应用程序中，一个页面上有多个tinyMCE实例(最多三个)，应用程序使用了角路由机制。
所有的设置都是正确的，编辑器工作(而且每个编辑器都有自己的
浏览 3提问于2014-10-20得票数 3
我在一个页面上有多个tinyMCE编辑器，我使用： ed.onKeyPress.add(function(ed, e) {//do stuff with ed.id }
这将注册事件，不管我是否处于全屏模式，这正是我想要的。但是，根据全屏模式是否处于活动状态，ed.id似乎是不同的。我想知道的是，在这个keypress事件运行时，如何获得对调用
浏览 3提问于2013-02-28得票数 2
我有一个页面，上面有多个TinyMCE编辑器。我希望其中一个有自动调整大小的插件加载，另一个我想保持固定大小。
有没有办法做到这一点？
浏览 0提问于2011-02-04得票数 10
回答已采纳
2回答
我正在做一个关于roundcube的新项目，在经历了长时间的不眠之夜之后，我设法在测试服务器上安装并配置了所有必要的软件。我可以登录到服务器并发送和接收消息，但问题是我在编写消息时无法看到TinyMCE编辑器。在main.inc.php文件中启用了以下参数：但是我仍然找不到编辑器。当我查看加载的compose
浏览 1提问于2012-04-17得票数 0
回答已采纳
HCL连接有，可以作为旧CKEditor的正式替代。我想知道安装了哪个版本。特别是在测试系统上，我不确定当前在哪个系统上安装了哪个版本。，它可以从浏览器控制台中的JS变量中获取："5.1.1"
但是它忽略了补丁版本5.1.1- XX ，是否有其他方法可以找到已安装版本的数据？
浏览 6提问于2020-04-16得票数 0
我在一个页面上有三个TinyMCE编辑器。我希望其中两个是可调整大小的，但不是第三个。是否可以仅为一个编辑器禁用调整大小句柄？
浏览 5提问于2017-03-02得票数 2
回答已采纳
我有两个在页面加载时加载的文本区域，这两个文本区域在同一个表行中。我的tinyMCE看起来像这样 mode : "textareas", });
出于某种奇怪的原因，只有第一个文本区域会被分配编辑器，而第二
浏览 1提问于2010-12-14得票数 3
回答已采纳
我一直在AngularJS应用程序中使用ui-tinymce指令，它工作得很好。我可以向编辑器提供语言、菜单等选项。现在ui-tinymce指令似乎不再能够使用指令中提供的选项(如language )设置编辑器。不确定问题出在哪里，但有一些原因，当ui-tinymce指令为指令所在的<textarea>调用tinymce.init()时，它忽略了这些选项。由于这是在使用RequireJS时发生的，这让我认
浏览 0提问于2018-05-11得票数 0
我的页面上有各种<div>，点击后，它们会转换为TinyMCE编辑器部分。因此，用户只需双击div，然后使用TinyMCE编辑其中的文本。我的问题是-在不实际选择文本的情况下在TinyMCE上运行<div>函数是可能的吗？我的意思是，我想实现以下用例：
<div>激活自身上的Ti
浏览 5提问于2012-12-19得票数 5
回答已采纳
2回答
如果我可以在我的网站上使用wysiwig HTML编辑器从我的硬盘上上传一张图片，那就太好了。像FCKeditor或CKeditor这样的编辑器提供了这个选项，但是图像只能被上传到一个文件夹，这个文件夹需要在'someconfig‘文件中指定。我需要wysiwig编辑器，在那里我可以动态地创建字符串与'uploadFolderPath‘，同时实现例如。在php代码中。类似于：$editor -> uplo
浏览 0提问于2011-03-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
