PHPBB3-10418 - WYSIWYG Editor/Rich Text Editor

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB. Upcoming releases are 3.2/Rhea and 3.3.
Post Reply
User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by brunoais » Thu Aug 16, 2012 7:36 pm

WYSIWYG editor news report, status update, current thoughts, current decisions and opinion requests:

You can find a resume of this in the next post

After testing TinyMCE, CKEditor and SCEditor the team (me and EXreaction) have decided to keep SCEditor.
The rationale behind it is that:
TinyMCE -> The BBCode plugin is too buggy, incomplete and the code is not easy to read, the text editing mode disables all BBCode buttons.
CKEditor -> The BBCode plugin is too buggy and incomplete. It would take a fair amount of work to fix it, the text editing mode disables all BBCode buttons.
SCEditor -> The BBCode plugin is mostly complete, works quite well, I only know about 1 bug so far which is probably easy to solve, allows us to add BBCode in a very simple and working way, the text editing mode allows to keep all BBCode buttons enabled.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now, we have to think which problems we need to address to make an, at least, acceptable WYSIWYG editor.
To solve that, we've investigated multiple BBCodes that are free and made made for phpBB we found out there in the W3 (AKA WWW).
After we've made the investigation until this far we came up with 5 points we just cannot ignore in order to make a proper WYSIWYG editor for phpBB.


1. There's the need to exist a separate textarea for the HTML replacement specially made for the editor (no viable replacements for this are found) in the ACP in the BBCode module.
The reason behind this is quite simple. There are BBCodes that (YMMVAPD) require to appear slightly different in the WYSIWYG editor than how they appear in the final version even if we are only talking about changing minor stuff.
The most notable BBCodes I found that make this really looking like a must have were the youtube BBCode and the spoiler BBCode.
We also came to the conclusion that there can exist admins that, for certain restricted BBCodes, just want to use the same way as they are currently used, without any formating change in the WYSIWYG editor itself.
The advantages of having this extra are huge compared to the disadvantages so we agreed that this should be a must!

2. The editor already has loads of replacements installed that uses the browser's internals to apply 'em. Maybe we could take advantage of that.
I don't really know what the dev team of phpBB thinks about this, anyhow, it's true. The WYSIWYG editor uses the browser's doCommand() method to apply many of its predefined actions of its buttons Something that is native is usually good and for all browsers phpBB supports, in my tests the behavior was really great in all browsers phpBB gives support to. The idea behind this is a discussion is to conclude what should we do about this information.
We could make more BBCodes to match all or some in the editor, we could just ignore 'em, we could make some kind of "vodoo" ( :D ) detection and use it in the replacements when the BBCode is meant to do the same as the custom BBCode... Other options may appear.

3. There are BBCodes that cannot be altered or it is unavoidable to alter while in the WYSIWYG mode.
A "changeable only in BBCode mode" button may be a good option as it provides better, more reliable way to go from the WYSIWYG mode back to the BBCode mode.

I don't really know about how much strength should be given to this thing but, certainly, it can allow more precise and new browsers work proof when going back and forth between the WYSIWYG mode and the text editor mode as no real HTML parsing is needed at all.

4. The order of the infos may not be the same. Save the order as they appear in the HTML vs the order they appear in the BBCode.
E.g.
[abc]uio,huh,ui[/abc] -> <span title="ui"><b class="huh">uio</b></span>

This is a stupid, yet valid example of a possible BBCode the system may have to deal with one day or the other.
To solve such problem one idea is to obtain the order they appear in the HTML vs the order they appear in the BBCode. This can easily be solved using a simple array to associate position in the HTML -> position in BBCode. The other way around is always trivial in every single test we've made.

5. There can be repeated information from the BBCode towards the final HTML.
If it's changeable, which one should be used when going back to the original BBCode? Which one was the one the user was able to change while in the WYSIWYG?
If the user was able to change both, only one counts, right? So just looking at the one that changed from the original is no option.
Alternatively, if we keep both in sync there's no questioning about which one contains the correct information.
E.g.
[titled]{text}[/titled] -> <span>{text}:</span><span>{text}</span>
[titled]I towt I saw a pootycat[/titled] -> <span>I towt I saw a pootycat:</span><span>I towt I saw a pootycat</span>


Another silly example with a properly valid BBCode. This is another problem that we'll need to prepare for. When there are two matches in the HTML side for a token in the BBCode side. How to solve this?
I came up with the idea of using a prefix in the token. Something like {C_*} (E.g. "{C_TEXT}") in which, this one would be the one that is meant to keep and the other is meant not to keep. Even if it's changed, those changes are ignored for the {TEXT} and only the {C_TEXT} is taken attention when going back to the BBCode.
EXreaction came up with a different idea. His idea is to use javascript to keep all off those in sync. Sounds good, no? Well... not really. To have that working, we'll need to be prepared for our "friend"IE8. Yes... IE8 (I won't repeat myself, just read it below) (...). So... We can then question ourselves... how to do this? Well... if we change the source code of SCE and prepare it for IE8 in such way that we override the copy of the current block element to do the new line into placing a <br> (or it's xHTML counterpart) we may have this made easier. Another problem... How should such code work? I'll leave that question opened.
EXreaction Also came up with another possible solution which is to use HTML comments to delimitate where are each of the informations needed for the BBCode.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Another subject that makes sense to discuss is to make a verbose mode. Well... It wouldn't be actually a "mode". It would be 4 extra textareas, hidden by default, that would be used such way that the user may completely personalize the behavior of the BBCode to HTML translation and back and also to personalize what happens when a button is pressed. With this one could even do a modal box to request additional information from the user and not just use the possibility of selecting the text and place it between the tags. Multiple formatting is possible and possibilities ate limited only by the limits of HTML and javascript itself.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

SCE uses images for its buttons. Actually, it uses the background-image for each and every button (bold, italic, etc..., not forgetting the advantages of sprites).
This means that custom BBCodes will need to have an image or there's a need to generate, somehow, an image automagically for a custom BBCode.
To make one automagically, there's no need to go far. Just use the text of the tag and place it over a predefined image and there you have it.
Otherwise, the user is able to upload an image meant to be used for the button for the corresponding BBCode.
What do you think we should do? Create an optional input@type=file such that if the user sends a file, if it's an image, it is used otherwise an automagic image is generated?

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

A problem... Our "friend" IE8.
IE8 has a noticeable bug that is specially noticed every time you use enter in your code and it just uses a copy of the current block element to mark the new line. There's a way to tweak that. Just need to take some crack (everybody knows that you need to be on something in order to have the patience you need to do something just for IE) and hammer the keyboard to cook something that removes the differences between IE8's trident and the other one's browser engines.



This is all that I can remember that is needed to keep you guys updated on the current status of the WYSIWYG editor for phpBB. I'll edit this post as I remember of extra stuff that may be useful for the area51 users I'll edit or post an extra post with the extra information.
Last edited by brunoais on Mon Aug 27, 2012 9:42 pm, edited 1 time in total.

User avatar
EXreaction
Registered User
Posts: 1555
Joined: Sat Sep 10, 2005 2:15 am

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by EXreaction » Mon Aug 27, 2012 7:18 pm

After testing TinyMCE, CKEditor and SCEditor the team (brunoais and EXreaction) have decided to keep SCEditor.
The rationale behind it is that:
TinyMCE -> The BBCode plugin is too buggy, incomplete and the code is not easy to read, the text editing mode disables all BBCode buttons.
CKEditor -> The BBCode plugin is too buggy and incomplete. It would take a fair amount of work to fix it, the text editing mode disables all BBCode buttons.
SCEditor -> The BBCode plugin is mostly complete, works quite well, I only know about 1 bug so far which is probably easy to solve, allows us to add Custom BBCode easily, the text editing mode allows to keep all BBCode buttons enabled.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

  1. In WYSIWYG mode, using some kinds of BBCodes (like inline youtube videos), would make editing more difficult.
    To get around this, we've decided that the best option would be to allow administrators a few additional options in the ACP.
    • First new option: Checkbox, display BBCode Inline in WYSIWYG (no means just the raw BBCode is shown)
    • Second new option: Checkbox, use custom display method for WYSIWYG mode (no means the normal HTML replacement is used)
    • Third new option: Textarea, Custom display method output (HTML replacement for the BBCode in WYSIWYG mode, only if custom display method is checked)
    This should resolve most issues that users could have with certain custom bbcodes, but it may require more work by the administrator to edit the display to make them usable (or they will just have to disable the inline display). The downside here is that these are some additional, potentially confusing, options administrators will have to use when creating BBCodes.
  2. Another issue related to the one above is that, by just letting some BBCodes be displayed inline, users will run into issues sometimes where the contents within the bbcode are not editable because the text is not displayed within the replacement (for example, a youtube video). There should be some way for the user to edit these more easily, perhaps with some sort of popup box via either a right-click option or some sort of overlay with an edit button. This behavior needs to be decided so that it works for any bbcode either natively or with some administrative configuration.
  3. For bbcodes with multiple replacements, there are two significant issues that makes editing them in WYSIWYG mode difficult:
    • [abc]uio,huh,ui[/abc] -> <span title="ui"><b class="huh">uio</b></span>
      When displayed in WYSIWYG mode, in this example, only the first item, uio, would be visible (of course this is only a single example and in real use many significantly different uses could be in use).
      So the question is, how would the user be able to edit the stuff in this bbcode without going back to source mode?
    • [abc]test[/abc] -> <span title="test">test</span>
      This is an example where the user might have a single input and have multiple areas that the text is shown in the replacement.
      When in WYSIWYG mode, these items would need to be syncronized somehow for accurate display, and the question here is, how could that be done?
  4. Browsers already natively support text transformation for some basic replacements (bold, italic, etc).
    We can either use these native text transformations or ignore this ability and transform the text as other bbcodes will be.
  5. Since buttons are used in the editor to input custom bbcodes, there are two options to generating them.
    • Allow the administrator to upload an image for the button (the administrator should be able to use different button images for each style they have as well)
    • We generate them automatically by applying some text over a "button" that is really just a background image. How we decide what text to use here is another question (maybe a new option is needed in the admin cp to specify the text?)

necer_cheniki
Registered User
Posts: 8
Joined: Thu Aug 11, 2011 5:47 am

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by necer_cheniki » Wed Nov 21, 2012 8:28 am

I don't know if you have taken final decision about the editor, but where is an alpha version of a nice editor here : https://www.phpbb.com/community/viewtop ... 8&start=45

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by brunoais » Wed Nov 21, 2012 10:11 am

There's no final decision yet. But the one who is winning for now is SCE.
If you think that one is better than SCE tell us exactly why. I just don't understand anything in that editor's home page, so I believe that getting support in english isn't that easy either, but I may be wrong.
For the record, this is the link to that editor:
http://www.wysibb.com/

Edit:
I made up my mind and went checking out the source code. Just giving it a glimpse.
I does not sound bad. Looks reasonable, but I was unable to read it properly. Anyway:
If I understood it right, you don't make a tree out of the BBCode. That's a lot prone to errors, you need to be careful about that (didn't test it).

Basically, if you want me and EXreaction (i may only talk for myself) to decide to use that editor you need to prove us that that editor is better than SCE. For that, you need to start by checking that it solves all the problems I pointed out in this topic.
examples:
viewtopic.php?f=108&t=35703&p=240595#p240595
viewtopic.php?f=108&t=35703&p=236013#p236013
viewtopic.php?f=108&t=35703&p=237479#p237479

IIRC SCE solves all the problems I pointed out, but it may contain problems that I didn't notice.


ADD:
Since p@p started using IP.B, I've been dealing with CKE in my day-to-day basis.
My conclusion is that CKE's BBCode system is just another piece of ****. I don't really know whose real fault it is but I get really p*ssed off with its problems of how defective (in usability) CKE is.
As a note: There's nothing wrong with CKE for HTML editing, the problem with CKE is only in BBCode and HTML to BBCode processing. That's where it is just another piece of trash.

necer_cheniki
Registered User
Posts: 8
Joined: Thu Aug 11, 2011 5:47 am

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by necer_cheniki » Wed Nov 21, 2012 7:43 pm

I not the writer of this editor, it was just a suggestion.
Can we invite wysibb editor writer to participate ?

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by brunoais » Wed Nov 21, 2012 7:57 pm

Of course.

wysibb
Registered User
Posts: 9
Joined: Thu Nov 22, 2012 7:05 am

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by wysibb » Thu Nov 22, 2012 7:15 am

Hi. I am wysibb author. WysiBB already working on the suport forum. The support forum now used beta version of wysibb - 1.3.0.

o see it in works you may login with:

Username: test
Password: develop

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by brunoais » Thu Nov 22, 2012 2:09 pm

If you want me to decide to use this editor, please state what does this editor has in advantage towards SCE.
Focus on the points I stated two posts before:
brunoais wrote: Basically, if you want me and EXreaction (i may only talk for myself) to decide to use that editor you need to prove us that that editor is better than SCE. For that, you need to start by checking that it solves all the problems I pointed out in this topic.
examples:
viewtopic.php?f=108&t=35703&p=240595#p240595
viewtopic.php?f=108&t=35703&p=236013#p236013
viewtopic.php?f=108&t=35703&p=237479#p237479

IIRC SCE solves all the problems I pointed out, but it may contain problems that I didn't notice.
I noticed it shows up as superior to CKE and TinyMCE already. It solved one of the major problems in those two as it allows to change the BBCode source using the buttons.
But... Even if I change the forum language it is still in russian(?) even though I have the forum system in english.
I cannot understand what it has written. In order for me to decide to use it, that needs to be solved before my final decision.

Can you prove that wysibb is better than SCE by showing it's strongest points and its weakest points from the characteristics that me and the others are looking for?

wysibb
Registered User
Posts: 9
Joined: Thu Nov 22, 2012 7:05 am

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by wysibb » Fri Nov 23, 2012 9:05 am

WysiBB and SCE completely different editor. Try to enter BB code quota, how it will show in wysibb and SCE.

In WysiBB it looks like this: http://imm.io/MCJ6
Screenshot created by Google Chrome extension of WysiBB. Now It is under development.

In SCE editor as i now, you can not create hard bb codes with several tags.

Now on the support forum work beta version of WysiBB 1.3.0, so you can't see english localization. But i fix it. Go to the forum and see it in action.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] WYSIWYG Editor/Rich Text Editor

Post by brunoais » Fri Nov 23, 2012 9:18 am

In SCE you can make BBCode like that quote. I know it because I already made it to try it out.

What do you mean by hard BBCodes with several tags?

The presentation is the easiest part to fix. It's just 1 thing or 2 and I'm done (1 day's job is enough to change the presentation to have exactly the same presentation as the current phpBB).That's not going to be the best way for you to prove that yours is better.

[-1] In the WYSIWYG mode, currently, you don't allow nested tags. That's not a good way to go...
[-1] List feature (both ordered and unordered) look good until I view the source. The whole list becomes one lined. That is hard to read.
[-1] The undo feature is buggy. Sometimes it does not do what one would expect to do.
[+1] For toggled BBCode like bold and italic, I like that the buttons reflect if any of those is activated while typing or moving the cursor.
[-5] You don't use valid HTML. For example, the font BBCode uses the <font> tag.
[?] How do you prevent the user from messing up with the rest of the page's HTML or prevent from activating any action that may generate odd behavior (I don't really know examples)? Also, how do you prevent that the contents do not appear properly in your system because there were changes in the CSS (I'm more about the CSS than the HTML) or the HTML or whatever reason? I confess, I don't have any knowledge about this part. I never worked with a WYSIWYG editor that does not use an iframe.
[±0]Does not use an iframe, so no extra memory is used for the extra page inside the page. But is that an improvement or a flaw?
[+1]Personalized HTML for the "button".

In a quick 10 mins look, this is what I found. Dunno if there are more good things (+1 things) or if there are more bad things (-1). Anyway, if this is meant to win against SCE, it needs to have only good things against SCE.

Oh! And it needs to be prepared for the phpBB3.1 (or 3.2)'s new BBCode system. All BBCode is custom BBCode. There's no more "special" BBCode. All is parsed the same way, with the same set of rules. SCE is more prepared to have such thing yours... Does not seem as much prepared. Granted, it's still alpha... If you cannot prepare it to be, at least, RC (not just the name but actually its behavior and nº of bugs) I'll go with SCE.
Anyway you still have time. I'm still working on the BBCode parser and this depends on the BBCode parser.

Post Reply