News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

How to Add a BBcode panel ?

Started by essential, October 31, 2004, 07:15:26 AM

Previous topic - Next topic

essential

As the signature uses BBcodes, is it possible to add a BBcode panel (like when you make a new topic) on top of the signature textarea in the profil page ?
If it's possible, can someone please tell me how...

Thanks in advance.

It would be practical, as many users are not very familiar with those BBcodes  :-\

Peter Duggan

Why not just refer to them to this (ie its equivalent on your own site)?

essential

Well, it's just less convenient...
Much better with the panel  :D

But should it be difficult to add a BBcode panel ?

Oldiesmann

I'm not sure it would be very difficult, but it would require a lot of additional code and would take up a ton of space.
Michael Eshom
Christian Metal Fans

Peter Duggan

Quote from: essential on October 31, 2004, 08:52:20 PM
Well, it's just less convenient...

So how convenient does it need to be, given that writing/changing signatures isn't normally an everyday occurence?

Vanish

The answer to that, Peter, is as easy as the customer wants it to be. ;)

It never hurts to provide the same editing interface for all edit actions. Personally, I like it the way it is, but I'm not everyone.

Chris G.

You could, if I'm not mistaken, insert some HTML in one of the templates.  There's a comment that looks something like "// Show the signature box."  If you want to add the panel, you can probably insert it right there.

I would, however, suggest that you create a very limited panel--perhaps with only a few of the most used BBCodes.  May I inquire as to the nature of the panel?  In other words, will it involve buttons, or will it merely be an informational area?

essential

Quote from: Peter Duggan on November 01, 2004, 12:53:35 PM
Quote from: essential on October 31, 2004, 08:52:20 PM
Well, it's just less convenient...

So how convenient does it need to be, given that writing/changing signatures isn't normally an everyday occurence?

Yes indeed, but I did some little mod, and the signature field is actually a description field  ;D

essential

Quote from: Chris G. on November 01, 2004, 11:14:26 PMMay I inquire as to the nature of the panel?  In other words, will it involve buttons, or will it merely be an informational area?

I'd like to insert the buttons plz

[Unknown]

In Profile.template.php, find:
<textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols="50">', $context['member']['signature'], '</textarea><br />';

Add before:
<script language="JavaScript" type="text/javascript"><!--
function bbc_highlight(something, mode)
{
something.style.backgroundImage = "url(" + smf_images_url + (mode ? "/bbc/bbc_hoverbg.gif)" : "/bbc/bbc_bg.gif)");
}
// --></script>';

// The below array makes it dead easy to add images to this page. Add it to the array and everything else is done for you!
$context['bbc_tags'] = array();
$context['bbc_tags'][] = array(
'bold' => array('code' => 'b', 'before' => '[b]', 'after' => '[/b]', 'description' => $txt[253]),
'italicize' => array('code' => 'i', 'before' => '[i]', 'after' => '[/i]', 'description' => $txt[254]),
'underline' => array('code' => 'u', 'before' => '[u]', 'after' => '[/u]', 'description' => $txt[255]),
'strike' => array('code' => 's', 'before' => '[s]', 'after' => '[/s]', 'description' => $txt[441]),
array(),
'glow' => array('code' => 'glow', 'before' => '[glow=red,2,300]', 'after' => '[/glow]', 'description' => $txt[442]),
'shadow' => array('code' => 'shadow', 'before' => '[shadow=red,left]', 'after' => '[/shadow]', 'description' => $txt[443]),
'move' => array('code' => 'move', 'before' => '[move]', 'after' => '[/move]', 'description' => $txt[439]),
array(),
'pre' => array('code' => 'pre', 'before' => '[pre]', 'after' => '[/pre]', 'description' => $txt[444]),
'left' => array('code' => 'left', 'before' => '[left]', 'after' => '[/left]', 'description' => $txt[445]),
'center' => array('code' => 'center', 'before' => '[center]', 'after' => '[/center]', 'description' => $txt[256]),
'right' => array('code' => 'right', 'before' => '[right]', 'after' => '[/right]', 'description' => $txt[446]),
array(),
'hr' => array('code' => 'hr', 'before' => '[hr]', 'description' => $txt[531]),
array(),
'size' => array('code' => 'size', 'before' => '[size=10pt]', 'after' => '[/size]', 'description' => $txt[532]),
'face' => array('code' => 'font', 'before' => '[font=Verdana]', 'after' => '[/font]', 'description' => $txt[533]),
);
$context['bbc_tags'][] = array(
'flash' => array('code' => 'flash', 'before' => '[flash=200,200]', 'after' => '[/flash]', 'description' => $txt[433]),
'img' => array('code' => 'img', 'before' => '[img]', 'after' => '[/img]', 'description' => $txt[435]),
'url' => array('code' => 'url', 'before' => '[url]', 'after' => '[/url]', 'description' => $txt[257]),
'email' => array('code' => 'email', 'before' => '[email]', 'after' => '[/email]', 'description' => $txt[258]),
'ftp' => array('code' => 'ftp', 'before' => '[ftp]', 'after' => '[/ftp]', 'description' => $txt[434]),
array(),
'table' => array('code' => 'table', 'before' => '[table]', 'after' => '[/table]', 'description' => $txt[436]),
'tr' => array('code' => 'td', 'before' => '[tr]', 'after' => '[/tr]', 'description' => $txt[449]),
'td' => array('code' => 'td', 'before' => '[td]', 'after' => '[/td]', 'description' => $txt[437]),
array(),
'sup' => array('code' => 'sup', 'before' => '[sup]', 'after' => '[/sup]', 'description' => $txt[447]),
'sub' => array('code' => 'sub', 'before' => '[sub]', 'after' => '[/sub]', 'description' => $txt[448]),
'tele' => array('code' => 'tt', 'before' => '[tt]', 'after' => '[/tt]', 'description' => $txt[440]),
array(),
'code' => array('code' => 'code', 'before' => '
', 'after' => '', 'description' => $txt[259]),
'quote' => array('code' => 'quote', 'before' => '[quote]', 'after' => '[/quote]', 'description' => $txt[260]),
array(),
'list' => array('code' => 'list', 'before' => '[list][li]', 'after' => '[/li][li][/li][/list]', 'description' => $txt[261]),
);

// Here loop through the array, printing the images/rows/separators!
foreach ($context['bbc_tags'][0] as $image => $tag)
{
// Is there a "before" part for this bbc button?  If not, it can't be a button!!
if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;

// If there's no after, we're just replacing the entire selection in the post box.
if (!isset($tag['after']))
echo '<a href="javascript:void(0);" onclick="replaceText(\'', $tag['before'], '\', document.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// On the other hand, if there is one we are surrounding the selection ;).
else
echo '<a href="javascript:void(0);" onclick="surroundText(\'', $tag['before'], '\', \'', $tag['after'], '\', document.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';

// Okay... we have the link.  Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" border="0" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
// I guess it's a divider...
else
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
}

// 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+\']\', \'[/color]\', document.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0;" 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>';
echo '<br />';

// Print the buttom row of buttons!
foreach ($context['bbc_tags'][1] as $image => $tag)
{
if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;

// If there's no after, we're just replacing the entire selection in the post box.
if (!isset($tag['after']))
echo '<a href="javascript:void(0);" onclick="replaceText(\'', $tag['before'], '\', document.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// On the other hand, if there is one we are surrounding the selection ;).
else
echo '<a href="javascript:void(0);" onclick="surroundText(\'', $tag['before'], '\', \'', $tag['after'], '\', document.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';

// Okay... we have the link.  Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" border="0" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
// I guess it's a divider...
else
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
}

echo '


That should work... untested.

-[Unknown]

Amacythe

this has been requested before... twice

http://www.simplemachines.org/community/index.php?topic=14323.0

http://www.simplemachines.org/community/index.php?topic=13338.0

I still think it is a waste of space and time, but maybe you can get someone to mod it for you.

essential

#11
Quote from: [Unknown] on November 02, 2004, 12:14:10 AM
That should work... untested.

-[Unknown]

Tested and it doesn't work. I've got the panel but the buttons don't work (nothing happens when I click on it).
:-[

[Unknown]

Sorry, replace four times:

', $context['post_form'], '.', $context['post_box_name'], '

With:
creator.signature

-[Unknown]

essential

 :D YEAH It works !
Unknown, you're THE man !

Thanks a lot !

There's just a small tiny problem, but not too annoying though. It's when you type a word and select it and you click on one of the BB code button, the tags goes after the word, like this:
TEST[b][/b] and it should be:
[b]TEST[/b]

Weird  :o

Advertisement: