demetrio.it blog

Feb

RichFaces editor: move the caret position at the end after a reRender

Demetrio Filocamo IT, Tips, programming 2010-02-12

Some times it can happen you need to re-render a block that includes the RichFaces editor: if the user is using to edit a piece of text, after the re-rendering the caret goes back to the first place so if the user were writing he’d have to manually move it every time it happens.

The solution to this problem (that you can use also for other purposes) is a javascript piece of code found on the TinyMCE forum, adapted for the RichFaces specific case:

<script type="text/javascript">
    function moveCaretToTheEnd(editor_jsf_id) {
        var editor_id = editor_jsf_id + 'TextArea';
        var ed = tinyMCE.getInstanceById(editor_id);
        var root = ed.dom.getRoot();  // This gets the root node of the editor window
        var lastnode = root.childNodes[root.childNodes.length - 1]; 
        if (tinymce.isGecko) {
            // But firefox places the selection outside of that tag, so we need to go one level deeper:
            lastnode = lastnode.childNodes[lastnode.childNodes.length - 1];
        }
        // Now, we select the node
        ed.selection.select(lastnode);
        // And collapse the selection to the end to put the caret there:
        ed.selection.collapse(false);
    }
</script>

The only change I had to do is on the first line of the script as the id of the component we have to pass to get the editor instance is +”TextArea” so I had to compose the id passed to the js function with the “TextArea” string.

To discover the id of the component we can use the built-in RichFaces function rich:clientId in this way (example in a poll component):

<a:poll reRender="currentChatMsgs,recipientList,threadFoldedSection"
        oncomplete="moveCaretToTheEnd('#{rich:clientId('myEditorJsfId')}')"
        enabled="true"/>

Demetrio Filocamo

——

JBoss RichFaces 3.3 (book) – http://www.packtpub.com/jboss-richfaces-3-3

Learn RichFaces step by step developing a sample application.

Share and Enjoy: