CLEditor: (yet) another wysiwyg plugin

rak

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