微小的MCE添加自定义的HTML标签(Tiny MCE adding custom HTML tag

我使用的微型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标签吗？谢谢

Answer 1:

它已经有一段时间有人问，但我目前正在做完全一样的，我想我分享我的发现和解决有关此事。 :)

我在工作延长测试项目TinyMCE的，我们的解决方案需要自定义标签-在一些人的用户应该能够进入只有一条线，在其他人（如您的EM）大量的文字。

要做的步骤，以达到理想的解决方案：

告诉TinyMCE的编辑器，您的元素是好的使用两个配置关键字extended_valid_elements和custom_elements：
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>');
        }
    });
});

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

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

编辑器现在看起来是这样的：