Adding Buttons for HTML Tags in BB code list on Reply and Message pages

[ElectricSquid]

Hi All!!

I've recently added a few HTML tags to the allowed list for Messages and Posts.
Now that I have the HTML tags working, I'd like to add a few simple buttons, or even a drop down list to the Reply and Message pages.

The Reply and Message pages are about the only thing I haven't messed with on my forum, so I'm a little lost as to how those buttons work. As you could imagine, to add a button... you know how it goes

The tags I have included are:  'ul', 'ol', 'li'
                                          'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
                                          and 'p'

I used this code here to get them to work [link] (and it works on 1.1.9, just in case you were wondering)


A little insight on the WHY behind using the Header and Paragraph tags in HTML...
According to Google, their web crawlers use the Header tags to figure out what the text is about. They also use the Paragragh tags in a similar fashion. For good user readability, and for good SEO, the Header and Paragraph tags should be used on important content.

Just using the Bold and Font Size BBcode tags doesn't quite cut it. This ends up becoming a Span tag with attributes when the page is formed for the user, or the crawler. This does nothing for our SEO. In fact, it may hurt us a bit.

So that's the why.

...and why do I need the buttons to go with that html?
Because sometimes I get lazy and would rather push a button than type out <h2></h2> and <p></p>


Any help would be appreciated.
Thanks, ElectricSquid

[ElectricSquid]

Through the creative reuse and hacking of some existing code, I figured out how to do it.
It's really easy.

For anyone else who would like it try this, first you need to add/allow extra HTML tags to be used in posts.
That easy modification is found here. (do this first or the following code will not work)
http://www.simplemachines.org/community/index.php?topic=312531.msg2073888#msg2073888
Special Thanks to member [SiNaN] for producing the code in the above link.

Once you've added the HTML tags you want to use, use the following code in Post.template.php

For ul, ol, and li HTML tags
FIND

Code Select Expand



      // Print a drop down list for all the colors we allow!
      if (!isset($context['disabled_tags']['color']))
         echo ' <select onchange="surroundText(\'[color=\' + this.options[this.selectedIndex].value.toLowerCase() + \']\', \'[/color]\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0; document.forms.', $context['post_form'], '.', $context['post_box_name'], '.focus(document.forms.', $context['post_form'], '.', $context['post_box_name'], '.caretPos);" style="margin-bottom: 1ex;">
                     <option value="" selected="selected">', $txt['change_color'], '</option>
                     <option value="Black">', $txt[262], '</option>
                     <option value="Red">', $txt[263], '</option>
                     <option value="Yellow">', $txt[264], '</option>
                     <option value="Pink">', $txt[265], '</option>
                     <option value="Green">', $txt[266], '</option>
                     <option value="Orange">', $txt[267], '</option>
                     <option value="Purple">', $txt[268], '</option>
                     <option value="Blue">', $txt[269], '</option>
                     <option value="Beige">', $txt[270], '</option>
                     <option value="Brown">', $txt[271], '</option>
                     <option value="Teal">', $txt[272], '</option>
                     <option value="Navy">', $txt[273], '</option>
                     <option value="Maroon">', $txt[274], '</option>
                     <option value="LimeGreen">', $txt[275], '</option>
                  </select>';



ADD AFTER

Code Select Expand



// START ===================
// ==== HTML List Items Dropdown List
echo '

<select onchange="surroundText(\'<\' + this.options[this.selectedIndex].value.toLowerCase() + \'>\n<li>\', \'</li>\n<li></li>\n<li></li>\n<li></li>\n<li></li>\n</\' + this.options[this.selectedIndex].value.toLowerCase() + \'>\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0; document.forms.', $context['post_form'], '.', $context['post_box_name'], '.focus(document.forms.', $context['post_form'], '.', $context['post_box_name'], '.caretPos);" style="margin-bottom: 1ex;">
                     <option value="" selected="selected">HTML Lists</option>
                     <option value="ul">bullet list</option>
                     <option value="ol">numbered list</option>
                  </select>';

// === HTML List Items Dropdown List
// END ===================






For h1, h2, h3, h4, h5, h6, and p
FIND

Code Select Expand



      // Print a drop down list for all the colors we allow!
      if (!isset($context['disabled_tags']['color']))
         echo ' <select onchange="surroundText(\'[color=\' + this.options[this.selectedIndex].value.toLowerCase() + \']\', \'[/color]\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0; document.forms.', $context['post_form'], '.', $context['post_box_name'], '.focus(document.forms.', $context['post_form'], '.', $context['post_box_name'], '.caretPos);" style="margin-bottom: 1ex;">
                     <option value="" selected="selected">', $txt['change_color'], '</option>
                     <option value="Black">', $txt[262], '</option>
                     <option value="Red">', $txt[263], '</option>
                     <option value="Yellow">', $txt[264], '</option>
                     <option value="Pink">', $txt[265], '</option>
                     <option value="Green">', $txt[266], '</option>
                     <option value="Orange">', $txt[267], '</option>
                     <option value="Purple">', $txt[268], '</option>
                     <option value="Blue">', $txt[269], '</option>
                     <option value="Beige">', $txt[270], '</option>
                     <option value="Brown">', $txt[271], '</option>
                     <option value="Teal">', $txt[272], '</option>
                     <option value="Navy">', $txt[273], '</option>
                     <option value="Maroon">', $txt[274], '</option>
                     <option value="LimeGreen">', $txt[275], '</option>
                  </select>';



ADD AFTER

Code Select Expand



// START ======================
// ==== ADDED HTML Header Dropdown List
echo '

<select onchange="surroundText(\'<\' + this.options[this.selectedIndex].value.toLowerCase() + \'>\', \'</\' + this.options[this.selectedIndex].value.toLowerCase() + \'>\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0; document.forms.', $context['post_form'], '.', $context['post_box_name'], '.focus(document.forms.', $context['post_form'], '.', $context['post_box_name'], '.caretPos);" style="margin-bottom: 1ex;">
                     <option value="" selected="selected">HTML Headers</option>
                     <option value="h1">h1</option>
                     <option value="h2">h2</option>
                     <option value="h3">h3</option>
                     <option value="h4">h4</option>
                     <option value="h5">h5</option>
                     <option value="h6">h6</option>
                     <option value="p">p</option>
                  </select>';


// === HTML Header Dropdown List
// END =================



[ElectricSquid]

Other HTML Tags
For other tags, a little custom hacking is needed. Here's how it's done...

FIND

Code Select Expand



      // Print a drop down list for all the colors we allow!
      if (!isset($context['disabled_tags']['color']))
         echo ' <select onchange="surroundText(\'[color=\' + this.options[this.selectedIndex].value.toLowerCase() + \']\', \'[/color]\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0; document.forms.', $context['post_form'], '.', $context['post_box_name'], '.focus(document.forms.', $context['post_form'], '.', $context['post_box_name'], '.caretPos);" style="margin-bottom: 1ex;">
                     <option value="" selected="selected">', $txt['change_color'], '</option>
                     <option value="Black">', $txt[262], '</option>
                     <option value="Red">', $txt[263], '</option>
                     <option value="Yellow">', $txt[264], '</option>
                     <option value="Pink">', $txt[265], '</option>
                     <option value="Green">', $txt[266], '</option>
                     <option value="Orange">', $txt[267], '</option>
                     <option value="Purple">', $txt[268], '</option>
                     <option value="Blue">', $txt[269], '</option>
                     <option value="Beige">', $txt[270], '</option>
                     <option value="Brown">', $txt[271], '</option>
                     <option value="Teal">', $txt[272], '</option>
                     <option value="Navy">', $txt[273], '</option>
                     <option value="Maroon">', $txt[274], '</option>
                     <option value="LimeGreen">', $txt[275], '</option>
                  </select>';




Add this code after (just like above, but this time you'll be editing it after you paste it.)
ADD AFTER

Code Select Expand



<select onchange="surroundText(\'<\' + this.options[this.selectedIndex].value.toLowerCase() + \'>\', \'</\' + this.options[this.selectedIndex].value.toLowerCase() + \'>\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0; document.forms.', $context['post_form'], '.', $context['post_box_name'], '.focus(document.forms.', $context['post_form'], '.', $context['post_box_name'], '.caretPos);" style="margin-bottom: 1ex;">
                     <option value="" selected="selected">Your Option Title Here</option>
                     <option value="Option1">Choice1</option>
                     <option value="Option2">Choice2</option>
                     <option value="Option3">Choice3</option>
                     <option value="Option4">Choice4</option>
                     <option value="Option5">Choice5</option>
                     <option value="Option6">Choice6</option>
                     <option value="Option7">Choice7</option>
                  </select>';


// === HTML Header Dropdown List
// END =================




The Custom Code Edit
Find the text "Your Option Title Here" in the code above
Replace text with whatever you want it to say on the dropdown list by default.
                                       (example, "Change Color" in the text color dropdown list.)
Find the text "Option1"
Replace with the text of the HTML tag.
                                       (example, "table" for the <table></table> code.)
Find the text "Choice1"
Replace with whatever you want the user to see for this choice.
                                       (example, "Insert Table Tag" as the choice for "Option1")
Add or remove as many options as you need by adding or removing "option values"
                                       (example, the code below.)

Code Select Expand



                     <option value="Option8">Choice8</option>