I have been using FCKEditor for about 3 days, so i am very green around the gills regarding this. And i am not really using phpBB, but i started using BBCodes in my CMS i set up for my own personal use, as i converted with my own version of phpBB based on 2.0 i really found BBCode as being a very powerful tool. ( i did all that prior to phpbb 3.0 coming out )
Anyway i know this might just become a future feature, but i went and extended the bbcode plugin to handle centering, right, left, font, color, and lists since it's so easy. My REGEX solution for lists is less than ideal but that is not used that much anyway. But it seems to actually work even though conceptually it seems like it should have problems, but running it twice is fine for now until i get something that works better. I very probably will be looking at extending it to handle code as well and quotes but i think the actual FCKEditor is what i need to adjust to have "Code" support.
I think this is the wrong topic, but i cannot post in the area reserved for BBCode itself. Note that i added support to phpbb 2.0 for Centering, Right and Left and support for the "rgb(255,255,255)" as a valid color definition. Just to make it meet things half way. Changes to phpBB 2.0 are in the comments at the top of the javascript which i think are enough for someone who knows a lot about phpBB, but would need more help for a novice.
Anyway, hopefully this helps someone else and feel free to use this or things based on this as you see fit.
/*
* FCKeditor - The text editor for Internet - http://www.fckeditor.net
* Copyright (C) 2003-2009 Frederico Caldeira Knabben
*
* == BEGIN LICENSE ==
*
* Licensed under the terms of any of the following licenses at your
* choice:
*
* - GNU General Public License Version 2 or later (the "GPL")
* http://www.gnu.org/licenses/gpl.html
*
* - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
* http://www.gnu.org/licenses/lgpl.html
*
* - Mozilla Public License Version 1.1 or later (the "MPL")
* http://www.mozilla.org/MPL/MPL-1.1.html
*
* == END LICENSE ==
*
*/
/*
// for the first pass
//[color] and [/color] for setting text color
$text = preg_replace("#\[color=(\#[0-9A-F]{6}|[a-z\-]+|rgb\(\s*\b[0-9]*\b\s*,\s*\b[0-9]*\b\s*,\s*\b[0-9]*\b\s*\))\](.*?)\[/color\]#si", "[color=\\1:$uid]\\2[/color:$uid]", $text);
//
// BEGIN Center BBCode MOD --------
//
$text = preg_replace("#\[center\](.*?)\[/center\]#si", "[center:$uid]\\1[/center:$uid]", $text);
//
// BEGIN Right BBCode MOD --------
//
$text = preg_replace("#\[right\](.*?)\[/right\]#si", "[right:$uid]\\1[/right:$uid]", $text);
//
// BEGIN Left BBCode MOD --------
//
$text = preg_replace("#\[left\](.*?)\[/left\]#si", "[left:$uid]\\1[/left:$uid]", $text);
// for the second pass
// colours
$text = preg_replace("/\[color=(\#[0-9A-F]{6}|[a-z]+|rgb\(\s*\b[0-9]*\b\s*,\s*\b[0-9]*\b\s*,\s*\b[0-9]*\b\s*\)):$uid\]/si", $bbcode_tpl['color_open'], $text);
$text = str_replace("[/color:$uid]", $bbcode_tpl['color_close'], $text);
// BEGIN Center BBCode MOD --------
//
$text = str_replace("[center:$uid]", '<span style="display: block;text-align: center;">', $text);
$text = str_replace("[/center:$uid]", '</span>', $text);
// BEGIN Right BBCode MOD --------
$text = str_replace("[right:$uid]", '<span style="display: block;text-align: right;">', $text);
$text = str_replace("[/right:$uid]", '</span>', $text);
// BEGIN Left BBCode MOD --------
$text = str_replace("[left:$uid]", '<span style="display: block;text-align: left;">', $text);
$text = str_replace("[/left:$uid]", '</span>', $text);
*/
/*
*
* This is a sample implementation for a custom Data Processor for basic BBCode.
*/
FCK.DataProcessor =
{
/*
* Returns a string representing the HTML format of "data". The returned
* value will be loaded in the editor.
* The HTML must be from <html> to </html>, eventually including
* the DOCTYPE.
* @param {String} data The data to be converted in the
* DataProcessor specific format.
*/
ConvertToHtml : function( data )
{
// Convert < and > to their HTML entities.
data = data.replace( /</g, '<' ) ;
data = data.replace( />/g, '>' ) ;
// Convert line breaks to <br>.
data = data.replace( /(?:\r\n|\n|\r)/g, '<br>' ) ;
// [url]
data = data.replace( /\[url\](.+?)\[\/url]/gi, '<a href="$1">$1</a>' ) ;
data = data.replace( /\[url\=([^\]]+)](.+?)\[\/url]/gi, '<a href="$1">$2</a>' ) ;
// [size=24]huge[/size] '<span style="font-size: 24px; ">$2</span>' ) ;
data = data.replace( /\[size\=([^\]]+)](.+?)\[\/size]/gi, '<span style="font-size: $1px; ">$2</span>' ) ;
// [color=rgb(153, 204, 0)]doing[/color] <span style="color: rgb(153, 204, 0); ">doing</span>
data = data.replace( /\[color=(\#[0-9A-F]{6}|[a-z\-]+|rgb\(\s*\b[0-9]*\b\s*,\s*\b[0-9]*\b\s*,\s*\b[0-9]*\b\s*\))\](.*?)\[\/color\]/gi, '<span style="color: $1; ">$2</span>' ) ;
// lists <ul><li>this is one</li><li>this is two</li><li>this is three</li></ul> [list][*]this is one[*]this is two[*]this is three[/list]
//[*] // this is a clumsy solution, it is not recursively finding these guys
data = data.replace( /\[\*\](.+?)(\[\/list\]|\[\*\])/gi, '<li>$1</li>$2' ) ;
data = data.replace( /\[\*\](.+?)(\[\/list\]|\[\*\])/gi, '<li>$1</li>$2' ) ;
data = data.replace( /\[list\](.+?)\[\/list\]/gi, '<ul>$1</ul>' ) ;
data = data.replace( /\[list=a\](.+?)\[\/list\]/gi, '<ul>$1</ul>' ) ;
data = data.replace( /\[list=1\](.+?)\[\/list\]/gi, '<ol>$1</ol>' ) ;
// by default comment these out
// [center] <p style="text-align: center; "> </p> to [center][/center]
data = data.replace( /\[center\](.+?)\[\/center]/gi, '<div style="text-align: center; ">$1</div>' ) ;
// [right] <p style="text-align: right; "> </p> to [right][/right]
data = data.replace( /\[right\](.+?)\[\/right]/gi, '<div style="text-align: right; ">$1</div>' ) ;
// [left] <p style="text-align: left; "> </p> to [left][/left]
data = data.replace( /\[left\](.+?)\[\/left]/gi, '<div style="text-align: left; ">$1</div>' ) ;
// [b]
data = data.replace( /\[b\](.+?)\[\/b]/gi, '<b>$1</b>' ) ;
// [i]
data = data.replace( /\[i\](.+?)\[\/i]/gi, '<i>$1</i>' ) ;
// [u]
data = data.replace( /\[u\](.+?)\[\/u]/gi, '<u>$1</u>' ) ;
//data = data.replace( /<a .*?href=(["'])(.+?)\1.*?>(.+?)<\/a>/gi, '[center]$2[/center]') ;
return '<html><head><title></title></head><body>' + data + '</body></html>' ;
},
/*
* Converts a DOM (sub-)tree to a string in the data format.
* @param {Object} rootNode The node that contains the DOM tree to be
* converted to the data format.
* @param {Boolean} excludeRoot Indicates that the root node must not
* be included in the conversion, only its children.
* @param {Boolean} format Indicates that the data must be formatted
* for human reading. Not all Data Processors may provide it.
*/
ConvertToDataFormat : function( rootNode, excludeRoot, ignoreIfEmptyParagraph, format )
{
var data = rootNode.innerHTML ;
// Convert <br> to line breaks.
data = data.replace( /<br(?=[ \/>]).*?>/gi, '\r\n') ;
// [url]
data = data.replace( /<a .*?href=(["'])(.+?)\1.*?>(.+?)<\/a>/gi, '[url=$2]$3[/url]') ;
// <span style="font-size: $1px; ">$2</span> [size=24]huge[/size]
data = data.replace( /<span.*?style=["']font-size:\s*(.+?)px;.*?["']>(.+?)<\/span>/gi, '[size=$1]$2[/size]') ;
// <span style="color: rgb(153, 204, 0); ">doing</span> [color=rgb(153, 204, 0)]doing[/color]
data = data.replace( /<span.*?style=["']color:\s*(\#[0-9A-F]{6}|[a-z\-]+|rgb\(\s*\b[0-9]*\b\s*,\s*\b[0-9]*\b\s*,\s*\b[0-9]*\b\s*\));.*?["']>(.+?)<\/span>/gi, '[color=$1]$2[/color]' ) ;
// lists [list][*]this is one[*]this is two[*]this is three[/list] <ul><li>this is one</li><li>this is two</li><li>this is three</li></ul>
//[*]
data = data.replace( /\<li>(.+?)<\/li>/gi, '[*]$1' ) ;
//[list]
//[list=1]
//[list=a]
data = data.replace( /<ul>(.+?)<\/ul>/gi, '[list=a]$1[/list]' ) ;
data = data.replace( /<ol>(.+?)<\/ol>/gi, '[list=1]$1[/list]' ) ;
// by default comment these out
// [center]
data = data.replace( /<div .*?style=\"text-align: center; \">(.+?)<\/div>/gi, '[center]$1[/center]') ;
// [right] <p style="text-align: right; ">
data = data.replace( /<div .*?style=\"text-align: right; \">(.+?)<\/div>/gi, '[right]$1[/right]') ;
// [left]
data = data.replace( /<div .*?style=\"text-align: left; \">(.+?)<\/div>/gi, '[left]$1[/left]') ;
// [b]
data = data.replace( /<(?:b|strong)>/gi, '[b]') ;
data = data.replace( /<\/(?:b|strong)>/gi, '[/b]') ;
// [i]
data = data.replace( /<(?:i|em)>/gi, '[i]') ;
data = data.replace( /<\/(?:i|em)>/gi, '[/i]') ;
// [u]
data = data.replace( /<u>/gi, '[u]') ;
data = data.replace( /<\/u>/gi, '[/u]') ;
// Remove remaining tags.
data = data.replace( /<[^>]+>/g, '') ;
return data ;
},
/*
* Makes any necessary changes to a piece of HTML for insertion in the
* editor selection position.
* @param {String} html The HTML to be fixed.
*/
FixHtml : function( html )
{
return html ;
}
} ;
// This Data Processor doesn't support <p>, so let's use <br>.
FCKConfig.EnterMode = 'br' ;
FCKConfig.FontSizes = '7;9;12;18;24;' ;
// To avoid pasting invalid markup (which is discarded in any case), let's
// force pasting to plain text.
FCKConfig.ForcePasteAsPlainText = true ;
// Rename the "Source" buttom to "BBCode".
FCKToolbarItems.RegisterItem( 'Source', new FCKToolbarButton( 'Source', 'BBCode', null, FCK_TOOLBARITEM_ICONTEXT, true, true, 1 ) ) ;
// Let's enforce the toolbar to the limits of this Data Processor. A custom
// toolbar set may be defined in the configuration file with more or less entries.
FCKConfig.ToolbarSets["Default"] = [
['Source'],
['Bold','Italic','Underline','-','Link'],
['About']
] ;
FCKConfig.ToolbarSets["BBCode"] = [
['Bold','Italic','-','Link','Unlink','-','Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck','Source', 'About'],
['FontSize','-','TextColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','OrderedList','UnorderedList']
] ;
Re: Some BBCode Work i set up
I can't rid of a weird feeling that we were parallel working on the same thing in exactly the same time.
I'll post what I've done.
/* * FCKeditor - The text editor for Internet - http://www.fckeditor.net * Copyright (C) 2003-2009 Frederico Caldeira Knabben * * == BEGIN LICENSE == * * Licensed under the terms of any of the following licenses at your * choice: * * - GNU General Public License Version 2 or later (the "GPL") * http://www.gnu.org/licenses/gpl.html * * - GNU Lesser General Public License Version 2.1 or later (the "LGPL") * http://www.gnu.org/licenses/lgpl.html * * - Mozilla Public License Version 1.1 or later (the "MPL") * http://www.mozilla.org/MPL/MPL-1.1.html * * == END LICENSE == * * This is a sample implementation for a custom Data Processor for basic BBCode. */ FCK.DataProcessor = { /* * Returns a string representing the HTML format of "data". The returned * value will be loaded in the editor. * The HTML must be from <html> to </html>, eventually including * the DOCTYPE. * @param {String} a to be converted in the * DataProcessor sdata The datpecific format. */ ConvertToHtml : function( data ) { // Convert < and > to their HTML entities. data = data.replace( /</g, '<' ); data = data.replace( />/g, '>' ); // Convert line breaks to <br>. data = data.replace( /(?:\r\n|\n|\r)/g, '<br>' ); // [url] data = data.replace( /\[URL\]([\s\S]*?)\[\/URL\]/gim, '<a href="$1">$1</a>' ); data = data.replace( /\[URL\=([^\]]+)]([\s\S]*?)\[\/URL\]/gim, '<a href="$1">$2</a>' ); // [b] data = data.replace( /\[B\]([\s\S]*?)\[\/B\]/gim, '<b>$1</b>'); // [i] data = data.replace( /\[I\]([\s\S]*?)\[\/I\]/gim, '<i>$1</i>'); // [u] data = data.replace( /\[U\]([\s\S]*?)\[\/U\]/gim, '<u>$1</u>'); // [IMG] data = data.replace( /\[IMG\=["']([^\]]+)["']\]/gim, '<img src="$1">'); // [FONT] data = data.replace( /\[FONT\=["']([^\]]+)["']\]([\s\S]*?)\[\/FONT\]/gim, '<span style="font-family: $1;">$2</span>'); // [SIZE] data = data.replace( /\[SIZE\=["']([^\]]+)["']\]([\s\S]*?)\[\/SIZE\]/gim, '<span style="font-size: $1;">$2</span>'); // [COLOR] data = data.replace( /\[COLOR\=["']([^\]]+)["']\]([\s\S]*?)\[\/COLOR\]/gim, '<span style="color: $1;">$2</span>'); // [CENTER] data = data.replace( /\[CENTER\]([\s\S]*?)\[\/CENTER\]/gim, '<span style="text-align:center;">$2</span>'); // [LEFT] data = data.replace( /\[LEFT\]([\s\S]*?)\[\/LEFT\]/gim, '<span style="text-align:left;">$2</span>'); // [RIGHT] data = data.replace( /\[RIGHT\]([\s\S]*?)\[\/RIGHT\]/gim, '<span style="text-align:right;">$2</span>'); //LI - goes before parents replacement [OL] or [UL] data = data.replace( /\[\*\]([\s\S]*?)\[\*\]/gim, '<li>$1</li>'); data = data.replace( /\[\*\]([\s\S]*?)\[\/LIST\]/gim, '<li>$1</li>[/LIST]'); // Ordered List [OL] data = data.replace( /\[LIST\=1\]([\s\S]*?)\[\/LIST\]/gim, '<ol>$1</ol>'); // Unordered List [UL] data = data.replace( /\[LIST\]([\s\S]*?)\[\/LIST\]/gim, '<ul>$1</ul>'); // [spoiler] data = data.replace( /\[SPOILER\]([\s\S]*?)\[\/SPOILER\]/gim, '<span style="background-color:#666666;color:#666666;">$1</span>'); // [INDENT] data = data.replace( /\[INDENT\=["']([^\]]+)["']\]([\s\S]*?)\[\/INDENT\]/gim, '<div style="margin-left: $1;">$2</div>'); return '<html><head><title></title></head><body>' + data + '</body></html>'; }, /* * Converts a DOM (sub-)tree to a string in the data format. * @param {Object} rootNode The node that contains the DOM tree to be * converted to the data format. * @param {Boolean} excludeRoot Indicates that the root node must not * be included in the conversion, only its children. * @param {Boolean} format Indicates that the data must be formatted * for human reading. Not all Data Processors may provide it. */ ConvertToDataFormat : function( rootNode, excludeRoot, ignoreIfEmptyParagraph, format) { var data = rootNode.innerHTML ; // Convert <br> to line breaks. data = data.replace( /<br(?=[ \/>]).*?>/gim, '\r\n') ; // [URL] data = data.replace( /<a (?:.*?) href=["'](.+?)["'](?:.*?)>([\s\S]*?)<\/a>/gim, '[URL="$1"]$2[/URL]'); // [B] data = data.replace( /<(?:b|strong)>/gim, '[B]'); data = data.replace( /<\/(?:b|strong)>/gim, '[/B]'); // [I] data = data.replace( /<(?:i|em)>/gim, '[I]'); data = data.replace( /<\/(?:i|em)>/gim, '[/I]'); // [U] data = data.replace( /<u>/gim, '[U]'); data = data.replace( /<\/u>/gim, '[/U]'); // [IMG] data = data.replace( /<img\s{1}.*?src\s{0,1}=\s{0,1}["'](.+?)["']/gim, '[IMG="$1"]'); // [FONT] data = data.replace( /<(?:span|div|p) (?:.*?)style="font-family:\s+(.+?);+">([\s\S]*?)<\/(?:span|div|p)>/gim, '[FONT="$1"]$2[/FONT]'); // [SIZE] data = data.replace( /<(?:span|div|p) (?:.*?)style="font-size:\s+(.+?);+">([\s\S]*?)<\/(?:span|div|p)>/gim, '[SIZE="$1"]$2[/SIZE]'); // [COLOR] data = data.replace( /<(?:span|div|p) (?:.*?)style="color:\s+(.+?);+">([\s\S]*?)<\/(?:span|div|p)>/gim, '[COLOR="$1"]$2[/COLOR]'); // [CENTER] data = data.replace( /<(?:span|div|p) (?:.*?)style="text-align:\s*?center.*?">([\s\S]*?)<\/(?:span|div|p)>/gim, '[CENTER]$1[/CENTER]'); // [LEFT] data = data.replace( /<(?:span|div|p) (?:.*?)style="text-align:\s*?left.*?">([\s\S]*?)<\/(?:span|div|p)>/gim, '[LEFT]$1[/LEFT]'); // [RIGHT] data = data.replace( /<(?:span|div|p) (?:.*?)style="text-align:\s*?right.*?">([\s\S]*?)<\/(?:span|div|p)>/gim, '[RIGHT]$1[/RIGHT]'); // Ordered List [OL] data = data.replace( /<(?:ol)>/gim, '[LIST=1]'); data = data.replace( /<\/(?:ol)>/gim, '[/LIST]'); // Unordered List [UL] data = data.replace( /<(?:ul)>/gim, '[LIST]'); data = data.replace( /<\/(?:ul)>/gim, '[/LIST]'); // [LI] data = data.replace( /<li\s{0,1}.*?>([\s\S]*?)<\/li>/gim, '[*]$1'); // [SPOILER] data = data.replace( /<span .*?style=(["']background-color:(.+?);+\s*?color:(.+?);+\s*?["']|class="comspoiler")>([\s\S]*?)<\/span>/gim, '[SPOILER]$4[/SPOILER]'); // [INDENT] data = data.replace( /<(?:span|div|p) (?:.*?)style="margin-left:\s+(.+?);+">([\s\S]*?)<\/(?:span|div|p)>/gim, '[INDENT="$1"]$2[/INDENT]'); // Remove remaining tags. data = data.replace( /(<[^>]+>)/gm, '') ; return data ; }, /* * Makes any necessary changes to a piece of HTML for insertion in the * editor selection position. * @param {String} html The HTML to be fixed. */ FixHtml : function( html ) { return html ; } } ; // This Data Processor doesn't support <p>, so let's use <br>. FCKConfig.EnterMode = 'br' ; // To avoid pasting invalid markup (which is discarded in any case), let's // force pasting to plain text. FCKConfig.ForcePasteAsPlainText = true ; // Rename the "Source" buttom to "BBCode". FCKToolbarItems.RegisterItem( 'Source', new FCKToolbarButton( 'Source', 'BBCode', null, FCK_TOOLBARITEM_ICONTEXT, true, true, 1 ) ) ; // Let's enforce the toolbar to the limits of this Data Processor. A custom // toolbar set may be defined in the configuration file with more or less entries. FCKConfig.ToolbarSets["Default"] = [ ['Source'], ['Bold','Italic','Underline','Link'], ['About'] ] ;Re: Some BBCode Work i set up