RichFaces 3 Rich Editor - can it dynamically grow with content??

[ginni]

I am pulling my hair out trying to add javascript to the rich:editor so the height can dynamically adjust based on its content. Has anyone successfully done this? Any ideas you can share?

Thanks!!

Ginni

[ginni]

I found an extension to jQuery that does work, but seems to conflict with the version of jQuery loaded by RichFaces.  I added this code snippet:

{code}

<!-- <script src="/libraryreq-view/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery/jquery.js" type="text/javascript" charset="utf-8"></script> -->

<script src="/libraryreq-view/js/jquery.elastic.source.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

                // <![CDATA[

                jQuery.noConflict();

                jQuery(document).ready(function(){           

                    jQuery('textarea').elastic();

                    jQuery('textarea').trigger('update');

                });   

                // ]]>

            </script>

{/code}

If I uncomment out the first script tag to call in the jquery javascript file before the extension as above, then it conflicts with the one RichFaces pulls in for the calendar widget. The text area works, but any commandLink I click does not rerender the page properly. If I just use the code snippet above as-is, I can no longer press return while typing into the text area.

Weird!!

Any clues?

Thanks!

[mcmurdosound]

You have to be careful using jQuery with richfaces (3.3.x) and its own jQuery at the same time. Namespacing conflicts will definitely occur. RF 3 uses Prototype ($) and jQuery Version 1.3.2

You have to do the following:

var $r = jQuery.noConflict(); // backup richfaces' jquery

<script src="/myproject/view/js/jquery-1.6.2.min.js" type="text/javascript">

var $j = jQuery.noConflict(); // copy reference to jquery 1.6.2

var j$ = null; // reset some strange bound j$ what the hell...

<script> ... load additional jquery plugins here ... </script>

var jQuery = $r; // revert jQuery back to richfaces 1.3.2 version

then you can use your jQuery with "$j". Like for example: $j(document).ready(function(){ ...});

[ginni]

Thank you, makes sense. Not sure what the j$ bit is in there though...

My code now looks like this:

<h:inputTextarea  value="#{libRequest.citation}" id="citation" required="true" label="#{'Citation'}"

styleClass="longTextInput" style="border: 1px solid #C3BBB6; width: 99%; height: 70px; "/>

<!-- This works really well but conflicts with something in RichFaces jQuery (gets loaded in the page twice,

so have to handle what RichFaces loads first with the noConflict() method, then load our own -->

<script type="text/javascript">

    var $rf = jQuery.noConflict();

</script>

<script src="/libraryreq-view/js/dependencies/jQuery.js" type="text/javascript" charset="utf-8"></script>

<script src="/libraryreq-view/js/jquery.elastic.source.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

    // <![CDATA[

    var $j = jQuery.noConflict();

    var j$ = null;

    $j(document).ready(function(){

        $j('textarea').elastic();

        $j('textarea').trigger('update');

    });   

    // ]]>

</script>

<script type="text/javascript">

    var jQuery = $rf;

</script>

However, if I submit, the data I entered into the citation textarea is not redisplayed. In Firebug, it appears in a hidden div just below the textarea closing tag. ????

Without the javascript info in there, the value is displayed correctly (of course the effect I need is lost, too).

[ginni]

Initially after I click "Submit" the page is rerendered. I very briefly see the content of the text area in the text area, then it vanishes.

This is what Firebug shows me:

<textarea id="requestForm:citation" class="longTextInput" style="border: 1px solid rgb(195, 187, 182); width: 99%; height: 105px; overflow: hidden;" name="requestForm:citation"></textarea>

<div style="position: absolute; display: none; word-wrap: break-word; white-space: pre-wrap; border-left: 1px solid rgb(195, 187, 182); border-color: rgb(195, 187, 182); border-style: solid; border-width: 1px; font-weight: 400; width: 99%; font-family: arial,helvetica,sans-serif; line-height: 15px; font-size: 12px; padding: 5px;">

gfdgfd

<br>

<br>

dfgdgd

<br>

dfgdfgd

<br>

<br>

dfgdg 

</div>

Ideas?

[ginni]

Just in case anyone else ignores the obvious, like myself, TinyMCE has an autoresize plugin. http://www.tinymce.com/wiki.php/Plugin:autoresize

Use it with <f:param name="plugins" value="autoresize"/> and it works like a charm!!