Hello,
how can I extend the BBcode string in the BBcode plugin? I need an Image and a List with BBcode. It's cool that you put this function to the plugins. I still wrote some little Code in the bbcode/fckplugin.js, but it don't want be the right result:
Has somebody an extended FCKBBCode plugin?
Can you Help me?
how can I extend the BBcode string in the BBcode plugin? I need an Image and a List with BBcode. It's cool that you put this function to the plugins. I still wrote some little Code in the bbcode/fckplugin.js, but it don't want be the right result:
data = data.replace( /\[IMG\](.+?)\[\/IMG]\[ALT\](.+?)\[\/ALT\]/gi, '<img src="$2" alt="$3" width="$1" border="0" />' ) ;
Has somebody an extended FCKBBCode plugin?
Can you Help me?
Re: BBCode extension
Hello again,
here is my complete editor/plugin/bbcode/fckplugin.js . I had put the standart BBCodes, which works with a BBcode parser, into the file. But it want work right. It only shows the b/i/u and the url strings right. Where is the problem? Do I have to modify another file?
/* * FCKeditor - The text editor for Internet - http://www.fckeditor.net * Copyright (C) 2003-2007 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} 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, '>' ) ; data = data.replace(/\n/gi,"<br />"); data = data.replace(/\[b\]/gi,"<strong>"); data = data.replace(/\[\/b\]/gi,"</strong>"); data = data.replace(/\[i\]/gi,"<em>"); data = data.replace(/\[\/i\]/gi,"</em>"); data = data.replace(/\[u\]/gi,"<u>"); data = data.replace(/\[\/u\]/gi,"</u>"); data = data.replace(/\[url\](.*?)\[\/url\]/gi,"<a href=\"$1\">$1</a>"); data = data.replace(/\[img\](.*?)\[\/img\]/gi,"<img src=\"$1\" />"); data = data.replace(/\[color=(.*?)\](.*?)\[\/color\]/gi,"<font color=\"$1\">$2</font>"); data = data.replace(/\[code\](.*?)\[\/code\]/gi,"<span class=\"codeStyle\">$1</span> "); data = data.replace(/\[quote.*?\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle\">$1</span> "); 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 ; data = data.replace(/<a href=\"(.*?)\".*?>(.*?)<\/a>/gi,"[url]$1[/url]"); data = data.replace(/<font.*?color=\"(.*?)\".*?class=\"codeStyle\".*?>(.*?)<\/font>/gi,"[code][color=$1]$2[/color][/code]"); data = data.replace(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]"); data = data.replace(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[code][color=$1]$2[/color][/code]"); data = data.replace(/<font.*?class=\"quoteStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]"); data = data.replace(/<font.*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[color=$1]$2[/color]"); data = data.replace(/<font>(.*?)<\/font>/gi,"$1"); data = data.replace(/<img.*?src=\"(.*?)\".*?\/>/gi,"[img]$1[/img]"); data = data.replace(/<span class=\"codeStyle\">(.*?)<\/span>/gi,"[code]$1[/code]"); data = data.replace(/<span class=\"quoteStyle\">(.*?)<\/span>/gi,"[quote]$1[/quote]"); data = data.replace(/<strong class=\"codeStyle\">(.*?)<\/strong>/gi,"[code][b]$1[/b][/code]"); data = data.replace(/<strong class=\"quoteStyle\">(.*?)<\/strong>/gi,"[quote][b]$1[/b][/quote]"); data = data.replace(/<em class=\"codeStyle\">(.*?)<\/em>/gi,"[code][i]$1[/i][/code]"); data = data.replace(/<em class=\"quoteStyle\">(.*?)<\/em>/gi,"[quote][i]$1[/i][/quote]"); data = data.replace(/<u class=\"codeStyle\">(.*?)<\/u>/gi,"[code][u]$1[/u][/code]"); data = data.replace(/<u class=\"quoteStyle\">(.*?)<\/u>/gi,"[quote][u]$1[/u][/quote]"); data = data.replace(/<\/(strong|b)>/gi,"[/b]"); data = data.replace(/<(strong|b)>/gi,"[b]"); data = data.replace(/<\/(em|i)>/gi,"[/i]"); data = data.replace(/<(em|i)>/gi,"[i]"); data = data.replace(/<\/u>/gi,"[/u]"); data = data.replace(/<u>/gi,"[u]"); data = data.replace(/<br \/>/gi,"\n"); data = data.replace(/<br\/>/gi,"\n"); data = data.replace(/<br>/gi,"\n"); data = data.replace(/<p>/gi,""); data = data.replace(/<\/p>/gi,"\n"); data = data.replace(/ /gi," "); data = data.replace(/"/gi,"\""); data = data.replace(/</gi,"<"); data = data.replace(/>/gi,">"); data = data.replace(/&/gi,"&"); data = data.replace(/&undefined;/gi,"'"); // quickfix 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' ; // 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','Image','TextColor'], ['About'] ] ;Re: BBCode extension
Hi,
Converting from BBCodes to HTML using regular expressions is possible and you can do it in the way you do it now.
However the opposite is not possible (in more complicated examples).
We have wrote recently one plugin that may help you in writing your BBcode plugin.
It is MediaWiki extension: http://mediawiki.fckeditor.net/.
It does not parse BBCodes, but it converts HTML to different syntax, so generally it does exactly what your plugin.
Locate fckplugin.js file: mediawiki\extensions\FCKeditor\plugins\mediawiki\fckplugin.js and take a look in it.
ConvertToDataFormat is the function you should look at. We use there _AppendNode method, which traverse through HTML DOM and appends wiki tags to stringbuilder.
You should try to copy that function (along with _AppendNode, _AppendChildNodes) and adjust it to your needs.
I know it may look scary so if you have questions feel free to ask.
Wiktor Walc
CTO, CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+