Hiding HTML view on page load
rak
(http://vanillaforums.org) as a plugin: http://vanillaforums.org/addon/599/cleditor-wysiwyg
The plugin works well without any modifications to the CLEditor v1.2.2
code.
But there is a weird bug on some pages where both the HTML and WYSIWYG
view are visible in the textarea -- this can be 'fixed' by clicking
the HTML button a couple of times to toggle it on and off. Screenshot:
http://imgur.com/YU19L.png
On 'Start a New Discussion' pages the plugin works as expected, the
bug is in the 'Write Comment' textarea of existing discussions.
Both types of page have textareas with 'Form_Body' as the id. The only
difference I can see is the "name=" attribute.
Start New Discussion page textarea tag (CLEditor works correctly on
these pages):
<textarea id="Form_Body" name="Discussion/Body" class="TextBox"></
textarea>
Write Comment textarea tag (CLEditor shows both HTML and WYSIWYG on
these pages):
<textarea id="Form_Body" name="Comment/Body" class="TextBox"></
textarea>
The jQuery in the <head> is:
<script type="text/javascript">$(function() {$
("#Form_Body").cleditor({width:"100%", height:"100%"});});</script>
Is there a jQuery call that will hide the HTML on load? Or is there
something else anyone can think of?
Thanks!
rak
Changing the <head> jQuery to:
<script type="text/javascript">
$("#Form_Body").live("mouseover", function() {$
</script>
textarea. Still not ideal though.
Any ideas on the original problem?
Chris Landowski
I have never seen (and no-one else has reported) the problem you described.
My first guess at the cause of your problem would be that you are
initializing the editor before the page is in a ready state.
Rather than this:
<script type="text/javascript">$(function() {$
("#Form_Body").cleditor({width:"100%", height:"100%"});});</script>
Try something like this:
<script type="text/javascript">$(document).ready(function() {$
("#Form_Body").cleditor({width:"100%", height:"100%"});});</script>
Hope this helps,
Chris
P.S. Sorry it took so long to get back to you , but I have been swamped
since I returned from vacation.
Chris Landowski
-----Original Message-----
From: cled...@googlegroups.com [mailto:cled...@googlegroups.com] On Behalf
Of rak
rak
Thanks for the reply - I bet you're ready for your next vacation!
I tried removing the .live() function and replacing it with
the .ready() you mentioned above, but the original problem reappears -
where the HTML and WYSIWYG views are shown at the same time. It might
be that the Vanilla forum is doing some additional things after the
page reports being 'ready'.
The forum also adds textareas using AJAX (eg. when you edit old posts)
and these don't get a CLEditor toolbar using the original <head>
jQuery. This is where the .live() function comes in useful, as it will
add the CLEditor whenever you mouseover a textarea, although this
isn't ideal in terms of user interaction.
Are there other ways of making CLEditor 'listen' for new textareas and
trigger insertion of the toolbar/iframe?
Additionally, IE8 users are reporting they can't input text on the
forum textarea - but they can on your CLEditor demos. This is odd as
no changes have been made to your v1.2.2 .js or .css.
Vanilla2 forum users have been looking for a WYSIWYG solution for a
while, CLEditor is the closest to a workable solution.
Thanks again,
Rak.
Alexander Liljengård
There should be some other events you can use to add the cleditor to
the textareas.
Why not a mouseenter on body?
Is it possible to write new plugins for Vanilla? Maybe you can try to
override the process to create new textareas with a plugin.
/ Alex
2010/9/3 rak <in...@mirabiliamedia.com>:
Chris Landowski
Well, you definitely should be using the jquery ready method. You do not
want to start initializing new editors before the browser is ready.
During initialization, CLEditor hides its textarea then creates and shows
the iframe. I suspect that there is some Vanilla code that runs after
CLEditor's initialization which is showing ALL textareas (including
CLEditor's hidden textarea) and this is why you are seeing both the HTML and
WYSIWYG views and also why clicking the HTML button a couple times fixes the
problem.
I think your best bet at resolving this problem would be to track down the
Vanilla code that is showing ALL textareas. Any textarea that is associated
with CLEditor will have a jquery .data("cleditor") value set to its
associated cleditor object. This way you could differentiate between
CLEditor textareas and others.
Hope this helps,
Chris
Alexander Liljengård
$("textarea").liveQuery(function() {
alert('New Textarea detected!');
});
/ Alex
2010/9/3 Alexander Liljengård <alex...@liljengard.se>:
Chris Landowski
Hmm, isn’t that basically the same thing as .live() ?
Alexander Liljengård
It seems that liveQuery solves this problem. Some of the functionallity is probably the same, but I recon that there is a few bonuses in this plugin.
However, if thats the way to go, I don't know. I would track down the creation of the textareas and make sure that CLEditor is attached before they are inserted into the DOM.
To be honest I really don't understand the problem properly.
rak
Here's a demo site using the stock CLEditor .js and .css (without
the .live() code)
http://vanilla.labsix.net
login: cled...@example.com
pwd: cleditor
The different scenarios:
A. Click Start a New Discussion
= CLEditor works as expected.
B. Try adding a comment to the 'Test' discussion: http://vanilla.labsix.net/discussion/1/
= bug where HTML and WYSIWYG views are shown (in both edit and Preview
mode)
C. If you create a Comment in a Discussion and click 'Edit' the AJAX
inserted textarea will appear.
I tried using the liveQuery() function, but couldn't get it to work,
this was the line I used:
$("#Form_Body").liveQuery(function() {$
Thanks,
Rak.
On Sep 3, 3:58 pm, Alexander Liljengård <alexan...@liljengard.se>
wrote:
> new elements added after the dom is loaded.
> It seems that liveQuery solves this problem. Some of the functionallity is
> probably the same, but I recon that there is a few bonuses in this plugin.
>
> However, if thats the way to go, I don't know. I would track down the
> creation of the textareas and make sure that CLEditor is attached before
> they are inserted into the DOM.
>
> To be honest I really don't understand the problem properly.
>
>
>
> > Hmm, isn’t that basically the same thing as .live() ?
>
> > Behalf Of *Alexander Liljengård
> > *Sent:* Friday, September 03, 2010 9:39 AM
> > *To:* cled...@googlegroups.com
> > *Subject:* Re: Hiding HTML view on page load
> > Also, did a quick google-search. It seems like
>
> > $("textarea").liveQuery(function() {
> > alert('New Textarea detected!');
> > });
>
> > / Alex
>
> > > There should be some other events you can use to add the cleditor to
> > > the textareas.
>
> > > Why not a mouseenter on body?
>
> > > Is it possible to write new plugins for Vanilla? Maybe you can try to
> > > override the process to create new textareas with a plugin.
>
> > > / Alex
>
Chris Landowski
You definitely have several problems with CLEditor and it probably has
something to do with the 14 external javascript files. I have not spent much
time digging into it, but it appears that most of these javascript files are
not even being used.
The following line in the resetCommentForm function is probably the cause of
your problems:
$(parent).find('textarea').show();
You really should not have any code that shows, hides resizes or focuses the
textarea since it is supposed to be initially hidden. Let CLEditor manage
the textarea and you manage its value.
Once you have isolated the cause of your problem, you could also get rid of
the live function completely.
Hope this helps,
Chris
Chris Landowski
CLEditor. I am definitely seeing some very strange side effects here.
-----Original Message-----
From: cled...@googlegroups.com [mailto:cled...@googlegroups.com] On Behalf
Of rak
Sent: Friday, September 03, 2010 1:31 PM
To: cleditor
rak
Thanks for taking a look at it Chris and the suggestions.
I'll have to dig around the Vanilla documents to see if there's a way
to stop the forum handling the textarea manipulation.
Another user managed to get it working with IE8 by adding a width
setting to the <head> jQuery:
$("#Form_Body").live("mouseover", function()
Rak.
On Sep 3, 8:19 pm, Chris Landowski <chrislandow...@gmail.com> wrote:
> Also, I would not advise using the autogrow or resizable plugins with
> CLEditor. I am definitely seeing some very strange side effects here.
>
>
>
> -----Original Message-----
> From: cled...@googlegroups.com [mailto:cled...@googlegroups.com] On Behalf
>
> Of rak
> Sent: Friday, September 03, 2010 1:31 PM
> To: cleditor
> Subject: Re: Hiding HTML view on page load
>
> Chris/Alex:
>
> Here's a demo site using the stock CLEditor .js and .css (without the
> .live() code)
>
> http://vanilla.labsix.net
>
Chris Landowski
http://premiumsoftware.net/cleditor/demos/demo2.html ), take a look at the
source, it might be helpful.
What you want to do is place your textarea inside a div, initialize CLEditor
with {width:"100%", height:"100%"}, then apply all your resize logic to your
div. After you have resized your div, call CLEditor's refresh method.
Calling the refresh will force CLEditor to resize the textarea and iframe.
rak
Just a quick update... the Vanilla author has come up with fixes for
all the issues we had, now CLEditor works with Vanilla:
http://www.vanillaforums.org/addon/cleditor-plugin
The plugin will probably get a lot of usage now as it's the only
'Approved' wysiwyg plugin for Vanilla. Let us know if all the proper
attributions have been made in the plugin release CLEditor.
Thanks for your hard work on CLEditor.
Rak.
On Sep 5, 3:04 pm, Chris Landowski <chrislandow...@gmail.com> wrote:
> There is an autosize demo on the website (http://premiumsoftware.net/cleditor/demos/demo2.html), take a look at the
Chris Landowski
been ironed out!