Feb
12

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

Demetrio Filocamo IT, Tips, programming Add you comment

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.

, , , , , ,
Feb
12

RichFaces editor: how to intercept the “return” key to submit a form

Demetrio Filocamo IT, Tips, programming Add you comment

Hello,
I’ll try to write more on my blog and keep you update about every technique I use and that can be very useful to you as well.

Today I needed to submit a form with an editor element when the user pressed the “return” key (instead of creating a new line).

The code is not so complicate but as the rich:editor uses the TinyMCE component you have to search all around to find the right way. Better to have a complete solution.

It consists on creating an handler onKeyPress and call a javascript function (created by a:jsFunction) to submit our form. Simpler doing then saying it.

Let’s start by including the editor in the standard way (form, editor, submit button):

<h :form>
    <rich :editor value="#{editorBean.myValue}" />
    <a :commandButton value="Send" reRender="something"/>
</h>

I’ve kept it simple (stripped out all the params and attribute I use) to target only our problem.

Let’s define a javascript function handler for our use case:

<script type="text/javascript">
    function returnSubmit(ed) {
        ed.onKeyPress.add(function(ed, e)
        {
            var keyCode = e.keyCode || e.which || e.charCode;
            if (keyCode == 13)
            {
                // My return key handler code here 
            }
        });
    }
</script>

The ed variable will be passed by the editor; let’s configure our new function to the onsetup editor event:

<h :form>
    <rich :editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a :commandButton value="Send" reRender="something"/>
</h>

Now we have a function that is called for each keyPress event, and inside it we can execute something on “return” key press.

What we have to do is to submit the form, the best way is to create an Ajax javascript function using a:jsFunction: in this way we can do standard Ajax updates also reRendering elements, submitting params and all the thing we are used to :)

Let’s create the function:

<h :form>
    <rich :editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a :commandButton value="Send" reRender="something"/>
    <a :jsFunction name="submitForm" reRender="something"/>
</h>

Now we have to insert it into the handler and it’s done!

Here it is the whole code:

<script type="text/javascript">
    function returnSubmit(ed) {
        ed.onKeyPress.add(function(ed, e)
        {
            var keyCode = e.keyCode || e.which || e.charCode;
            if (keyCode == 13)
            {
                // My return key handler code here 
                submitForm();
            }
        });
    }
</script>
<h :form>
    <rich :editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a :commandButton value="Send" reRender="something"/>
    <a :jsFunction name="submitForm" reRender="something"/>
</h>

Another tip
If with the js function you reRender components, do some action, set some property etc., to avoid duplication of code in the commandButton you can use the same js function into the button using the onclick attribute:

<h :form>
    <rich :editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a :commandButton value="Send" onclick="submitForm();"/>
    <a :jsFunction name="submitForm"
                  action="#{myBean.myAction}"
                  oncomplete="doSomething();"
                  reRender="first,second">
        <f :setPropertyActionListener value="valueToSet" target="#{myBean.firstValue}"/>
    </a>
</h>

Demetrio Filocamo

——

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

Learn RichFaces step by step developing a sample application.

, , , , , , ,