Adding text centering

Dec 11, 2010 at 1:40 PM

Hi, first of all thanks for sharing this usefull tool.

I was trying to add text centering to the code, almost done but I don't know why it fails in some cases.


Here is what I did:

in index.html I created a new button with the action 'JustifyCenter' :

<button title="center" onclick="doClick('JustifyCenter');" type="button" style="background-image:url('images/align_center.jpg');"></button>

So the doClick function:

function doClick(command) { if (editorVisible) { ifm.contentWindow.focus(); myeditor.execCommand(command, false, null); } else { switch (command) { case 'bold': AddTag('[b]', '[/b]'); break; case 'italic': AddTag('[i]', '[/i]'); break; case 'underline': AddTag('[u]', '[/u]'); break; case 'InsertUnorderedList': AddTag('[ul][li]', '[/li][/ul]'); break; case 'JustifyCenter': AddTag('[center]', '[/center]'); break; } } }
Then in the function html2bbcode() I wrote the following sub:

rep(/<(?:span|div|p) (?:.*?)style="text-align:\s*?center.*?">([\s\S]*?)<\/(?:span|div|p)>/gim,"[center]$1[/center]");

and this for IE:

rep(/<P align=["|'|.]?(center)["|'|.]?>([\s\S]*?)<\/(?:P)>/gim,"[center]$2[/center]"); //IE
In the bbcode2html: rep(/\[center\]/gi, '<div align="center">');
rep(/\[\/center\]/gi, "</div>");


The rep function works well and the editor center the text and when I send the BBCODE to insert in a database works perfect.

When I want to update the text I show it in the editor, I recover it from the DB (in BBCODE format) and show it  with:

<textarea id="tbMsg" name="texto" style="height:150px;width:100%;"><?php echo $texto_obra; ?></textarea>

and the editor shows the text centered but if i update the text on the database (with no changes in the centering) it destroy the center format and only the center (bolds, italics ... work perfect)


So I suppose I'm missing something in the code.

Any ideas why can it be failing would be apretiated.



Dec 11, 2010 at 7:07 PM

Sorry, I just realized that


rep(/\[center\]/gi, '<div align="center">');
    rep(/\[\/center\]/gi, "</div>");

was incorrect. Instead this:

rep(/\[center\]/gi, '<div style="text-align: center;">');
rep(/\[\/center\]/gi, "</div>");

solved it



Now the problem is when I click on a Italic or Bold button and then click on the center button or vice versa, for example when I select all text, click on the Italic button and then on
the center button generate this code:

sdasda sdasd

instead of:
sdasda sdasd[/i][/center]

 I guess it's the way that the nevigator "inserts" the html code and then I'm not using well the rep function.

Again, any help would be apretiated



Jun 3, 2011 at 4:06 PM


I tried to add a custom button so that [cit] some text[/cit] becomes <div class="cit">some text</div> but it doesn't work. Everything checked 50 times - no success. Nothing happends when I click on icon.

Of course,  I added ".cit" to css file.


Actually I am trying to replace [quote][/quote] so that it formats quoted text instead of showing just bbcode tags around it.


Than I copied your example with [center] and it works. However, when I modify your example, it stops wotking. Mysticism...


Anyone can help to add this custom button.