CK editor/Redactor in XenForo admin panel

CK editor/Redactor in XenForo admin panel 1.4.2

No permission to download


Well-known member
cclaerhout submitted a new resource:

CKEditor for admin pages (nodes) (version 1.0) - Basic integration of CKEditor for the XenForo html pages

CKEditor for admin pages (nodes)
By Cédric Claerhout

This product will add the CKEditor to your html pages. This integration is basic. If you need to configure the editor, please read the official documentation. There are two admin templates that will help you to do that: sedo_pck_header &...

Read more about this resource...
So excited.... Almost there (maybe) ..... If this can be added to the back end .... I'm sure it could be added to the front with a little effort.

Outstanding work you continue to do cclaerhout (y)
I'm going to take a little time to explain why this editor won't be integrated to the frontend.

Except on XenForo pages, user messages (posts/conversations) all require Bb Codes. Even if you use the Rich Text Editor (TinyMCE), all messages will be stored in the database using Bb Codes.

Why Bb Codes?
  • Avoid any error mistakes by users and keep all pages conform to html (if the Bb Codes are correctly written of course)
  • Protect content from any injection
  • Easier to use

When I inspect the content of the Rich Text EditorRTE , I can see the message is using Html...
Yes and the same way when you click on the toggle button a/A the Html code is converted to Bb Codes, it applies a similar conversation when you click on the submit button to store the message with Bb Codes in the database.​
So where is the problem, changing the editor will keep this procedure isn't it ?
In theory yes. The conversion from Bb Codes to Html code is not a really problem since the Bb Codes are a kind of callbacks telling what to do when the Bb Code is found. On the opposite, the conversion from Html to Bb Code is far more difficult: the Html language is more complex than simple Bb Codes snippets. So except with basic tags such as <a><b><i> matching an html content is hard, especially because:​
  1. this code is not exactly the same between editors
  2. all editors are working line by line
Working line by line makes the html matching even harder. A simple example that 99,9 % of you blame TinyMCE for. You wrote several line on your editor and you center them and here's what you got:​
<p style="text-align: center;">This is line 1</p>
<p style="text-align: center;">This is line 2</p>
<p style="text-align: center;">This is line 3</p>

And the Bb Code conversion gives you this...:​

[center]This is line 1[/center]
[center]This is line 2[/center]
[center]This is line 3[/center]

...whereas is should be:​
[center]This is line 1
This is line 2
This is line 3[/center]
If you don't understand why the second pattern is hard to get, just try yourself... and avoid to have any lethal objects close to you when doing it.​
Mmm... so what?
  • So if the html output is not the same from all editors, the converter must be changed and that's not a little job to do
  • So all official buttons/functions which use too much complex html patterns must be disabled
  • So all the XenForo Javascript functions of the new editor must be rewritten and that's a crazy job to do
But will I see one day CKEditor integrated to XenForo?
That's XenForo decision but it's very unlikely. XenForo is currently working on a mobile version. The CKEditor main Javascript file size is about 450 ko, twice more than the current TinyMCE main Javascript file. Redactor editor is 44 Ko. It is not as advanced than CKEditor or TinyMCE but for a Wysiwyg Editor using Bb Codes in the background that's enough.​
Why not use the CKEditor BbCode plugin?
Having a 450 ko editor to use Bb Codes... no thanks. Just use MarkItUp.​
But there are some Raw/Html Bb Codes than allow to use Html code in the XenForo Messages. So we could have an option to load a full html editor too.
In theory yes... but this means to have another Toggle Button to load/unload with Ajax a template with CKEditor for example. That's quite a big thing to do but you can ask someone to integrate this, but not me, I have no time and more than time I've no need for it, which means no motivation.​
cclaerhout updated CKEditor for admin pages (nodes) with a new update entry:

Version 1.1 released

Version 1.1 released
This version is only compatible with XenForo 1.2

  • Option to parse Bb Codes in pages (disable by default)
  • CK Editor updated (last version)
  • Doesn't use anymore templates listeners to integrate the editor

P.S :
  • I publish this release because I needed to keep the same layout in my pages than in posts/articles/etc. thanks to Bb Codes. It's working for me. If it doesn't for you,...

Read the rest of this update entry...
cclaerhout updated CK editor for XenForo pages (includes an option to parse Bb Codes) with a new update entry:

Version 1.2 released

Version 1.2 released
  • Add an option to use the default editor
I wanted to see if I could use TinyMCE Quattro there, but no, it's too complex to achieve something simple. TinyMCE Quattro and the Buttons Manager (not matter it's for Redactor or TinyMCE) will not work here because we can't get public templates from the admin side. And I'm not going to copy/paste and recreate all templates modifications for this ; this would be stupid. It would be clever to create a public...

Read the rest of this update entry...
Preview of 1.3 version on Github:
  • Add CKE/Redactor for notices and help pages
  • Same thing for Bb Codes support
  • Fix extra breaks (<br />) when using Bb Codes in html
  • Redactor html wysiwyg with white space between lines (after a cariage return)
Any reason why a page i format like this:
Screen Shot 2014-10-08 at 6.13.18 PM.webp
Looks like this when saved:

Screen Shot 2014-10-08 at 6.13.28 PM.webp

Any help much appreciated!

This issue (there's another one if you enable the Bb Codes but I will make a workaround for it) occurs because XenForo has used a reset css, so the original browser css params are lost. A solution is to recreate these original values (yahoo YUI has already a solution for this - ref). I will integrate it as an option. But if some Bb Codes are used, this option should be disabled and the selected content would have to wrapped into a html tag with a specific class to enable the YUI base css. I know it's confused, but Iwill explain it better when I will have coded this.
Top Bottom