Forum closed. New forum available at http://community.wymeditor.org/

Adding h1 and h2 to toolbar

Support forum for WYMeditor.

Adding h1 and h2 to toolbar

Postby gices on Tue Sep 23, 2008 9:25 am

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?
gices
 
Posts: 2
Joined: Wed Aug 20, 2008 2:05 pm

Re: Adding h1 and h2 to toolbar

Postby mr_lundis on Tue Sep 23, 2008 7:53 pm

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.
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: Adding h1 and h2 to toolbar

Postby jfh on Thu Sep 25, 2008 8:19 pm

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
User avatar
jfh
Site Admin
 
Posts: 370
Joined: Sat Sep 23, 2006 8:43 pm
Location: Belgium


Return to Support

Who is online

Users browsing this forum: No registered users and 3 guests

cron