[RFC] WYSIWYG editor

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
4seven
I've been banned
Posts: 14
Joined: Sat Aug 21, 2010 12:35 pm

Re: [RFC] WYSIWYG editor

Post by 4seven »

posting.php
includes/bbcode.php
includes/functions_display.php
includes/functions_posting.php
includes/acp/acp_bbcodes.php
styles/prosilver/template/editor.js
styles/prosilver/template/posting_buttons.html
styles/prosilver/template/posting_editor.html

Jocelyn79
Registered User
Posts: 11
Joined: Mon Apr 04, 2011 12:42 pm

Re: [RFC] WYSIWYG editor

Post by Jocelyn79 »

Kellanved wrote:Surveying the current situation, it seems to me that tinyMCE is too hardwired for HTML, any bbcode support takes the shape of a hack. CKeditor looks more promising, but implementing an extensible bbcode parser and writer would take serious effort.
Actually, TinyMCE supports the most common BBcodes without any hacks.
Just have a look to this demo : http://tinymce.moxiecode.com/tryit/bbcode.php
You may swith between BBcode editor and WYSIWYG, and even submit the form and see the contents of the form variables.
If that content is then passed to phpbb, it may be saved the same way it works now.

There is still the problem of easilly integrating custom BBcodes into the WYSIWYG editor...
Another example shows that it is possible with a few lines of javascript code to add a button or menu to the editor. I don't know if that covers all the needs for phpbb users and all custom bbcodes.

4seven
I've been banned
Posts: 14
Joined: Sat Aug 21, 2010 12:35 pm

Re: [RFC] WYSIWYG editor

Post by 4seven »

There is still the problem of easilly integrating custom BBcodes into the WYSIWYG editor...
custom bbcodes must be auto-integrated without any user-interaction.
viewtopic.php?p=212730#p212730

Jocelyn79
Registered User
Posts: 11
Joined: Mon Apr 04, 2011 12:42 pm

Re: [RFC] WYSIWYG editor

Post by Jocelyn79 »

4seven wrote:
There is still the problem of easilly integrating custom BBcodes into the WYSIWYG editor...
custom bbcodes must be auto-integrated without any user-interaction.
viewtopic.php?p=212730#p212730
I know that, this is the reason I wrote that line about easy integration of custom BBcodes into the editor.
I was showing what standard TinyMCE can already do. And of course some additionnal PHP code is required to handle auto-integration of custom BBcodes into PHPBB.

wiktor
Registered User
Posts: 7
Joined: Tue May 24, 2011 12:05 pm

Re: [RFC] WYSIWYG editor

Post by wiktor »

Hi everyone,

It's my first post here, so let me introduce myself - my name is Wiktor and I'm a part of the CKSource team.

I'm writing here, because I've seen that only one editor was mentioned so far in this discussion, so I thought that before deciding what WYSIWYG editor to use, I'd add another one: CKEditor ;)
Why CKEditor? Knowing that phpBB is about to include a WYSIWYG editor, we have started working on a sample BBCode plugin (I've been showing some early versions of it to DavidIQ) that we finally included in CKEditor 3.6.

You cannot test it on our "official" demo page, but you can see it live either by downloading CKEditor 3.6+ or by visiting the nightly demo, where all samples are available: CKEditor Sample — BBCode Plugin.

CKEditor code may be stripped down and repackaged to reduce the code size, so don't look at the size of the downloaded zip file (note that source files are included, 2 extra skins etc.).
If you are interested in performance you may find more details here: CKEditor: Loading performance details.

I've been working long time ago on an experimental FCKeditor mod for phpBB 2.x so more or less I have a general overview of things that may be a bit problematic (e.g. alignment of handling nested BBCodes between parser on the server side and in the WYSIWYG editor, custom BBCodes etc). I know my knowledge my be a bit outdated at this moment due to changes in 3.x but I still think that introducing WYSIWYG editor is a definitely doable task that would help lots of users in using this great software.

4seven
I've been banned
Posts: 14
Joined: Sat Aug 21, 2010 12:35 pm

Re: [RFC] WYSIWYG editor

Post by 4seven »

fine news, but..
4seven wrote:custom bbcodes must be auto-integrated without any user-interaction.
viewtopic.php?p=212730#p212730
exactly that is the point and main problem. a perfect bb engine for wysiwyg i have build also.

User avatar
Ger
Registered User
Posts: 293
Joined: Mon Jul 26, 2010 1:55 pm
Location: 192.168.1.100
Contact:

Re: [RFC] WYSIWYG editor

Post by Ger »

Here's an idea: why bother at all with custom BBcode once there is a WYSIWYG editor?

Supporting 2 systems at all time that both serve the same purpose doesn't really make sense, now I think of it. Both BBcode and a WYSIWYG editor are primarly used to style the posted messages. Since we are talking about 4.0 here, we are making a fresh start with all of the code. So why don't we just throw away the complete BBcode engine and focus purely on the WYSIWYG?

Of course, custom BBcode is used for more then just styling. Youtube, Last.FM, LaTeX, etc. can all be implemented with a custom BBcode at some point. But IMHO that could also be done with a WYSIWYG using a bit of AJAX. It won't always be the easyest task but I think it can be done with a hook or MOD. Throwing away the BBcode support only makes it easyer.

Of course, there should be an upgrade path for 3.x forums to 4.x forums that migrate the used BBcodes. But that won't be very difficult I think, since the output of both BBcode and WYSIWYG is HTML.
Above message may contain errors in grammar, spelling or wrongly chosen words. This is because I'm not a native speaker. My apologies in advance.

Ramus
Registered User
Posts: 1
Joined: Tue Mar 20, 2012 1:47 am

Re: [RFC] WYSIWYG editor

Post by Ramus »

I had a few thoughts on this, perhaps simplifying:

1. Include an ACP master WYSIWYG enable/disable along with an UCP individual WYSIWYG enable/disable (admin setting also to select the new user default editor).
2. Options to enable/disable would include a WYSIWYM and WYSIWYG editor.
3. ACP configuration would include separate fields for admin to (including default options to be included during the MOD install):
(a) font families;
(b) selective font sizes either by points or by percentages along with from and to ranges;
(c) color styling type (which would be from a internal function that includes the entire color hue), e.g., a box table (as in MS Word), text-color listing (words styled with the color), or hover and select color pallet (use mouse to select desired color);
4. Both editors would be built on BBCode using a modified form of the present BBCode ACP database, to include additional fields for icon and icon hovers and devise a more able structure for using HTML attributes, order of display, menu divisions, etc.
5. The WYSIWYG would use pop-up menus for BBCode requiring additional information this would work in conjunction with the data entered into the ACP for BBCodes.
6. Templates would check for which editor is being used and include <noscript> tags along with a template variable alert message to be displayed for those that are using the WYSIWYG while using a Web-browser that has JS disabled.
7. Upong query the WYSIWYG would simply pass its HTML back to the server the server would then revert that HTML into BBCode for either previews or database entry; and the editor would maintain its original variable with the HTML for display in the text area. As well when editing a post the stored BBCode would be converted into HTML for display in the text area.
8. So far as security is concerned the present built in save guards should work the same as when using phpBB3 current editor, e.g., stripping or converting special characters into entities, etc.
9. Additionally, as an advanced feature in the WYSIWYG the BBCode or individual tool menus could be scripted to permit for individual user preference by remembering positions and show/hide toggling either by mouse movement or a UCP option to order the display or show/hide the individual tool menus.
10. With regard to the above, there could also be UCP options presented for core user preferred settings such as default text-alignment, font color, size, and family.


Also, I was wondering if any outside editor is actually necessary at all, such as CK or Tiny, though if so it seems that Tiny is preferred in frameworks such as Joomla.

User avatar
jsebean
Registered User
Posts: 165
Joined: Wed Nov 17, 2010 1:40 am
Location: Atlantic Canada

Re: [RFC] WYSIWYG editor

Post by jsebean »

Ger wrote:Here's an idea: why bother at all with custom BBcode once there is a WYSIWYG editor?

Supporting 2 systems at all time that both serve the same purpose doesn't really make sense, now I think of it. Both BBcode and a WYSIWYG editor are primarly used to style the posted messages. Since we are talking about 4.0 here, we are making a fresh start with all of the code. So why don't we just throw away the complete BBcode engine and focus purely on the WYSIWYG?

Of course, custom BBcode is used for more then just styling. Youtube, Last.FM, LaTeX, etc. can all be implemented with a custom BBcode at some point. But IMHO that could also be done with a WYSIWYG using a bit of AJAX. It won't always be the easyest task but I think it can be done with a hook or MOD. Throwing away the BBcode support only makes it easyer.

Of course, there should be an upgrade path for 3.x forums to 4.x forums that migrate the used BBcodes. But that won't be very difficult I think, since the output of both BBcode and WYSIWYG is HTML.
The point of BBCode is for security (prevent XSS), because if you're not gonna have BBCode then the only other option is HTML, because remember, the WYSIWYG editor has got to output something. Since I think it would just be much more easier and secure with BBCode, and since custom BBCode will be used, I'd say, stick with BBCode instead of going into the minefield of pure HTML output, though it would be possible to filter out everything but why not make a BBCode engine. If some people choose they don't want WYSIWYG editor (and some do) then users would have to learn HTML to format the post. People know BBCode, why change it.
-Jonah

mvader
Registered User
Posts: 6
Joined: Tue Jul 10, 2012 12:48 am
Contact:

Re: [RFC] WYSIWYG editor

Post by mvader »

Code: Select all

_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]
");
rep(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]");
rep(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"

Code: Select all

[color=$1]$2[/color]
");
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: Select all

$1
");
rep(/<span class=\"quoteStyle\">(.*?)<\/span>/gi,"[quote]$1[/quote]");
rep(/<strong class=\"codeStyle\">(.*?)<\/strong>/gi,"

Code: Select all

[b]$1[/b]
");
rep(/<strong class=\"quoteStyle\">(.*?)<\/strong>/gi,"[quote]$1[/quote]");
rep(/<em class=\"codeStyle\">(.*?)<\/em>/gi,"

Code: Select all

[i]$1[/i]
");
rep(/<em class=\"quoteStyle\">(.*?)<\/em>/gi,"[quote]$1[/quote]");
rep(/<u class=\"codeStyle\">(.*?)<\/u>/gi,"

Code: Select all

[u]$1[/u]
");
rep(/<u class=\"quoteStyle\">(.*?)<\/u>/gi,"[quote]$1[/quote]");
rep(/<\/(strong|b)>/gi,"[/b]");
rep(/<(strong|b)>/gi,"");
rep(/<\/(em|i)>/gi,"[/i]");
rep(/<(em|i)>/gi,"");
rep(/<\/u>/gi,"[/u]");
rep(/<span style=\"text-decoration: ?underline;\">(.*?)<\/span>/gi,"$1");
rep(/<u>/gi,"");
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;|\u00a0/gi," ");
rep(/"/gi,"\"");
rep(/</gi,"<");
rep(/>/gi,">");
rep(/&/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: 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\]/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;
}[/code]
Here is where TinyMCE bbcode is converted to html and html is converted to bbcode. If you take a look at it you will see that you only have to add a line for every bbcode. So, let's put a bit of php there.

Code: Select all

_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]
");
rep(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]");
rep(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"

Code: Select all

[color=$1]$2[/color]
");
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: Select all

$1
");
rep(/<span class=\"quoteStyle\">(.*?)<\/span>/gi,"[quote]$1[/quote]");
rep(/<strong class=\"codeStyle\">(.*?)<\/strong>/gi,"

Code: Select all

[b]$1[/b]
");
rep(/<strong class=\"quoteStyle\">(.*?)<\/strong>/gi,"[quote]$1[/quote]");
rep(/<em class=\"codeStyle\">(.*?)<\/em>/gi,"

Code: Select all

[i]$1[/i]
");
rep(/<em class=\"quoteStyle\">(.*?)<\/em>/gi,"[quote]$1[/quote]");
rep(/<u class=\"codeStyle\">(.*?)<\/u>/gi,"

Code: Select all

[u]$1[/u]
");
rep(/<u class=\"quoteStyle\">(.*?)<\/u>/gi,"[quote]$1[/quote]");
rep(/<\/(strong|b)>/gi,"[/b]");
rep(/<(strong|b)>/gi,"");
rep(/<\/(em|i)>/gi,"[/i]");
rep(/<(em|i)>/gi,"");
rep(/<\/u>/gi,"[/u]");
rep(/<span style=\"text-decoration: ?underline;\">(.*?)<\/span>/gi,"$1");
rep(/<u>/gi,"");
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;|\u00a0/gi," ");
rep(/"/gi,"\"");
rep(/</gi,"<");
rep(/>/gi,">");
rep(/&/gi,"&");
<?php
for ($bbcode->get_custom_bbcodes() as $bbcode => $html)
{
// HERE PHPBB REPLACES (TEXT) (SIMPLETEXT), ... FROM $bbcode and $html
echo 'rep(/' . $html . '/gi,"' . $bbcode . '");';
}
?>

return s;
},[/code]

And the same with BBCode to html.
This javascript file just has to be parsed with php and the custom bbcodes have to be added to it. With this method, only the user side part should be rewritten, the admin part remains equal.

Post Reply