Adding h1 and h2 to toolbar

[gices]

Hi

Can somebody tell me how to add the h1 and h2 buttons to the top toolbar? I've read the custom layout of the documentation but i still can't make it work.

toolsItems: [
{'name': 'Bold', 'title': 'Strong', 'css': 'wym_tools_strong'},
{'name': 'Italic', 'title': 'Emphasis', 'css': 'wym_tools_emphasis'},
{'name': 'Superscript', 'title': 'Superscript',
'css': 'wym_tools_superscript'},
{'name': 'Subscript', 'title': 'Subscript',
'css': 'wym_tools_subscript'},
{'name': 'InsertOrderedList', 'title': 'Ordered_List',
'css': 'wym_tools_ordered_list'},
{'name': 'InsertUnorderedList', 'title': 'Unordered_List',
'css': 'wym_tools_unordered_list'},
{'name': 'Indent', 'title': 'Indent', 'css': 'wym_tools_indent'},
{'name': 'Outdent', 'title': 'Outdent', 'css': 'wym_tools_outdent'},
{'name': 'Undo', 'title': 'Undo', 'css': 'wym_tools_undo'},
{'name': 'Redo', 'title': 'Redo', 'css': 'wym_tools_redo'},
{'name': 'CreateLink', 'title': 'Link', 'css': 'wym_tools_link'},
{'name': 'Unlink', 'title': 'Unlink', 'css': 'wym_tools_unlink'},
{'name': 'InsertImage', 'title': 'Image', 'css': 'wym_tools_image'},
{'name': 'InsertTable', 'title': 'Table', 'css': 'wym_tools_table'},
{'name': 'Paste', 'title': 'Paste_From_Word',
'css': 'wym_tools_paste'},
{'name': 'ToggleHtml', 'title': 'HTML', 'css': 'wym_tools_html'},
{ 'name': 'Preview', 'title': 'Preview', 'css': 'wym_tools_preview' },
{ 'name': 'H1', 'title': 'Heading_1', 'css': 'wym_containers_h1' }
]

What's the name of the command for h1 that i need to replace (in the above code) or am i doing it the wrong way?

[mr_lundis]

Hello!

Unfortunately it wont work the way you do it, and to be honest with you - there's really no easy way of doing this at all.

So this is how it currently works:
The name attribute of a button tells the editor what to do, the issue here is that the name you have provided is not the name of a editor command - but the name of an editor container, and these are (at least for now) separate things.

The best way to enable this functionality at the, in my opinion, moment would be to implement it as an plug in. You can check out the Tiddy plug in an the bindEvents method in the WYMeditor source fore some inspiration.

However all this might change in the upcoming versions of WYMeditor, as version 0.6 will me a major rewrite.

[jfh]

There's a custom button example available in the package, or at:
http://files.wymeditor.org/wymeditor/tr ... utton.html

Actually you just need to add a button to the toolbar, and use the container() function from the API:

Code: Select all

<script type="text/javascript">

jQuery(function() {
    jQuery('.wymeditor').wymeditor({
   
        html: '<p>Hello, World!<\/p>',
        stylesheet: 'styles.css',
       
        postInit: function(wym) {

            //construct the button's html
            var html = "<li class='wym_tools_heading1'>"
                     + "<a name='Heading1' href='#'"
                     + " style='background-image:"
                     + " url(../wymeditor/skins/default/icons.png)'>"
                     + "Heading 1"
                     + "</a></li>";

            //add the button to the tools box
            jQuery(wym._box)
            .find(wym._options.toolsSelector + wym._options.toolsListSelector)
            .append(html);

            //handle click event
            jQuery(wym._box)
            .find('li.wym_tools_heading1 a').click(function() {
                wym.container('H1');
                return(false);
            });
        }   
    });
});

</script>


You'll have to do add a second button for H2.

0.6 will rather be a merge between current stable code and the new events/plugins architecture, which will facilitate interaction with the editor.

HTH