18

我正在为 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 标签？谢谢

4

2 回答 2

58

自从提出这个问题以来已经有一段时间了，但由于我目前正在做完全相同的事情，我想我分享我关于这个问题的发现和解决方案。:)

我正在为工作中的测试项目扩展 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; }

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

插件代码：

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

最后一步是将您的自定义插件加载到编辑器（使用插件和工具栏配置选项）并享受结果：

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

编辑器现在看起来像这样：

在此处输入图像描述

和你的例子中的来源：

在此处输入图像描述

于 2014-03-05T22:02:45.653 回答
5

首先，您需要修改 tinymce 设置valid_elements和valid_children您的需要（添加em到所需的标签（可能）到valid_elements和作为子标签）。empvalid_children

其次，您将需要一个带有自己的下拉菜单或按钮的插件来插入此代码。

于 2013-03-14T13:02:57.097 回答