1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CK editor/Redactor in XenForo admin panel 1.4.2

Integration of html editors with Bb Codes support for html pages, help pages, email and notices.

  1. cclaerhout

    cclaerhout 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

    Read more about this resource...
     
  2. Adam Howard

    Adam Howard Well-Known Member

    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)
     
    Veer and yavuz like this.
  3. cclaerhout

    cclaerhout Well-Known Member

    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:​

    HTML:
    <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...:​

    Code:
    [center]This is line 1[/center]
    [center]This is line 2[/center]
    [center]This is line 3[/center]
    
    ...whereas is should be:​
    Code:
    [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.​
     
    dwdmadmac, HWS, resonansER and 3 others like this.
  4. cclaerhout

    cclaerhout Well-Known Member

    cclaerhout updated CKEditor for admin pages (nodes) with a new update entry:

    Version 1.1 released

    Read the rest of this update entry...
     
  5. Matthew Hawley

    Matthew Hawley Well-Known Member

    Can you make this work with the 1.2 xf editor?
     
  6. cclaerhout

    cclaerhout Well-Known Member

    No, this editor doesn't suit advanced html edits.
     
  7. cclaerhout

    cclaerhout Well-Known Member

    cclaerhout updated CK editor for XenForo pages (includes an option to parse Bb Codes) with a new update entry:

    Version 1.2 released

    Read the rest of this update entry...
     
  8. cclaerhout

    cclaerhout Well-Known Member

  9. Whatley187

    Whatley187 Active Member

    I have the XenCarta wiki plugin for my site, would this work with that?
     
  10. Drew Turnbow

    Drew Turnbow Member

    Is this going to be updated for 1.3?
     
  11. cclaerhout

    cclaerhout Well-Known Member

    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)
     
  12. cclaerhout

    cclaerhout Well-Known Member

    Sunka likes this.
  13. cclaerhout

    cclaerhout Well-Known Member

  14. Enguerran A

    Enguerran A Well-Known Member

    Very useful, bien joué :)
     
  15. Travis

    Travis Active Member

    Any reason why a page i format like this:
    Screen Shot 2014-10-08 at 6.13.18 PM.png
    Looks like this when saved:

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

    Any help much appreciated!
     
  16. xH3LLRAIZ3Rx

    xH3LLRAIZ3Rx Member

    Can you add the Editor to the Email Users Area under Users and Permissions
     
  17. cclaerhout

    cclaerhout Well-Known Member

    @Travis, contact me by pm and send me the html content of your page.

    Not now, but after why not.
     
  18. cclaerhout

    cclaerhout Well-Known Member

    @Travis,

    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.
     
  19. cclaerhout

    cclaerhout Well-Known Member

    @Travis
    This commit should make the job. You can download the archive here to test it. A new option is enabled in the addon option (see attachment).
     

    Attached Files:

  20. Travis

    Travis Active Member

    Downloaded the archive and that new option isn't there?
     

Share This Page