Implemented Redactor Jquery editor instead of Tinymce

[Alpha1]

I really dont like TinyMCE. It feels like I am back at webwizforum in 2002.
XenForo is a modern jquery based platform and therefore should use a modern editor. C

I suggest to implement Redactor:

http://imperavi.com/redactor/

 

[cclaerhout]

Looks good

Works well (there are errors, but its dev version so that's expected), scales nicely

For the design, all the credit goes to the Redactor developers. They seem to be good at it. But there are really some lacks for the node manipulation. I've tried to make a generic function (see above) but it still bugs if you keep changing at the background color (should never occur, but still...). I would really like to see some real efficient tools that I'm not enough good to code.

The main "bugs" with XenForo are all external commands (quote, reply -doesn't reinit the editor, etc).
The missing buttons are the following ones: img (still need to be rewritten), quote (super easy...), and the smiley one (probably the hardest to do after the color picker).
This online version will help me to adjust the "retina" icons. I've never tested it (I'm only starting to understand how responsive css are working) and don't plan to do it now.

 

[cclaerhout]

Since a few posts I've been saying I was having a few problems with the Redactor functions to manage dom elements. Here's a visual example of this with text selection:

• With the native redactor get selection function:
  
• With the Rangy get selection function:
  

Now to be honest, the minified size of the Rangy is identical to the minified size of Redactor: about 50 ko.

P.S: it's not the fault of Redactor, it just uses the standard getSelection methods (which are not cross browsers... as I discovered with quoteMe addon). More information on Rangy website here.


Edit: Funny, I've just received a email from Art (Redactor Developer) telling me that they already thought to integrate Rangy in the future version as an optional addon ^^

 

[cclaerhout]

I've tried to integrate rangy to Redactor using its rangy-cssclassapplier plugin and there are still some problems with Opera. One possible solution might be to integrate the font tag inside the html parser but this tag seems to be depreciated in HTML5. Anyway, I give up. I simply think Redactor is not ready yet, but this is just my opinion.

 

[Teapot]

I've also made a demo of this integration here. I'm sorry but you will need to register to test it. If you want me to delete your account after, just tell me. No need to tell me "this doesn't work, that neither...". I already know it, it's just a demo for fun.

That's looking really good so far - excellent work

 

[cclaerhout]

I gave a quick test to TinyMCE 4. The text styles are still fully compatible with the XenForo parser, and the DOM insertion functions are working thousand times better than those of Redactor. I've also seen than the new TinyMCE accepts custom formats (see here), which could be useful to work with the parser.

 

[AlexT]

Cedric, thanks, that's very nice to hear!!

 

[lostincable]

I gave a quick test to TinyMCE 4. The text styles are still fully compatible with the XenForo parser, and the DOM insertion functions are working thousand times better than those of Redactor. I've also seen than the new TinyMCE accepts custom formats (see here), which could be useful to work with the parser.

Tiny mce update? !!!!

 

[igrec]

+1 on
Redactor for XF

 

[TrevC]

I gave a quick test to TinyMCE 4. The text styles are still fully compatible with the XenForo parser, and the DOM insertion functions are working thousand times better than those of Redactor. I've also seen than the new TinyMCE accepts custom formats (see here), which could be useful to work with the parser.

I'd be happy to help fund any of your Redactor development, I'm sure I wouldn't be alone!

For our personal usage, we really only need the equivalent of a textarea + smilies + attachment support. Attachment management could even be a separate module to the editor, if integrating that in Redactor is too much effort.

I know I hark on about it, but I truly believe that >90% of TinyMCE features are superfluous garbage. It's only suited to crusty old legacy "forums" and ideas. Nobody needs a buggy, bloated, miniature word processor to write a paragraph and share some photos.

 

[cclaerhout]

-

I've stopped the Redactor integration for the reasons you've quoted. I understand that as a designer you care about the look of the editor, but I don't that much. All I need is something that works. Redactor has a nice frontend but with some huge lacks (see above posts) making the editor unfit for a serious integration. I haven't got any problems with the current version of TinyMCE 3.x once the XenForo parser has been patched. I can't say more about TinyMCE 4.0 (the documentation is still being written) except what has been quoted above. If a developer wants to continue the integration, it is available here without the Redactor Javascript files (must be bought). But again the DOM manipulations (the heart of an editor...) & history problems can't be fixed unless to write the functions which require to be as qualified as the TinyMCE or CKeditor developers for a script you don't own. Good luck with that. Since the posts in that section can't be edited anymore, I will not reply anymore to questions here. If you have any, please contact me by pm. Thank you.

 

[TrevC]

If Redactor is ultimately not suitable, I'd still help fund any minimalist replacement for XenForo that focuses on what's most important: user experience on mobile devices + attachment handling.

Although TinyMCE's visual/UI design is well suited to the majority of ugly forums out there, that's not really an issue. I can tidy up any editor styling as needed (lipstick on a pig). It's doable.

What's most disappointing is how TinyMCE loads up a crap-ton of JS+HTML, yet still can't provide adequate functionality on mobile devices without bugging out. I won't even go in to all of the quirks and problems. TinyMCE gets the most vital and basic stuff wrong, while providing a wide array of junk which nobody in 2013 actually needs*

*Yes, I'm aware that many admins running their old-fashioned forums will claim that aligning-text, changing fonts, colours, bbCode, etc, are all vital features for their members. These are the same forums that have giant signatures repeating 20 times on every page. They're like the backwaters of the internet. There's no evolution or progress, but they serve a niche.

I will not reply anymore to questions here. If you have any, please contact me by pm. Thank you.

I lost interest in XenForo politics a long time ago I'm responding here so that others can benefit equally from the discussion and any new information which may surface.

Cheers

 

[TrevC]

Has anyone investigated how feasible wysihtml5 integration would be? It looks very promising.

We'd obviously need to use white-listed HTML elements instead of the current bbCode integration within XenForo. How big of a feat would this be?

http://xing.github.io/wysihtml5/

 

[igrec]

As far as we disguising different products already, I would really like to here what do you guys and gals think of this one? One thing I like about it is when editing source code the buttons are still active which seems has been lost in other editor. And that is very sad

http://markitup.jaysalvat.com/examples/bbcode/

 

[TrevC]

As far as we disguising different products already, I would really like to here what do you guys and gals think of this one? One thing I like about it is when editing source code the buttons are still active which seems has been lost in other editor. And that is very sad

http://markitup.jaysalvat.com/examples/bbcode/

The talented Cédric has already done this:
http://xenforo.com/community/resources/markitup-integrator-2013.1340/

 

[RickM]

Just a note on this if it hasnt already been mentioned. Development on redactor has stopped and its being rewritten. Its got a number of issues, and they arent going to be fixing them on the current version.

That being said, the current version is still a lot nicer than CKEditor, but lacks addons.

 

[TrevC]

Just a note on this if it hasnt already been mentioned. Development on redactor has stopped and its being rewritten. Its got a number of issues, and they arent going to be fixing them on the current version.

That being said, the current version is still a lot nicer than CKEditor, but lacks addons.

Respectfully, does a forum text editor really need "add-ons"? It's probably worth investigating how many of these features are actually necessary for the enjoyment and functionality of your site. If you look at any of the major (modern) social/community platforms, they generally have completely bare-bones editing. These platforms are well thought-out and designed like this for very good reasons. Tumblr has a slightly more comprehensive editor which is actually a customized TinyMCE config, but it's stripped right down to the essentials (bold, italic, links, list, upload photo).

The more I was looking at these editors, wysihtml5 seems like a really nice choice. Clean implementation and markup. Have you checked it out?

 

[RickM]

Respectfully, does a forum text editor really need "add-ons"? It's probably worth investigating how many of these features are actually necessary for the enjoyment and functionality of your site. If you look at any of the major (modern) social/community platforms, they generally have completely bare-bones editing. These platforms are well thought-out and designed like this for very good reasons. Tumblr has a slightly more comprehensive editor which is actually a customized TinyMCE config, but it's stripped right down to the essentials (bold, italic, links, list, upload photo).

The more I was looking at these editors, wysihtml5 seems like a really nice choice. Clean implementation and markup. Have you checked it out?

For the most part, no forums won't have a use for them. There are a couple that are handy though. Things like a spell checker addon are a nice touch as your native OS spellchecker won't work correctly within a wysiwyg box.

 

[TrevC]

For the most part, no forums won't have a use for them. There are a couple that are handy though. Things like a spell checker addon are a nice touch as your native OS spellchecker won't work correctly within a wysiwyg box.

That's not something I've encountered. Which browsers have this issue?

Personally, I don't think spell-checking is something that should be provided in a website or web-app. It's the responsibility of the client/OS to provide such basic feature support.

 

[RickM]

That's not something I've encountered. Which browsers have this issue?

Personally, I don't think spell-checking is something that should be provided in a website or web-app. It's the responsibility of the client/OS to provide such basic feature support.

Can't speak for the new tinymce as I've not had a chance to play with it yet. But with ckeditor 3 and 4 the native spellchecker doesn't seem to work with chrome, Firefox or safari on the mac. It's obviously a problem otherwise there wouldn't be a bunch of spell checker addons out there for them.

 

[TrevC]

Ah! so ckeditor actually breaks that functionality? nice feature Good to know. Even a plain textarea would have working spellcheck.