如何使用tinymce发布自定义html标记
TinyMCE是一款流行的富文本编辑器，可以用于在网页上发布自定义HTML标记。以下是使用TinyMCE发布自定义HTML标记的步骤：
- 引入TinyMCE库：在HTML页面中引入TinyMCE的JavaScript库文件。可以通过CDN链接或者本地文件引入。
- 创建编辑器实例：在页面加载完成后，使用JavaScript代码初始化TinyMCE编辑器实例。可以通过指定DOM元素的ID来选择编辑器的位置。
- 配置编辑器选项：通过配置选项，可以自定义编辑器的功能和外观。例如，可以设置编辑器的宽度、高度、工具栏按钮、插件等。
- 获取HTML内容：使用JavaScript代码获取编辑器中的HTML内容。可以通过调用编辑器实例的getContent方法来实现。
- 发布HTML标记：将获取到的HTML内容发布到网页上。可以将HTML内容插入到指定的DOM元素中，或者通过AJAX请求将内容发送到服务器进行保存。
以下是一个示例代码，演示如何使用TinyMCE发布自定义HTML标记：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
tinymce.init({
selector: "#my-editor",
height: 300,
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 | link image"
});
});
function publishContent() {
var content = tinymce.activeEditor.getContent();
// 将content发布到网页上或发送到服务器保存
document.getElementById("published-content").innerHTML = content;
}
</script>
</head>
<body>
<textarea id="my-editor"></textarea>
<button onclick="publishContent()">发布</button>
<div id="published-content"></div>
</body>
</html>在上述示例中，我们引入了TinyMCE的JavaScript库文件，并在页面加载完成后创建了一个编辑器实例。编辑器的位置由ID为"my-editor"的textarea元素确定。通过配置选项，我们设置了编辑器的高度、工具栏按钮等。点击"发布"按钮时，调用publishContent函数获取编辑器中的HTML内容，并将其插入到ID为"published-content"的div元素中。
这样，用户就可以使用TinyMCE编辑器发布自定义HTML标记了。请注意，这只是一个简单的示例，你可以根据实际需求进行更多的定制和扩展。
相关·内容
仅限EPiServer：我的问题是如何在TinyMCE 中配置EPiServer以允许自定义的HTML属性？我看不出我在哪里能够连接到TinyMCE
浏览 0提问于2012-07-09得票数 5
我正在尝试插入一些带有自定义按钮的自定义html，它的工作原理如下： editor.selection.setContent('<a href="example.com">Custom Link</a> 但是，当您尝试插入自定义标记时，当您单击自定义按钮时，它不会执行任何操作： editor.selection.setContent('<custom-link href="example.com&q
浏览 108提问于2020-07-27得票数 0
回答已采纳
5回答
我使用的是N2CMS，它使用TinyMCE来编辑HTML内容。它会剔除任何不符合其设置的内容。如果我添加一个自定义属性<a href="{0}" test="tester1" />，它只会删除它的自定义属性！如何禁用验
浏览 0提问于2011-08-15得票数 13
回答已采纳
如何在tinymce编辑器中允许html5数据属性？Tinymce移除指定给标记的自定义属性。我怎样才能阻止小叮当移除它呢？
浏览 1提问于2017-02-07得票数 0
我正在为TinyMCE和自定义标签而苦苦挣扎。我们正在构建一个自定义的内容管理系统，这是使用TinyMCE所见即所得编辑器。以下是我的设置： // General options width: "200",theme: "advanced",
cleanup_on_startu
浏览 3提问于2013-03-09得票数 2
回答已采纳
我的应用程序中有一套自定义标记，它抽象了一些公共系统任务。在TinyMCE中有什么简单的方法可以做到这一点吗？似乎自定义标记在TinyMCE中几乎不起作用。
浏览 2提问于2010-02-23得票数 3
回答已采纳
当我在press-this.php中为编辑器选择“超文本标记语言”(而不是“可视化”)时，我希望TinyMCE按钮像通过post.php添加/编辑帖子时一样出现。例如，当"HTML“处于活动状态时，以下是post.php中可用按钮的截图：如何在使用press-this.php时显示这些按钮？
浏览 5提问于2011-07-11得票数 1
如果在可视化编辑器中单击“增加缩进”，它会将以下代码添加到文本编辑器中：如何将其更改为不影响核心文件的text-indent: 30px;
浏览 0提问于2014-12-05得票数 3
如何不仅编码textarea中提供的内部文本，而且还编码根阻塞'p‘标记？alignjustify | table | bullist numlist outdent indent | removeformat',}
当我发布所有html标记被编码时，减去包装p标记
浏览 0提问于2019-01-03得票数 0
我正在尝试使用TinyMCE来获取要在标记中显示的代码语法，该标记将突出显示引用从下载的css和javascript的语法。我想知道的是如何在我发布的代码中维护标签。使用Tinymce的默认HTML代码插件，如果我只是简单地将标签封装在用户
浏览 9提问于2012-08-27得票数 1
回答已采纳
1回答
当我将内容添加到块体并将input format用作完整的html时，我确实发现了一种奇怪的行为。我的<b>标记正在被转换为<strong>标记。我真的无法正确获取样式。我正在使用TinyMCE 3.5.8模块进行完整的html.Could。有人能帮我解释一下是什么导致了这个操作吗？
浏览 4提问于2013-06-08得票数 1
1回答
我有一些定制的XML标记，我想在我的TinyMCE 4编辑器中使用它们。其中之一就是自我封闭。例如，这个'html‘是有效的： <param name="myParam" value="myValue" /></include>
根据允许这些自定义标记，我在
浏览 3提问于2016-09-15得票数 2
回答已采纳
1回答
我必须支持编辑将用于水晶报表的超文本标记语言内容，所以我将tinyMCE编辑器设置为使用特定的标记。我有以下格式自定义设置： . }但是，当我调用：
tinymce.activeEditor.setC
浏览 0提问于2018-05-04得票数 1
1回答
问题是，当我试图在简单的Textarea中加载该文本时，当我试图在TinyMCE编辑器文本区域中显示该文本时，它会在看到第一个"<“并显示如下内容时断开：
Thank you forTinyMCE不呈现标记。我不知道如何呈现自定义标记，它们不是<abc> </abc>标记。我们的系统将用基于标签的实际值替换"<SomeValue>"，并将电子邮件发送给客户端。我在j
浏览 9提问于2022-04-06得票数 0
我正在使用插件TinyMCE高级，经典编辑器和高级自定义字段专业。wordpress安装具有角色管理和测试角色。我将作为testrole登录，并将自定义html元素
当以管理员身份登录时，替换不会发生。当作为测试角色登录时，如何防止wordpress用
？
浏览 0提问于2019-04-11得票数 0
回答已采纳
3回答
tinymce.init({ theme: 'modern', 'advlist autolinkextended_valid_elements: '+*[*]', invalid_elements: '',
浏览 0提问于2016-07-03得票数 15
我想在新的post页面上添加一个按钮到tinyMCE编辑器。使用，我设法使按钮完美地工作，但有一些事情我无法弄清楚。当你插入一个“更多”标签时，一个图片会被适当的‘背景图像’附加到html中。--more-->的html注释。
我可以在html中添加图像，但是在“Text”模式下有一个img标记。
我想要这样的东西：<!--my-custom-tag-->
wordpress是如何做到这一点的？或者如何在tiny
浏览 6提问于2014-05-04得票数 6
回答已采纳
我知道forced_root_block选项将从TinyMCE Version6.0中删除。我使用这个选项来避免段落(生成br标记而不是p标记)。forced_root_block : false
我应该如何避免在即将发布的TinyMCE版本中出现白线？
浏览 1提问于2022-01-30得票数 0
回答已采纳
6回答
我在我的博客上使用TinyMCE，它似乎正在删除我试图粘贴的代码。我想补充如下： DefaultType application/x-httpd-php(这是.htaccess指令)DefaultType application/x-httpd-php
编辑:我正在使用Symfony形
浏览 5提问于2011-02-14得票数 1
回答已采纳
我想知道如何在tinymce中创建自定义函数。假设我的函数名为A。该函数插入表单html标记，如"，etc“。通过这个功能(按钮)，连HTML的任何标签都不知道的人，可以插入标签而不需要手动编辑文本。我想让A作为一个按钮出现在tinymce toolbar.My函数中，通过按下按钮，在人们编辑它的文档中插入一个HTML标签。那么解决方案是什么呢？
浏览 4提问于2010-06-10得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
