Welcome Guest Search | Active Topics | Log In | Register

BBCode vs HTML .... whats the difference for YAF? Options · View
juanp2
#1 Posted : Thursday, October 16, 2008 1:27:04 PM
Rank: Member


Joined: 9/27/2008
Posts: 20
I'm just finishing installing TinyMCE. I noticed that tinymce now has a BBcode plugin that works pretty well, showing a WSIWG representation of the BBcode. Pretty nice. But I then pondered on the question.. which to use? In Yaf, what is the difference ? Better security? Better extendability?

When I get the TinyMCE code working (extending an editor) I'll write a little Faq or something so others can use it.
juanp2
#2 Posted : Thursday, October 16, 2008 1:31:58 PM
Rank: Member


Joined: 9/27/2008
Posts: 20
For those that are interested here is a link to TinyMCE with BBcode support added

http://tinymce.moxiecode.com/examples/example_09.php
test2005
#3 Posted : Thursday, October 16, 2008 1:49:35 PM

Rank: YAF MVP



Joined: 2/12/2005
Posts: 927
Location: Italy

Well, I'm not familiar with TinyMCE, so excuse the ignorance.

YAF BBcode feature allows you to add "custom" tags of any kind.

For example, YAF v1.9.3 comes out of the box with a YOUTUBE extension. All you need is to insert the YouTube URL and the BBcode extension will format it to display correctly.

There is also another user creating a SWF BBcode extension for YAF. Allowing users to embed Adobe Flash/Shockwave files into a topic (properly formatted).

YAF allows you to create a custom tag for just about anything you can imagine.

So the question is, does TinyMCE allow you to add "custom" tags?

Yes, they both use BBcode standards to comment bold, color, etc...but YAF goes that one step further with it's BBcode editor.

.....the man in black fled across the desert..........and the gunslinger followed.....

juanp2
#4 Posted : Thursday, October 16, 2008 3:14:23 PM
Rank: Member


Joined: 9/27/2008
Posts: 20
Does it allow addition of custom tags? Good question. I'm looking right now. The project is an open source, WSIWG html editor with the common features of a word processor. Written in Javascript.

Ok.. here is the plug-in code that does the BB codes....

Code:
/**
* $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $
*
* @author Moxiecode
* @copyright Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved.
*/


(function() {
      tinymce.create('tinymce.plugins.BBCodePlugin', {
            init : function(ed, url) {
                  var t = this, dialect = ed.getParam('bbcode_dialect', 'punbb').toLowerCase();

                  ed.onBeforeSetContent.add(function(ed, o) {
                        o.content = t['_' + dialect + '_bbcode2html'](o.content);
                  });

                  ed.onPostProcess.add(function(ed, o) {
                        if (o.set)
                              o.content = t['_' + dialect + '_bbcode2html'](o.content);

                        if (o.get)
                              o.content = t['_' + dialect + '_html2bbcode'](o.content);
                  });
            },

            getInfo : function() {
                  return {
                        longname : 'BBCode Plugin',
                        author : 'Moxiecode Systems AB',
                        authorurl : 'http://tinymce.moxiecode.com',
                        infourl : '
http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/bbcode',
                        version : tinymce.majorVersion + "." + tinymce.minorVersion
                  };
            },

            // Private methods

            // HTML -> BBCode in PunBB dialect
            _punbb_html2bbcode : function(s) {
                  s = tinymce.trim(s);

                  function rep(re, str) {
                        s = s.replace(re, str);
                  };

                  // example: <strong> to [b]
                  rep(/<a.*?href=\"(.*?)\".*?>(.*?)<\/a>/gi,"[url=$1]$2[/url]");
                  rep(/<font.*?color=\"(.*?)\".*?class=\"codeStyle\".*?>(.*?)<\/font>/gi,"[code][color=$1]$2[/color][/ code]");
                  rep(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]");
                  rep(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[code][color=$1]$2[/color][/ code]");
                  rep(/<font.*?class=\"quoteStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]");
                  rep(/<span style=\"color: ?(.*?);\">(.*?)<\/span>/gi,"[color=$1]$2[/color]");
                  rep(/<font.*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[color=$1]$2[/color]");
                  rep(/<span style=\"font-size:(.*?);\">(.*?)<\/span>/gi,"[size=$1]$2[/size]");
                  rep(/<font>(.*?)<\/font>/gi,"$1");
                  rep(/<img.*?src=\"(.*?)\".*?\/>/gi,"[img]$1[/img]");
                  rep(/<span class=\"codeStyle\">(.*?)<\/span>/gi,"[code]$1[/ code]");
                  rep(/<span class=\"quoteStyle\">(.*?)<\/span>/gi,"[quote]$1[/quote]");
                  rep(/<strong class=\"codeStyle\">(.*?)<\/strong>/gi,"[code][b]$1[/b][/ code]");
                  rep(/<strong class=\"quoteStyle\">(.*?)<\/strong>/gi,"[quote][b]$1[/b][/quote]");
                  rep(/<em class=\"codeStyle\">(.*?)<\/em>/gi,"[code][i]$1[/i][/ code]");
                  rep(/<em class=\"quoteStyle\">(.*?)<\/em>/gi,"[quote][i]$1[/i][/quote]");
                  rep(/<u class=\"codeStyle\">(.*?)<\/u>/gi,"[code][u]$1[/u][/ code]");
                  rep(/<u class=\"quoteStyle\">(.*?)<\/u>/gi,"[quote][u]$1[/u][/quote]");
                  rep(/<\/(strong|b)>/gi,"[/b]");
                  rep(/<(strong|b)>/gi,"[b]");
                  rep(/<\/(em|i)>/gi,"[/i]");
                  rep(/<(em|i)>/gi,"[i]");
                  rep(/<\/u>/gi,"[/u]");
                  rep(/<span style=\"text-decoration: ?underline;\">(.*?)<\/span>/gi,"[u]$1[/u]");
                  rep(/<u>/gi,"[u]");
                  rep(/<blockquote[^>]*>/gi,"[quote]");
                  rep(/<\/blockquote>/gi,"[/quote]");
                  rep(/<br \/>/gi,"\n");
                  rep(/<br\/>/gi,"\n");
                  rep(/<br>/gi,"\n");
                  rep(/<p>/gi,"");
                  rep(/<\/p>/gi,"\n");
                  rep(/&nbsp;/gi," ");
                  rep(/&quot;/gi,"\"");
                  rep(/&lt;/gi,"<");
                  rep(/&gt;/gi,">");
                  rep(/&amp;/gi,"&");

                  return s;
            },

            // BBCode -> HTML from PunBB dialect
            _punbb_bbcode2html : function(s) {
                  s = tinymce.trim(s);

                  function rep(re, str) {
                        s = s.replace(re, str);
                  };

                  // example: [b] to <strong>
                  rep(/\n/gi,"<br />");
                  rep(/\[b\]/gi,"<strong>");
                  rep(/\[\/b\]/gi,"</strong>");
                  rep(/\[i\]/gi,"<em>");
                  rep(/\[\/i\]/gi,"</em>");
                  rep(/\[u\]/gi,"<u>");
                  rep(/\[\/u\]/gi,"</u>");
                  rep(/\[url=([^\]]+)\](.*?)\[\/url\]/gi,"<a href=\"$1\">$2</a>");
                  rep(/\[url\](.*?)\[\/url\]/gi,"<a href=\"$1\">$1</a>");
                  rep(/\[img\](.*?)\[\/img\]/gi,"<img src=\"$1\" />");
                  rep(/\[color=(.*?)\](.*?)\[\/color\]/gi,"<font color=\"$1\">$2</font>");
                  rep(/\[code\](.*?)\[\/code\]/gi,"<span class=\"codeStyle\">$1</span>&nbsp;");
                  rep(/\[quote.*?\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle\">$1</span>&nbsp;");

                  return s;
            }
      });

      // Register plugin
      tinymce.PluginManager.add('bbcode', tinymce.plugins.BBCodePlugin);
})();


My assumption is that it generates its output in html then converts it to BB codes above, so it can be saved in BB format. Wouldn't be hard to extend it from the looks of it.

In the init file, you specify what buttons you want to include or exclude in the button bar, by name..like bold, or italic, smilies, spell checking, etc. There is already a button that generates a nice pop-up 'layer' window that handles embedding most common media ( shockwave, flash(swf), quicktime) etc (no youtube). Takes the basic input URL, dimensions of display then generates the HTML to embedd it and display in the editor.

Hmm... take that back, in the 100+ or so community written plug-ins on sourceforge there are various YouTube embedding add ins.

And since it support ASP.net compression, and has downloadable dlls for just that, it loads reasonable quick as well. As well as AJAX integration capabilities.

While looking I saw an example of how to write custom buttons with custom functionality so you can add it to a button bar.

Check out a full featured example if you are interested. Put it in full screen mode, embed a flash file via the layerd pop-up that takes the URL and dimensions. Than hit the "html" button to see what it generates and you'll see a nice layer pop-up of the html you can then further edit and save back to the editor for viewing.

http://tinymce.moxiecode.com/examples/full.php

And now you know 99% as familiar with TinyMCE as I am. So to answer your question "I'm 99% percentage sure" it supports custom tags with very little programming.

Which editor 'goes further'? ... I'll leave that to you to decide now that you know about the same as I do about TinyMCE.

juanp2
#5 Posted : Thursday, October 16, 2008 3:16:29 PM
Rank: Member


Joined: 9/27/2008
Posts: 20
Wow, posting that javascript sure did break the BB rendering!
Jaben
#6 Posted : Thursday, October 16, 2008 11:53:22 PM

Rank: YAF Head Dude



Joined: 10/10/2004
Posts: 3,045
Location: Honolulu, HI
well, you opened [code ] and you closed [ /code]. That's how that works. I modified.
"When you are grateful, fear disappears and abundance appears”."

juanp2
#7 Posted : Friday, October 17, 2008 8:22:28 AM
Rank: Member


Joined: 9/27/2008
Posts: 20
Looks fantastic now Jaben.

Topic kind of got misunderstood or side tracked.. bit of both.

In my original post, I was trying to differentiate between BB codes and HTML. I just wanted to ask a developer which they though was a beter solution to use in YAF and why? I know historically that BB codes were made to avoid rendering problems in posts as well to offer better security. I'm curious if the developers feel that HTML is a 'safe' option to use in YAF?

I got the TinyMCE code working, with the exception of the toggle that displays between WSIWYG and the BB codes. The thing I don't like about TinyMCE is their BB implementation doesn't show visually some of the BB codes. If I mark a something as "code", it just looks like text. They allow the WSIWYG editor to toggle to show the BB codes as plain text, but that sort of defeats the purpose of using the WSIWYG editor in the first place. For this reason, I think I might drop this mini project for now unless there is a good internal reason to use BB codes over html.


But the 'toggle between WSIWG and BB is causing me issues. It uses a link to initiate the change and run some javascript. But their example implementation, adds a "#" to the URL which without further digging, I'm not sure if it is critical to the javascript funcionaling properly. Nor, if appending a # to the URL will have a side effect in YAF.

One other question. When defining the editor does this need to be done the code below or is there someplace in the interface to define which editor to use? I can't find if there is. From the code I don't think so, but I've been known to be wrong before.

Code:
        
public int ForumEditor
{
  get { return _reg.GetValueInt( "ForumEditor", 1 ); }
  set { _reg.SetValueInt( "ForumEditor", value ); }
}


I would make a small suggestion that the value in the above property use the EditorType enum rather than a hard coded int.

Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

YAFPro Theme Created by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.3 RC2 | YAF © 2003-2008, Yet Another Forum.NET
This page was generated in 0.123 seconds.

SourceForge.net Logo Powered by ASP.NET v2.0 411ASP.NET