CLEditor: (yet) another wysiwyg plugin

rak

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!

flipz

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. :)

rusty

I have the same problem.

rak

@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

tmilovan

The new editor works fine for new discussions but does not appears for write comments at all. Im on Vanilla 2.0.3.

rak

@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?

tmilovan

Yes I do.

rak

@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?

Nimaveli

Please, please make a plug-in for a BBCode editor! :D That'd be so amazing.

rak

@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

tmilovan

@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.

thomaswest14

Installed first time no problems.

How do I stop both HTML & Wysiwyg displaying as a default? Looked in the forums attached but no luck.

Lykaon

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.

rak

@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.

Lykaon

@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.

rak

@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.

rak

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.

SpencerMc

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.

rak

@SpencerMc: Try copy/pasting the code snippet above again, it's been updated (the <script> tags were getting stripped out).

thomaswest14

@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?

SpencerMc

@rak:
That did it! Thanks a ton.

rak

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

Lykaon

@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.

rak

@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?!

thomaswest14

@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

tmilovan

@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.

tmilovan

And another thing: It does not clear editor field after posting comments, the comment text just stays there.

Lykaon

@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. :(

rak

@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.

Lykaon

@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.

viziona

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