How many editable elements can be on a page?

Hi,

Something I was thinking about was... what if you only have editors for the elements that are clicked? I have a page with:

<style>div.contenteditable:hover { background-color: yellow; }</style>

<div class="editable" contenteditable="true"></div>

You can also set the CSS to change the pointer to the hand. When you move the mouse over the page, you will visually be able to identify which elements are editable by the hover effect of the CSS. Now if you attach an onclick="makeEditable();" attribute to the div and add a function to attach CKE to that div at that time, you can make it launch the editor then and there without having to pre-instantiate the entire page. Better would be if there's a way to destroy the editor when you're done making changes too. I'm not sure if that is reasonably/easily achievable.

By the way, I just found this in the CKE documentation too for CKEDITOR.editor.destroy()

alert( CKEDITOR.instances.editor1 ); // e.g. object
CKEDITOR.instances.editor1.destroy();
alert( CKEDITOR.instances.editor1 ); // undefined

Using that should allow you to dynamically spawn and kill instances of the inline editor. I'm going to try it as well since the application I am working on may have an unlimited number of editable regions of a given page. You should be able to use the blur event to know when the editor is done editing. Here is how I capture that in my app:

editor.on('blur', function() { console.log('blur!'); captureChanges(); });

My thinking is to put the destroy() call into the blur event and use the onclick() to spawn new instances as needed.

What did you end up doing for the caret reposition? I found a cross-browser function that emulates IE's rnage.moveToPoint(x,y) (look for the answer with the function getSelectionNodeInfo(x,y) at the bottom of this page) and then in my lazy editor spawn I use it as so:

var nodeInfo = getSelectionNodeInfo(clickX, clickY);
var range = document.createRange();
range.setStart(nodeInfo.node, nodeInfo.offsetInsideNode);
range.setEnd(nodeInfo.node, nodeInfo.offsetInsideNode);
//console.log('offset = [' + nodeInfo.offsetInsideNode + ']');
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

Yet the caret still returns to the top of the document (offset 0). After fooling around with it a bit, I get the impression that the caret is successfully being relocated and then being moved again by CKE.

One additional thing I am doing with my lazy create/destroy process is I am changing the state of contenteditable="true|false" on my editable div's because if CKE gets in a funny state, the contenteditable=true allows you to go in there and start typing on the div without CKE sitting on top of it. My hope is that doing that does not worsen matters. So far though, eveyrthing appears to be working with the exception of the caret positioning as you pointed out. I was slow to follow this track because I didn't think I was going to implement this model at first, however I am increasingly concerned about not loading down the browser with user-controlled input as you found with dozens of editable spaces in your original issue...

Err I forgot that I modified that function to use jQuery and also added some code to handle multi-line text blocks as the original code did not handle a Y coordinate properly. Here's my modified version of that function:

                        function getSelectionNodeInfo(x, y) {

                                // Implementation note: range.setStart offset is
                                // counted in number of child elements if any or
                                // in characters if there is no child. Since we
                                // want to compute in number of chars, we need to
                                // get the node which has no child.

                                // FIXME - elementFromPoint() is failing for inline editor's below the first one (?)
                                //var elem = document.elementFromPoint(x, y);
                                var elem = $.elementFromPoint(x, y);
                                if (! elem) {
                                        //console.log('elementFromPoint() failed! @ (' + x + ',' + y + ')');
                                        return(false);
                                }
                                var startNode = (elem.childNodes.length > 0) ? elem.childNodes[0] : elem;
                                var startCharIndexCharacter = -1;

                                // Narrow in on the Y coordinate we want first;
                                // we'll use binary space partitioning
                                var bspStep = parseInt(startNode.length / 2);
                                var bspPosition = 0;

                                // Use the first position to get the line height
                                var startRange = document.createRange();
                                window.getSelection().removeAllRanges();
                                window.getSelection().addRange(startRange);
                                startRange.setStart(startNode, bspPosition);
                                startRange.setEnd(startNode, bspPosition + 1);

                                var rangeRect = startRange.getBoundingClientRect();
                                var lineHeight = rangeRect.bottom - rangeRect.top;
                                var lineSeek = 0;
                                var lineFirst = rangeRect.top;
                                //console.log('Line height is [' + lineHeight + ']');
                                if (y <= lineFirst) {
                                        //console.log('Impossible, y=[' + y + '] < lineFirst=[' + lineFirst + ']');
                                }
                                else {
                                        var d = y - lineFirst;
                                        lineSeek = parseInt(d / lineHeight);
                                        //console.log('Looks like we should be around line [' + lineSeek + ']');
                                }

                                do {
                                        // Advance to the next character
                                        startCharIndexCharacter++;

                                        // Make a range for just this one character
                                        startRange.setStart(startNode, startCharIndexCharacter);
                                        startRange.setEnd(startNode, startCharIndexCharacter+1);

                                        // Get the bounding rectangle for the range
                                        rangeRect = startRange.getBoundingClientRect();

                                        // Based on line height, what line is this character at?
                                        var d = rangeRect.top - lineFirst;
                                        var lineAt = parseInt(d / lineHeight);

                                } while (((lineAt < lineSeek) || (rangeRect.left < x)) && (startCharIndexCharacter < startNode.length - 1));
//console.log('Stopped scanning at startCharIndexCharacter = [' + startCharIndexCharacter + '] on line [' + lineAt + ']');
                                return {node:startNode, offsetInsideNode:startCharIndexCharacter};
                        }