Insert element at a specified position

Question

Is there a way to insert content at a specified offset in tinyMCE? I need to insert an element at run time in a position in the document.

EDIT: To be more specific I need to get the cursor position from one client, send it to the server and broadcast it to other clients so that a custom cursor is painted on their screen and they know where other clients are writing. The part where I'm stuck is how can I insert the node I want which contains the caret | at an offset. I figured out how to get the caret offset and how to send it over. The only problem is that there seems to be no method for inserting a node at a position like: insertNode(element, position) or something similar.

This is the code I have right now:

hub.client.broadcastPosition = function (position) {
    range = ed.selection.getRng();

    var newNode = ed.getDoc().createElement("span");
    newNode.id = "caret";
    newNode.setAttribute("class", "all-carets");

    var element = ed.getDoc().getElementById("caret");

    if (element != null) {
        element.parentNode.removeChild(element);
    }

    newNode.innerHTML = "|";
    newNode.style.color = "black";

    range.setStart(range.startContainer, position);
    range.setEnd(range.startContainer, position);

    range.insertNode(newNode, position);
};

and I am sending the position over the server by this:

var s = ed.selection.getSel();
    if (s) {
        if (s.anchorNode && s.anchorNode.nodeType == 3) {
            caretPosInElement = s.anchorOffset;

            hub.server.sendPos(caretPosInElement);
        }
}

On the client side i.e in the broadcastPosition function I need to insert my span node with id caret at the position I am sending from the server. Therefore I need something else instead of that range. Any ideas?

i have never used tinyMCE, but what exactly are you trying to insert? and to where? can you be a little more specific — btevfik, Mar 17 '13 at 14:21
I am trying to insert a custom caret on an editor which corresponds to the position of the tinyMCE caret itself since I am using the editor for real time collaboration. I already know the position where to insert the node. I just need a method to insert the node at that position — Bernice, Mar 17 '13 at 14:24
is this what you are looking for http://stackoverflow.com/questions/1253303/whats-the-best-way-to-set-cursor-caret-position — btevfik, Mar 17 '13 at 14:26
No not really. I use that on the server side to know where the user is typing and get the cursor position. Now on the client side I need to add the node to the position i.e. by number not by selection e.g. insert node at 10 where 10 is an offset — Bernice, Mar 17 '13 at 14:29

Thariama · Answer 1 · 2013-03-20T09:55:54.150

0

What about selecting the actual place where you want to insert something and then use the mceInsertContent execCommand:

ed.execCommand('mceInsertContent', false, '<span class="marker">my_node_content</span>');

edited Mar 20 '13 at 09:55

answered Mar 19 '13 at 15:43

Thariama

50,002
13
138
166

yeah I thought about that too but I can't select the place to insert since I have to have multiple users writing at the same time on different places of the document. Now I figured it out by sending the actual span with the text from the server. But I still have problems on clicking and arrow keys because I can't figure out this part :/ there seems to be no method which inserts at a position on tinymce. I literally searched everywhere! – Bernice Mar 19 '13 at 19:43
to be clear: var el = tinyMCE.activeEditor.dom.create('div', {id : 'test', 'class' : 'myclass'}, 'some content'); tinyMCE.activeEditor.selection.setNode(el); doesn't work because you have several people working on the same editor and thus you cannot use the tinymce selection - right? – Thariama Mar 20 '13 at 10:00
yepp you're right I can't use the selection. and there's very little response about how to insert a node at a specific position without using selection. I have to find another work around for it I think. – Bernice Mar 20 '13 at 16:20
tinymce bookmarks with an indexing structure. unfortunalty, they wnt work for you, because your editor content might get changed inbetween which will cause the bookmark to become invalid: http://www.tinymce.com/forum/viewtopic.php?id=20458 – Thariama Mar 21 '13 at 15:47
oh, yes I did try that and figured the problem of changing content in the middle of the bookmark. I'm really stuck on this. I'm thinking of using another editor out there or something or coding or trying to add a function myself to tinymce's codes. I think that's the only way around it. Thanks for your interest :) – Bernice Mar 21 '13 at 18:15

Insert element at a specified position

1 Answers1