Create a BBCode sample

[Wiktor Walc]

It would be nice to have a sample ​BBCode plugin, just to show that CKEditor is capable to produce other markup than HTML.

As a sample set of bbcodes to support we could take the following list from ​phpBB forum: ​BBCode guide.

Note that the color tag may require #1653 to be fixed.

Things we could show on the sample page:

1. Auto fixing broken tags (e.g. [b][i]boldanditalic[/b])
2. Transparent bbcode parsing (requires no intermediate HTML)
3. Configurable output formating
4. Toogle like in the Ajax sample, for the one that would not like to have CKEditor enabled by default (starting with plain textarea element with some initial bbcodes looks like a way to go)

[Garry Yao]

Feature branch created with [6504].

[Wiktor Walc]

Looks nice! I have noticed one problem, see below:

1) Load the following:

[list=1]
[*]werwer
[*]asdf [img]http://localhost/bbcode/_source/plugins/smiley/images/sad_smile.gif[/img]
[*]rwerwer
[/list]

switch between source and wysiwyg mode, the list is now broken.

2) Maybe it would be better to disable all fields/tabs in Link and Image dialogs that are not supported (like the Advanced tab etc.) in bbcode.html sample?

3) How about leaving just a couple of smileys and translating them back to their ASCII equivalent in source mode (e.g. regular_smile.gif = :)), to show that this is doable as well?

[Wiktor Walc]

(see my previous comment)

[Garry Yao]

1) Load the following:

switch between source and wysiwyg mode, the list is now broken. A bug exists when handling image element, fixed with [6531].

2) Maybe it would be better to disable all fields/tabs in Link and Image dialogs that are not supported (like the Advanced tab etc.) in bbcode.html sample?

I agree that we should eventually tackle that in the sample page, just for better demonstration.

3) How about leaving just a couple of smileys and translating them back to their ASCII equivalent in source mode (e.g. regular_smile.gif = :)), to show that this is doable as well?

How would this contribute to promoting this feature? (not sure smiley are part of bbcode world) At least this will requires just very few efforts from the end developers.

[Wiktor Walc]

Ad 3) most of the time smileys are inserted into posts using plain text and later, on the server side, changed into appropiate images. That's why I thought about converting CKEditor smileys into their ascii equivalents. It is also the way how smileys work on or forum, just to mention some of them:

 :D  :)  ;)  :(  :o  :shock:  :?  8-)  :lol:  :x  :P  :oops:  :cry: 

Anyway, it should not be a blocker for this ticket.

Ad 2) How about altering dialogs inside of a plugin? The source code of a sample should be as clean as possible. Besides if one would like to use this plugin, he'd definitely disable unsupported fields anyway.

The attached patch is just a dirt sample of proposed changes. The following issues are not solved there:

4) Reset Size / Lock Ratio should be removed in the Image dialog.

5) It would be nice to support all colors in the "Text Color" button. Note that there is still a link to "More colors" available, so instead of providing values for colorButton_colors, I'd simply use the same function as we have in the HTML4 sample to use the hex value in all browsers in the [color] tag.

[Garry Yao]

Ok, those changes are committed for review with [6694], though personally I don't like text emoticon, at least you'll not find it as a ​standard definition for BBCode. At the moment I've left out those smileys that are causing troubles with HTML syntax or missing a emoticon.

[Sa'ar Zac Elias]

• When dealing with emoticons, elements path should indicate that instead of "img".
• When dealing with [email] tags, elements path should indicate that instead of "link".
• [IE] When one hits OK in the image dialog, JS error is triggered (possibly the outdated branch, but for reference).
• As for preview.. it does the exact same action source mode does. Not sure if we should go with that. For me we can just remove this button, because parsing is to be done on server side.

[Wiktor Walc]

As I wrote earlier, if converting smileys is causing too much troubles, we can ingore this specific feature for now.

While testing smileys I saw that content is duplicated when switching to source mode and back, try the following:

one :) two :) three

You can switch to wysiwyg and back approximately 7 times before you reach millions of smileys and the browser will hang.

@Saar regarding Preview button, good point. I initially thought that it is the right approach to display BBCodes in the Preview window, after all we want to show users that CKEditor is capable of producing BBCodes. But this can be checked with the Source button and the purpose of the preview window is a bit different, so I'm ok with removing this button.

[Garry Yao]

Update branch with above mentioned fixed.

[Wiktor Walc]

I'm leaving the review to Saare, but for me it looks pretty good. Nice work!

[Sa'ar Zac Elias]

• Type a line of text and click on the quote button.
• Switch to source and back to wysiwyg.
• Click inside the line you've written and click on the quote button.

Expected: blockquote is removed. Actual: nothing happens.

In the special characetrs dialog ther're some characters (like &) that are inserted as entites into the contents. That leads to wrong result (& is displayed, and when you switch to source and back to wysiwyg it shows &).

[Garry Yao]

Above issues fixed on branch.

[Sa'ar Zac Elias]

The editor does not load at all in IE now. Looks great besides.

[Garry Yao]

Oops, it doesn't turn out on my last try, but it's caused by an empty regexp failure on IE, addressed in branch.

[Sa'ar Zac Elias]

Appearently there are a few more:

• In source mode put the following and switch to wysiwyg. See that the list becomes [list=a].

  [list=square]
  [*]kjhjkhjkhjkh
  [/list]
  

• Empty the editor and click on the quote button. Type a line and press ENTER. Hit the quote key.
  

Result:

[quote]text
[/quote]

Expected (last line break should be ignored):

[quote]text[/quote]

[Garry Yao]

[list=square]...

Invalid, as we're implementing in this plugin just the phpBB variant of BBCode format, we need to understand BBCode is non-standarded so the plugin will need to be forked by other parties for their use, what is missing here might be a declaration on the sample page.

Empty the editor and click on the quote button. Type a line and press ENTER. Hit the quote key.

Not sure, The plugin utilize enter mode br and we current hold this behavior this mode in the editor. Even it make sense to fix, it should be filed as a trunk ticket.

[Sa'ar Zac Elias]

Replying to garry.yao:

Invalid, as we're implementing in this plugin just the phpBB variant of BBCode format, we need to understand BBCode is non-standarded so the plugin will need to be forked by other parties for their use, what is missing here might be a declaration on the sample page.

Then the bulleted list style dialog must be disabled.

Not sure, The plugin utilize enter mode br and we current hold this behavior this mode in the editor. Even it make sense to fix, it should be filed as a trunk ticket.

True, filed #7698.

[Garry Yao]

Then the bulleted list style dialog must be disabled.

Perhaps the best option for us here is to remove those plugins, updated with [6763].

[Sa'ar Zac Elias]

I've committed [6782] to remove dead code chunk.
R+, congratulations.

[Garry Yao]

Feature landed with [6787].