tinymce - Tiny MCE adding custom HTML tags

Question

I am using Tiny 4.3.3 for MODx I need to add a

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

I don't mind if is an extra menu Item or is in the Paragraph dropdown menu. I just want the less time consuming work around possible.

I have tried this http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html but somehow this doesn't work.

Could anyone point me to a good tutorial or tell me how could i add a icon or name to the drop down menu that creates the p and em tags with the right classes automatically please? Thanks

Answer 1

It has been a while since the question was asked, but as i am currently making exactly the same, i thought i share my discoveries and solutions regarding this matter. :)

I am extending TinyMCE for a test-project at work and our solution needs custom tags - in some of them the user should be able to enter only one line, in others (as your em) a lot of text.

Steps to be done, in order to achieve the desired solution:

• tell the TinyMCE editor, that your elements are good using the two configuration keywords extended_valid_elements and custom_elements:

  tinymce.init({ selector: "textarea#editor", // ... extended_valid_elements : "emstart,emend", custom_elements: "emstart,emend", content_css: "editor.css" });

• create the two images for the opening and the closing tag. I named mine for the example emstart.png and emend.png.

• create a custom CSS style for your custom elements and put them in the custom CSS file (the one that is specified in the TinyMCE configuration, in my case 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; }

• write a custom plugin that inputs the new tags and put it in the plugins directory. I called mine customem:

plugin code:

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

The last step is to load your custom plugin to the editor (using the plugin and toolbar configuration option) and enjoy the result:

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

The editor now looks like this:

and the source like in your example: