ansaurus

Question

contentEditable cursor position/style in FireFox

Answer 1

+1 A:

You need to put some sort of content or HTML between the DIV that you want editable:

<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>

KramerC 2009-12-31 23:30:47

Thanks. So it appears that simply putting a space between the start and end tags makes the div editable. However, I then have the problem I described where the cursor appears above/outside the div. Any ideas on how I can deal with that?

Ben McCann 2009-12-31 23:47:07

It seems that part is a bug. The same issue happens on this demo http://valums.com/wp-content/uploads/2009/10/editableText/demo/demo.htm

KramerC 2010-01-01 00:24:15

Answer 2

A:

I was rattling my brain for hours trying to find a way to hack around this. What I came up with was to wrap the editor in a div which is hidden by default. Then use a little inline javascript to display the div. This seems to make the cursor jump into the correct position. Its dirty, but it works!

<div id="editor" style="display: none;">
     <% call RTE.renderTextArea(true) %>
</div>

<script>document.getElementById("editor").style.display="";</script>

WDuffy 2010-06-06 22:39:30

Answer 3

+1 A:

I'm going to wait and use the content editable only in Firefox 3.7 and higher. I filed this and numerous other bugs and the Mozilla team has promised they'll try to get them into 3.7.

Ben McCann 2010-08-03 05:57:52

ansaurus

tags:

views:

answers:

contentEditable cursor position/style in FireFox

related questions