Tinymce Tiny MCE添加自定义HTML标记

我正在为MODx使用Tiny 4.3.3 我需要添加一个

<p class="classname">
 <em class="openImg"></em>
  Some randome Input text by the user
 <em class="closeImg"></em>
</p>

一些用户随机输入文本

我不介意是一个额外的菜单项还是在段落下拉菜单中。我只是希望尽可能少地花费时间

我试过这个，但不知怎么的，它不起作用

有谁能告诉我一个好的教程，或者告诉我如何在下拉菜单中添加一个图标或名称，以自动创建具有正确类的p和em标记？

---

谢谢

首先，您需要根据您的需要修改tinymce设置（将

em

添加到

valid\u元素

中，并将

em

作为所需标签的子项（可能

p

）添加到

valid\u子项

）

---

第二，您需要一个自己的插件，带有自己的下拉列表或按钮来插入此代码。

问题提出已经有一段时间了，但由于我目前也在做同样的事情，我想我会分享我在这方面的发现和解决方案。：/

我正在为一个工作中的测试项目扩展TinyMCE，我们的解决方案需要定制标签——在其中一些标签中，用户应该只能输入一行，而在其他标签中（如您的em）需要大量文本

为实现所需解决方案，需要执行的步骤：

• 使用两个配置关键字extended\u valid\u elements和custom\u elements告诉TinyMCE编辑器，您的元素是好的：

  tinymce.init({
  选择器：“文本区域#编辑器”，
  // ...
  扩展的有效元素：“emstart，emend”，
  自定义元素：“emstart，emed”，
  content_css：“editor.css”
  });
  

• 为开始和结束标记创建两个图像。我为示例emstart.png和emend.png命名了我的

• 为自定义元素创建自定义CSS样式，并将它们放入自定义CSS文件（在我的示例编辑器.CSS中，TinyMCE配置中指定的文件）：

  emstart{
  背景：url（emstart.png）不重复；
  背景位置：左-3px顶部-3px；
  填充：10px 10px 5px 10px；
  背景色：#aabbcc；
  边框：1个点#中交；
  高度：50px；
  宽度：100px；
  }

  校正{ 背景：url（emend.png）不重复； 背景位置：左-3px底部-3px； 填充：5px10px 10px 10px； 背景色：#aabbcc； 边框：1个点#中交； 高度：50px； 宽度：100px； }

• 编写一个自定义插件，输入新标签并将其放入插件目录。我给我的客户打电话：

插件代码：

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>');
        }
    });
});

编辑器现在如下所示：

源代码如您的示例中所示：

---

非常感谢！这样一个宝藏，我想知道为什么他们不把这样的例子放在医生…或者也许我错过了它？很高兴答案有用。至少在撰写答案时，我认为这更像是理解更大的图像，并将事实放在一起（并进行实验）-AFAIK文档中没有这样的示例。您好，目前我正在努力在编辑器中实现自定义Vue组件，例如

，它只是删除了所有内容，与vue指令相同，如

被剥离到

任何帮助。如果您愿意，您也可以邀请我进入聊天室。您好，我想问，您知道如何为角度组件执行此操作吗？我在代码中添加了this

tinymce.init（{selector:'.page'，inline:true，extended_valid_元素：“app my block”，custom_元素：“app my block”，}）

但tiny不将其视为组件。@qwerty检查元素是否在tinymce的init之前已在DOM中，不是tinymce已初始化，而是元素尚未存在。如果调用inity，init方法在何处/何时调用？是否已加载/创建完整页面？

    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",
     });