Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Disappearing caret from Rich Text Editor

234 views
Skip to first unread message

mlemos

unread,
Sep 10, 2009, 3:34:44 AM9/10/09
to
Hello,

I have been developing a rich text editor that allows both HTML editing
using an iframe with contentEditable/designMode set and a textarea input
for direct HTML editing.

It shows a toolbar button to switch between each of the modes. The
textarea and the iframe are switched by setting the style.display
property to none or block of <divs> that enclose them to hide one and
show the other.

The problem is that when I switch between Visual editing to HTML and
back, the visual editor no longer shows the caret when it is clicked. It
shows selected ranges though, but no blinking caret.

If I never hide the visual editor when switching modes, it all works well.

The caret appears again when I use F7 to turn on caret browsing but that
is not a good solution. The caret disappears again when I disable caret
browsing.

I read a lot about this on the Web. I tried all sorts of solutions but
could not find one that works. Only Firefox is affected by this problem.
IE, Safari, Opera and Chrome work well as expected.

Here is is a live demo of the editor so you can see the problem.

Anybody can explain why this happens and suggest a workaround to avoid
this problem which is specific of Firefox?

--

Regards,
Manuel Lemos

Find and post PHP jobs
http://www.phpclasses.org/jobs/

PHP Classes - Free ready to use OOP components written in PHP
http://www.phpclasses.org/

mlemos

unread,
Sep 10, 2009, 3:37:09 AM9/10/09
to
Here is the missing demo URL:

http://www.meta-language.net/forms-examples.html?example=test_html_editor

on 09/10/2009 04:34 AM mlemos said the following:

Jeff

unread,
Oct 21, 2009, 4:15:25 PM10/21/09
to
I've been banging my head against the wall for a day and a half with
this same problem and finally found a solution (i.e. hack).
After an iframe with contentEditable content is hidden then
redisplayed, the code below is used to remove then re-add all the
contenteditable attributes.
I found that ALL contenteditable attributes have to be removed first
before resetting any elements back to contenteditable otherwise this
fix doesn't work.

I'm developing a medical health record application and I was having
this issue within my dialogs (which use iframes). This fix was
testing against FF 3.5.3


BaseView.prototype.handleNavigationEvent = function(){
if(window.frameElement && Prototype.Browser.Gecko){
// Fix the contenteditable bug that occurs when an iframe is
hidden then re-displayed
this.fixFFContentEditable();
}
};

/**
* Get list of editable content, strip contenteditable attributes,
then reapply
*/
BaseView.prototype.fixFFContentEditable = function(){
var oElements = $(document.body).select("div
[contenteditable=true]","span[contenteditable=true]");
oElements.each(function(oItem){oItem.removeAttribute
("contenteditable");});
oElements.each(function(oItem){oItem.setAttribute
("contenteditable", "true");})
};

** Note - I'm using prototype.js

0 new messages