CKEditor and TinyMCE cannot click into the text

If you have questions about using mojoPortal, you can post them here.

You may want to first review our site administration documentation to see if your question is answered there.

This thread is closed to new posts. You must sign in to post in the forums.
11/26/2011 4:28:02 AM
Gravatar
Total Posts 537
feet planted firmly on the ground

CKEditor and TinyMCE cannot click into the text

I'm finding some bad behaviour (in both Tiny MCE and CKEditor) in a site... when I edit the HTML Content, the cursor doesn't want to click into the text.  Instead, clicking somewhere in the text selects the paragraph container and puts selection handles around it - the cursor changes to a cross for dragging. I have to click repeatedly to get into the text, and it feels very sluggish.  I have tried switching off SCAYT and it doesn't seem to help. I've also tried a couple of different skins with no change. I have another site on the same Arvixe server that is not affected. Any ideas?

mojoPortal Version 2.3.7.0 MSSQL

Operating System Microsoft Windows NT 6.0.6002 Service Pack 2

ASP.NET Info v4.0.30319 Running in Full Trust

Later... OK I find that this problem IS related to the skin. Using the "hobbit" skin the problem goes away, but using the Artisteer 3 skins it comes back again. If I find a clearer pattern I will add to this post.

 

11/26/2011 4:19:44 PM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

After more testing... now really puzzled - I only have this problem on Arvixe hosted sites, and only in IE, and only on Artisteer 3 skins.

I have set the mojoPortal demo site into the same skin - no problem clicking into the text in CKeditor.

 

Any ideas why I'm getting this problem on Arvixe and not on other 2008 servers?  Or what is up with Artisteer 3 skins?

11/26/2011 6:01:22 PM
Gravatar
Total Posts 55
mojoPortal Community Expert
Arvixe Web Hosting / mojoPortal Community Liaison Looking for quality mojoPortal hosting? Try Arvixe Check out the MojoPortal Blogs at Arvixe

Re: CKEditor and TinyMCE cannot click into the text

I seem to be getting the same or similar happening. I hadn't noticed it because I generally use Chrome which works fine.

Plain text seems to work to a degree (as if each paragraph is a separate object like in a dtp program or something), but one of my HTML blocks has a largish photo in it with text to the left. When I edit using ie I see the photo but not the text. I did manage to get at the first paragraph of text by putting my cursor after the photo and pressing the down key, but its clearly not working correctly.

(btw Crispin, must say those Brecon Fans Races look great)

11/27/2011 6:57:57 AM
Gravatar
Total Posts 18439

Re: CKEditor and TinyMCE cannot click into the text

Hi,

I would use Firebug and specifically the network tab to review requests for individual items. The editors tend to load additional javascript files for various plugins and possibly there are files that have bad permission or are not getting loaded for some reason.

I would also determine what version of the editor is on the page by viewing the source you should see the version as part of the url for the main editor javascript.

If the installation has been upgraded over time, you could potentially revert to older versions of the editor which probably still live on disk under /ClientScript

The version used is configured from Web.config like this:

<add key="CKEditor:BasePath" value="~/ClientScript/ckeditor362/"/>

so if you still have older versions of the editor you could try pointing to one of them and see if the problem happens in older versions or not.

I tend to always upgrade to new versions of the editors as soon as they come out but like any software there can be new bugs or regressions in new versions even though most new versions report that they fixed a lot of bugs. I think the guys who make CKeditor and TinyMCE have a difficult task trying to essentially make a word processor in javascript and keep up with all the changes in web browsers and web standards.

It would be good to isolate the problem definition as much as possible in terms of editor version, language used (either the browser preference or what is forced by configuration), which browser(s)/versions of browsers are affected, which skins work and which do not.

Best,

Joe

11/27/2011 9:26:52 AM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

OK some more information from testing.

Editor: the problem affects both CKEditor and TinyMCE, in exactly the same way.

Browsers: the problem does not occur in Firefox 7.0.1 or Chrome 15.0.874.121m. It does occur in IE9 and IE8.

Skins: the problem does not occur in:

  • Artisteer-30alphamotors
  • Artisteer-30business1
  • Artisteer-greenlagoon
  • Artisteer-swirly1

It does occur in:

  • Artisteer-30flashclouds
  • Artisteer-30headermenu
  • Artisteer-30pattern1
  • Artisteer-30topmenu
  • Artisteer-30verticalmenu1 (and 2 and 3)

? meaning...? well the bad ones all have fixed width content with rounded corners. The good ones do not.

Environment:  the problem occurs on Arvixe hosting, but not on my "work" servers (with same skin and page content). mojoPortal reports the environments as:

Arvixe:

  • mojoPortal Version 2.3.7.0 MSSQL
  • Operating System Microsoft Windows NT 6.0.6002 Service Pack 2
  • ASP.NET Info v4.0.30319 Running in Full Trust

My "work" servers:

  • mojoPortal Version 2.3.7.0 MSSQL
  • Operating System Microsoft Windows NT 6.0.6002 Service Pack 2
  • ASP.NET Info v4.0.30319 Running in Full Trust

i.e. identical.

OK what about the web requests... well I see no bad requests in Fiddler when going into editing (on either site).

Could it be timing?

Latency:  site on Arvixe responds to ping in around 184ms

Site on my "work" servers responds to ping in around 45ms.

and Fiddler shows that most of the individual requests are about twice as fast on the site where the editor shows no problem, e.g. SessionKeepAlive.aspx in 0.11 seconds instead of 0.23s.

Verdict...?  Well it is something to do with the Artisteer rounded corners, when the site hosting is less responsive, and you are editing with IE8 or 9.  Hmm I think I'll edit in Chrome until someone cleverer and more patient than me can sort this one out!

11/27/2011 9:49:54 AM
Gravatar
Total Posts 18439

Re: CKEditor and TinyMCE cannot click into the text

Thanks, that is all helpful information.

Do you have any older versions of the editors on disk at Arvixe under /ClientScript?

Could you try changing the enabled version of the editor(s) and see if the same problem exists in older versions?

You can see the CKeditor changelog here and the TinyMCE one here. They list lots of browser specific issues especially for IE fixed in various versions but there can be regressions or new ones.

 

11/27/2011 10:39:21 AM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

The testing above was done in CKEditor 362.  I also have CKEditor 361 and it exhibits the same behaviour.

I'll hunt around for an older version in other sites and report back...

 

11/27/2011 10:43:36 AM
Gravatar
Total Posts 18439

Re: CKEditor and TinyMCE cannot click into the text

One more thought. During upgrades we never touch the skins under the site folder, though we do sometimes update the skins under /Data/skins

For the skins where the problem happens it would be good to copy them from /Data/skins into the site specific folder to confirm that the problem happens even with the latest version of the skins.

Thanks,

Joe

11/27/2011 10:49:40 AM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

Pretty sure these are the latest skins - I set this particular site up in 2.3.7.0

I've now tried CKEditor 351 but it won't load at all: I get a 404 on this request

/ClientScript/ckeditor351/plugins/onchange/plugin.js?t=B0VI4XQ

?

 

11/27/2011 10:54:33 AM
Gravatar
Total Posts 18439

Re: CKEditor and TinyMCE cannot click into the text

you could copy that plugin from the plugins folder in one of the newer versions. That was added not long ago to provide a warning if the user has un saved changes in the editor and tries to or accidently navigates away from the edit page.

11/27/2011 11:05:57 AM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

Done - same problem with CKEditor 351

 

11/27/2011 11:16:03 AM
Gravatar
Total Posts 18439

Re: CKEditor and TinyMCE cannot click into the text

I guess the next thing to try would be to comment out the style.css in the style.config file of one of the affected skins to verify that it is caused by the artisteer css.

I might also try removing this from the layout.master to see if the javascript added by Artisteer is a factor:

<portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="script.js"  />

I appreciate you taking the debugging steps since I don't have an installation where the problem happens.

Another thing that would be worth trying, we use the same css in the editor as in the page but there is a web.config setting that can specify an override url for editor css

You could put an empty css file in the root and point to that like this:

<add key="EditorCssUrlOverride" value="/emptycssfile.css"/>

If that solves it we can be sure it is caused by css and then we can try to narrow it down and override it in style-artisteeroverrides.css

To narrow it down one could go through style.css and start commenting things out until it is fixed and put things back until it breaks again, that approach should be able to find the specific part of the css that causes it.

Thanks,

Joe

11/27/2011 12:15:14 PM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

Interesting... with style.css removed, the problem persists.

And with "<portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="script.js"  />"   (but style.css reactivated) the problem persists.

And with both of the above taken out together - same.

Now trying the editor css.... OK this fixes it <add key="EditorCssUrlOverride" value="/emptycssfile.css"/>

I'm not sure I have time for the next bit this evening... lots of work to do in prep for visiting clients in Scotland this week...  hope this helps a little, and I'll try to do more when I can. Any suggestion on where to focus efforts in style.css would be useful! Seems to be the rounded corners and fixed width content together.

Later... doh, it clearly isn't anything in style.css - must be one of the supporting css.

 

 

11/27/2011 12:17:38 PM
Gravatar
Total Posts 55
mojoPortal Community Expert
Arvixe Web Hosting / mojoPortal Community Liaison Looking for quality mojoPortal hosting? Try Arvixe Check out the MojoPortal Blogs at Arvixe

Re: CKEditor and TinyMCE cannot click into the text

I've tried commenting out style.css from style.config, and also commenting out all the .css lines & still get the problem.

Also tried commenting out that line from layout.master & no difference.

(for info, each time I made a change I also touched web.config & did see the formatting get affected on the website)

11/27/2011 1:24:29 PM
Gravatar
Total Posts 55
mojoPortal Community Expert
Arvixe Web Hosting / mojoPortal Community Liaison Looking for quality mojoPortal hosting? Try Arvixe Check out the MojoPortal Blogs at Arvixe

Re: CKEditor and TinyMCE cannot click into the text

Based on Crispin saying that Artisteer-30business1 works as expected but Artisteer-30verticalmenu1 does not, I'm thinking the place to look where these two differ.

Excluding png files, these differ:

layout.master

script.js

style-artisteer-overrides.css
style.config
style.css
style.ie6.css
style.ie7.css

styleforum.css
stylemojo.css

theme.skin

I think I've already bypassed all the .css files by commenting out all the working lines in style.config

so that leaves me with layout.master, script.js (which I think was effectively taken out too) and theme.skin to look into.

Though I'm not confident that my thinking is not flawed.

11/27/2011 2:06:43 PM
Gravatar
Total Posts 55
mojoPortal Community Expert
Arvixe Web Hosting / mojoPortal Community Liaison Looking for quality mojoPortal hosting? Try Arvixe Check out the MojoPortal Blogs at Arvixe

Re: CKEditor and TinyMCE cannot click into the text

now this isn't what I expected.

I basically see two issues with the html editor, issue1: in chrome the text is like one piece of text and you can use the right arrow to move from beginning to end, in ie each paragraph is like a seperate object. Issue 2: when I have a largish photo with text to its left, in chrome its displayed as I would expect in ie I don't see the text.

My first issue is - I think - the same issue Crispin sees.

I have renamed the artisteer-30verticalmenu1 folder and copied the 30business1 folder & contents in its place.

I still see issue 1 (which is the issue I was concentrating on in my earlier investigations). However I no longer see issue 2.

Does this mean my issue 1 is not the same issue that Crispin is having?

My issue2 is the biggest problem to me, so maybe I'll redo my investigation checking for that.

As a side note, I've also noticed I don't always get the system menu (with the login/register option) at first, but if I go to a couple of different pages it does appear and then stays.

11/27/2011 2:09:33 PM
Gravatar
Total Posts 18439

Re: CKEditor and TinyMCE cannot click into the text

I was able to reproduce this problem on my local machine using the artisteer-30flashclouds skin in IE 9.

By process of elimination I boiled it down to this in the style-artiseeroverrides.css:

body.wysiwygeditor  p
{
font-family: Arial, Helvetica, Sans-Serif;
  font-size: 14px;
  margin: 12px 0;
  max-width:93%;
}

and by removing this:

max-width:93%;

it solved the problem.

Can you guys try this in your installations with the affected skins and see if it resolves the problem for you?

Thanks,

Joe

11/27/2011 2:18:29 PM
Gravatar
Total Posts 18439

Re: CKEditor and TinyMCE cannot click into the text

I was not able to produce the problem on my machine in any of the other mentioned skins, they don't seem to have that max-width setting.

Best,

Joe

11/27/2011 2:30:15 PM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

Nice one Joe - removing that line fixes it for my site.

And I do have that line in at least three of the other skins I found to be affected.

 

11/27/2011 2:57:36 PM
Gravatar
Total Posts 55
mojoPortal Community Expert
Arvixe Web Hosting / mojoPortal Community Liaison Looking for quality mojoPortal hosting? Try Arvixe Check out the MojoPortal Blogs at Arvixe

Re: CKEditor and TinyMCE cannot click into the text

Great - got it working here now too.

Seems that touching web.config was not enough to get the change through to the editor, but once I closed down ie and restarted it the changes came through.

11/27/2011 3:00:29 PM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

I'm finding there are significant variations in the standard skins between my installations, and this explains the differences I was finding between my Arvixe site and my sites on my company servers - the company ones do not have that line in any of the Artisteer skins, even flashclouds. If I add the "max-width:93%;" line I get the same problem.

 

 

11/27/2011 3:08:22 PM
Gravatar
Total Posts 537
feet planted firmly on the ground

Re: CKEditor and TinyMCE cannot click into the text

Ah SpikeMelbost the joys of caching... sure you know all this but I found the changes came into the site without touching web.config, by...  CTRL+F5 , and if that didn't work in IE use F12 then Cache > clear browser cache for this domain.  Also I made sure I had these in user.config

<add key="CacheCssOnServer" value="false"/>
<add key="CacheCssInBrowser" value="false"/>

In Chrome it seems to be virtually impossible to flush the cache these days - I think you have to purchase a new PC to be really sure.

I see you are in the Western Isles and into IT and athletics...  well I'm in Wales and into IT, archaeology and fell running, and come to Lewis occasionally for work - maybe see you one day!  NB this is not a chat room ;-)

 

 

11/27/2011 3:17:47 PM
Gravatar
Total Posts 18439

Re: CKEditor and TinyMCE cannot click into the text

One note about the caching, we have a new feature coming in the next release where there is a guid passed as a parameter to the css handler url, and there is a button under Administraion > Advanced Tools > Designer Tools > Cache Tool

that allows re-setting this guid, doing that effectively "clears the cache" for all users because the browser cache is based on the url and since the url changed due to the guid changing all visitors load the latest css after the guid is changed even if they had previously cached the css in their browser.

Previously my advice after making changes to a skin was to rename it to achieve the same result but this guid makes it much easier especially when using different skins on different pages where it could be tedious having to rename all the skins in order to make sure that visitors got the latest css.

you can see this currently on the demo site.

Best,

Joe

11/27/2011 3:36:31 PM
Gravatar
Total Posts 55
mojoPortal Community Expert
Arvixe Web Hosting / mojoPortal Community Liaison Looking for quality mojoPortal hosting? Try Arvixe Check out the MojoPortal Blogs at Arvixe

Re: CKEditor and TinyMCE cannot click into the text

I'd made the mistake of assuming that because the website was reflecting the css changes after touching web.config the editor would also pick up the change. ctrl + F5 has not been working for me - but probably because I moved to using chrome & didn't think to try it on ie.

(I know its not a chat room but .. if you do find yourself up this way feel free to drop me a line) 

Does that new button also log everyone off Joe?

You must sign in to post in the forums. This thread is closed to new posts.