How to get cursor position in rich:editor richfaces by javascript

Question

I have a rich:editor

<rich:editor id="editor" width="1000" height="300"
             value="#{emailTemplateHome.instance.emailTemplateContent}"          
             theme="advanced">
</rich:editor>

and javascript function

function change(){
            var val = document.getElementById("#{rich:clientId('editor')}");
            if(val != null){    
                var component = val.component;
                var content = component.tinyMCE_editor.getContent();                
                var position = content.slice(0, val.positionedOffset).length;
                var result = content.substr(0,position) + "{chuc_vu}" + content.substr(position);
                component.tinyMCE_editor.setContent(result);    
            }
        }

but var position is not defined.

How can i get position of current cursor ???

Thanks in advance

Answer 1

If you only want to insert things at the current position you can use this:

component.tinyMCE_editor.execCommand('mceInsertContent', false, "insert text");

If you want to do something with the cursor position that's going to be tricky, since the position in the editor doesn't correspond to the position in the content (the content has HTML tags in it). You can get the position this way:

component.tinyMCE_editor.selection.getBookmark().start

val.positionedOffset is a function that returns an array, I'm not sure what you were using that for (not to mention that slice(0,x).length = x)

Answer 2

Writing something after cursor position:

function writeAfterCursor(element) {
                    var bm =tinyMCE.activeEditor.selection.getBookmark().start;
                    var content= tinyMCE.activeEditor
                    .getContent();
                    content= strip(content);
                    var res = content.split("");

                    var res1= []; 
                    var res2= []; 
                    for(i=0; i < bm; i++){
                        res1[i]=res[i];
                    }
                    var j=0;
                    for(i=bm; i < res.length; i++){
                        res2[j]=res[i];
                        j++;
                    }
                    var content1= res1.join("");
                    var content2= res2.join("");
                    content = content1+ element.value+content2;
                    tinyMCE.activeEditor.setContent(content);
                    tinyMCE.activeEditor.selection.moveToBookmark(bm);

                }
                function strip(html)
                {
                   var tmp = document.createElement("DIV");
                   tmp.innerHTML = html;
                   return tmp.textContent || tmp.innerText || "";
                }