CLEditor: (yet) another wysiwyg plugin
  • rakrak
    Posts: 74
    This discussion is related to the CLEditor jQuery WYSIWYG addon.
    Progress with jwysiwyg has pretty much stalled without any resolution of the bugs others have highlighted.

    Last week I came across a new jQuery wysiwyg plugin called CLEditor.

    I've made a Vanilla plugin using it: CLEditor for Vanilla

    It's functional with the 'stock' .js and .css, it also allows editing of the HTML - unlike jwysiwyg.

    On Vanilla 2.0.3 you need to update the file applications/dashboard/modules/class.headmodule.php - insert this at line 269:
             foreach ($this->_Strings as $String) {
                $Head .= $String;
                $Head .= "\n";
             }
    One tweak you can make is to edit line-19 of jquery.cleditor.min.js to remove extra toolbar buttons, eg. cut/copy/paste might not work on your system.

    BUGS: There's a bug where both the HTML and WYSIWYG view are visible in 'Write comment' textarea in a Discussion. This is 'fixed' by clicking the HTML button a couple of times. Try this fix:

    Edit plugins/cleditor/default.php and change line-43 to:
    $Sender->Head->AddString('$("#Form_Body").live("mouseover", function() {$("#Form_Body").cleditor({width:"100%", height:"100%"});});');
    There's probably a way of fixing this with a jQuery call, one of these pages might help a jQuery-guru figure it out:
    http://premiumsoftware.net/cleditor/docs/GettingStarted.html#internalObject
    http://groups.google.com/group/cleditor/browse_thread/thread/d0f916101fe16903/

    Try it out and let us know how it goes!
    Tagged:
  • flipzflipz
    Posts: 2
    I installed it and activated it without any issues but it's not doing anything. I have tried with creating a new discussion or posting a response to one and the toolbar never shows? I am on 2.0.3. I haven't made any .js changes and don't have any other wysiwyg editor installed. Maybe I'm doing something wrong. :)
  • rustyrusty
    Posts: 19
    I have the same problem.
  • rakrak
    Posts: 74
    @flipz & @rusty: on 2.0.3 you need to update the file applications/dashboard/modules/class.headmodule.php - insert this at line 269:
    foreach ($this->_Strings as $String) {
    $Head .= $String;
    $Head .= "\n";
    }    Save the file and reload to see if you can see the CLEditor toolbar

    This fix is mentioned here: http://github.com/ShadauxCat/Garden/commit/4ade3f7d65811bc5d7fa013720fb70ee3a21fdc8 & here: http://vanillaforums.org/discussion/12509/vanilla-2.0.3-released
  • tmilovantmilovan
    Posts: 102
    The new editor works fine for new discussions but does not appears for write comments at all. Im on Vanilla 2.0.3.
  • rakrak
    Posts: 74
    @tmilovan: I haven't seen this on the installations I've tested CLEditor. If you view the source of the 'Write comments' page, do you see the CLEditor .css, .js and script tags?
  • tmilovantmilovan
    Posts: 102
    Yes I do.

  • rakrak
    Posts: 74
    @tmilovan: And you've applied the fix to class.headmodule.php shown above? Have you tried disabling your other plugins to see if it's conflicting?
  • NimaveliNimaveli
    Posts: 93
    Please, please make a plug-in for a BBCode editor! :D That'd be so amazing.
  • rakrak
    Posts: 74
    @Nimaveli: See @Tim's comment http://www.vanillaforums.org/discussion/comment/103975/#Comment_103975 and maybe someone wants to try making a plugin with Markitup: http://markitup.jaysalvat.com/downloads/demo.php?id=markupsets/bbcode
  • tmilovantmilovan
    Posts: 102
    @rak: yes I did. But I did not tried to dsiable all other plugins since this is my production environment. I'll try it on separate installation.
  • thomaswest14thomaswest14
    Posts: 7
    Installed first time no problems.

    How do I stop both HTML & Wysiwyg displaying as a default? Looked in the forums attached but no luck.
  • LykaonLykaon
    Posts: 101
    I have the same problem as @thomaswest14. Everything I type is "copied" to a second box at the bottom and it's the only part that shows the WYSIWYG part.

    So far, I'm 0 for 3 on getting any of these Wysiwyg plugins to work without major quirks.
  • rakrak
    Posts: 74
    @thomaswest14 & @Lykaon: That's a known bug that we're trying to figure out -- Not a true solution, but If you click the 'HTML' button a couple of times it will display just the WYSIWYG view.

    Are you seeing it on 'Start a New Discussion' textareas also?

    CLEditor is the closest to a 100% solution for WYSIWYG on Vanilla I've seen - if we can figure out this little quirk!

    The previous attempt, jwysiwyg, stalled trying to figure out its quirks.

    I've posted a question on the CLEditor Google group, so we hope to have a fix soon - CLEditor's author is on vacation until Aug 30.
  • LykaonLykaon
    Posts: 101
    @rak: fwiw, I only see it when replying to a thread. Starting a new discussion doesn't seem to manifest this issue.

    On a side note, any plans to make this addon also work when you edit a post? So far, that seems to be a weakness of all of the wysiwyg plugins.
  • rakrak
    Posts: 74
    @Lykaon: Edit posts will probably take more jQuery work as the 'Edit' textarea is called after the page loads.

    If anyone has any insight into calling jQuery (or having CLEditor 'listen' for new textareas) when the author clicks 'Edit', please comment here.
  • rakrak
    Posts: 74
    Here's a temporary fix for the bug of showing both the HTML and WYSIWYG view (and the 'Edit' textarea problem @Lykaon mentioned). Using jQuery 1.4+'s .live() function, the CLEditor toolbar will be added when you mouseover any textarea.

    Edit plugins/cleditor/default.php and change line-43 to: $Sender->Head->AddString('<script type="text/javascript">$("#Form_Body").live("mouseover", function() {$("#Form_Body").cleditor({width:"100%", height:"100%"});});</script>');
    (*updated*)

    A step towards a full solution. Please let us know if this works for you.
  • SpencerMcSpencerMc
    Posts: 16
    This fix doesn't seem to work for me. The formatting bar disappears completely (mouse over included) and for some reason the line "$("#Form_Body").live("mouseover", function() {$("#Form_Body").cleditor({width:"100%", height:"100%"});}); " appears at the top of my dashboard above the forum name.
  • rakrak
    Posts: 74
    @SpencerMc: Try copy/pasting the code snippet above again, it's been updated (the <script> tags were getting stripped out).
  • thomaswest14thomaswest14
    Posts: 7
    @rak & @Lykaon

    Changed script and works great in both comment and new discussion, if it could work on the edit pages too that would be great but this is the first WYSIWYG editor that I have successfully installed and is working well. 1 out of 3

    Could anyone help me put an 'add image' button / browse/ upload it to the site, with up to 9 images displaying under the discussion or comment similar to the images in the vanilla plugins?
  • SpencerMcSpencerMc
    Posts: 16
    @rak:
    That did it! Thanks a ton.
  • rakrak
    Posts: 74
    thomaswest14 said:

    ... if it could work on the edit pages too that would be great ...

    Doesn't the fix above make it work on Edit pages too?
    (Please post the last part of the URL/path of one of these pages)
  • LykaonLykaon
    Posts: 101
    @rak

    That fix is perfect. It works on edit and new posts. The only slight downside is that it feels a little weird to have it pop up on mouseover. But that's a small quibble.

    With that fix, this wysiwyg plugin is by far the leader of the pack for Vanilla 2.
  • rakrak
    Posts: 74
    @Lykaon: Thanks for the vote of confidence! But, it's not a perfect solution (I don't think it works well with the 'Preview' tab either.)

    Having said that, after finding that jQuery live() function, I'm sure there's a way to extend it so that it adds toolbars without the need for a mouseover.

    Where are all jQuery ninjas when you need them?!
  • thomaswest14thomaswest14
    Posts: 7
    @rak sorry special needs in the corner here - yes it works on the editor too.

    Mouseover fix would be good - best wysiwyg editor for Vanilla
  • tmilovantmilovan
    Posts: 102
    @rak: after applying this latest fix it seems to be working for me too. However we have found slight conflict with "Quote selection" plugin. It sometimes convert ">" character (which is usied for quotes) to html safe character, thus rendering Vanilla unable to format quote properly.
  • tmilovantmilovan
    Posts: 102
    And another thing: It does not clear editor field after posting comments, the comment text just stays there.
  • LykaonLykaon
    Posts: 101
    @rak: another con that's actually going to make me disable the plugin. Users can't enter any text in the box at all in IE8. :(
  • rakrak
    Posts: 74
    @Lykaon: Re: IE8... Please let me know if the original CLEditor works on IE8: http://premiumsoftware.net/cleditor/demos/demo1.html - Thanks!

    @tmilovan: I'll take a look at that, there's probably a way to make CLEditor clear the field with jQuery when Vanilla creates the new posting.
  • LykaonLykaon
    Posts: 101
    @rak: Yes. That link works fine in IE8. But the plugin in Vanilla just flashes a cursor in the middle of the box and doesn't let me type in anything.
  • vizionaviziona
    Posts: 58
    most of my users insert image and then would like to make this image a link
    (even the original) cleditor does not allow that

    in order to temporarilly enable this I have patched jquery.cleditor.min.js, so that part:
    if(f=="url"){if(d=="link"&&I(b)=="")
    becomes:
    if(f=="url"){if(d=="link"&&I(b)=="" && 0)

    while this is not best solution, it might help someone
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter
Sign In Apply for Membership

Categories

In this Discussion

Who's Online 2

JhauraWpaintballer82