我正在为 MODx 使用 Tiny 4.3.3 我需要添加一个
<p class="classname">
<em class="openImg"></em>
Some randome Input text by the user
<em class="closeImg"></em>
</p>
我不介意是额外的菜单项还是在段落下拉菜单中。我只是希望尽可能减少耗时的工作。
我已经尝试过这个http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html，但不知何故这不起作用。
谁能指点我一个好的教程或告诉我如何在下拉菜单中添加一个图标或名称，以自动创建具有正确类的 p 和 em 标签？ 谢谢
【问题讨论】：
自从提出这个问题以来已经有一段时间了，但正如我目前所做的完全一样，我想我分享我关于这个问题的发现和解决方案。 :)
我正在为工作中的测试项目扩展 TinyMCE，我们的解决方案需要自定义标签 - 在其中一些标签中，用户应该只能输入一行，而在其他标签中（作为您的 em）很多文字。
要完成的步骤，以实现所需的解决方案：
使用两个配置关键字 extended_valid_elements 和 custom_elements 告诉 TinyMCE 编辑器您的元素良好：
tinymce.init({
selector: "textarea#editor",
// ...
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css"
});
为开始标签和结束标签创建两个图像。我将我的示例命名为 emstart.png 和 emend.png。
为您的自定义元素创建自定义 CSS 样式并将它们放入自定义 CSS 文件（在 TinyMCE 配置中指定的文件，在我的情况下为 editor.css）：
emstart {
background: url(emstart.png) no-repeat;
background-position: left -3px top -3px;
padding: 10px 10px 5px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emend {
background: url(emend.png) no-repeat;
background-position: left -3px bottom -3px;
padding: 5px 10px 10px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
编写一个自定义插件，输入新标签并将其放在插件目录中。我打电话给我的customem：
插件代码：
tinymce.PluginManager.add('customem', function(editor, url) {
// Add a button that opens a window
editor.addButton('customEmElementButton', {
text: 'Custom EM',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Please input text',
body: [
{type: 'textbox', name: 'description', label: 'Text'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>');
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('customEmElementMenuItem', {
text: 'Custom EM Element',
context: 'tools',
onclick: function() {
editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>');
}
});
});
最后一步是将您的自定义插件加载到编辑器（使用 plugin 和 toolbar 配置选项）并享受结果：
tinymce.init({
selector: "textarea#editor",
height: "500px",
plugins: [
"code, preview, contextmenu, image, link, searchreplace, customem"
],
toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton",
contextmenu: "bold italic",
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css",
});
编辑器现在看起来像这样：
以及您示例中的来源：
【讨论】：
<swipper :options="optionSet1"></swipper> 它只是删除了所有内容，对于像 <div v-swipr:swiper="set1"></div> 这样的 vue 指令也一样，被剥离为 <div></div> 任何帮助感谢您如果你愿意，也可以邀请我加入聊天室。
tinymce.init({ selector: '.page', inline: true, extended_valid_elements: "app-my-block", custom_elements: "app-my-block", }); 但tiny 不认为它是一个组件。
首先，您需要根据需要修改tinymce 设置valid_elements 和valid_children（将em 添加到valid_elements 和em 作为所需标签的子项（可能是p）到valid_children)。
其次，您将需要一个带有自己的下拉菜单或按钮的插件来插入此代码。
【讨论】：
您可以简单地使用模板插件添加一个或多个标签结构。
查看文档 https://www.tiny.cloud/docs/plugins/opensource/template/
查看交互式示例： https://codepen.io/gpsblues/pen/WNdLgvb
tinymce.init({
selector: 'textarea#template',
height: 300,
plugins: 'template code',
menubar: 'insert',
toolbar: 'template code',
extended_valid_elements: "emstart[*],emend[*]",
templates : [
{
title: 'emstart/emend',
description: 'Add a personal tag structure with personal tags <emstart></emstart> <emend></emend>.',
content: '<p class="classname"><emstart class="openImg"></emstart>Input text<emend class="closeImg"></emend></p>'
}
],
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px}'
});
【讨论】：