Make js to print html instead of plain text

Question

I have made small plugin for timymce4, which add 1 more drop down menu with list of headers(eg h1, h2...) So what am i trying to do is to print these titles of elements with coresponding styles( <h1>Header H1</h1> ) but instead of html, im getting it in plain text. What am i doing wrong?

tinyMCE.PluginManager.add('headings', function(editor, url) {
    ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
        editor.addMenuItem("headers_" + name, {
            tooltip: "<"+name+">Заголовок</" + name+">",
            text: "<"+name+">Заголовок</" + name+">",
            onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
            onPostRender: function() {
                var self = this, setup = function() {
                    editor.formatter.formatChanged(name, function(state) {
                        self.active(state);
                    });
                };
                editor.formatter ? setup() : editor.on('init', setup);
            }
        })
    });
});                                    

Where am i wrong?

Answer 1

As far as I can tell TinyMCE doesn't allow for HTML menu items, not via addMenuItem — or at least I haven't been able to find any documented cases (The params description for the above method is quite useless) . Instead you may be interested in the following, it allows for setting new style formats and auto handles how they appear — I wasn't able to find how to create sub-menus within the formats button though, although I'm sure it must be possible:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
});
</script>
<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

http://fiddle.tinymce.com/uaeaab

If you were still interested in implementing you own bespoke way of adding HTML code to the menu I'm sure you could find the way TinyMCE is doing it for the above style_formats setting. However, it has been my experience with these JavaScript editors, that many of the more "advanced" API features are subject to change quite frequently; it is often best to stick with the documented higher-level API calls and settings.