rich:editor tag not working when is nested inside rich:popupPanel in JSF with RichFaces 4.2.0

Question

I'm trying to use rich:editor inside an rich:popupPanel for updating a blog post from data table. I'm using RichFaces 4.2.0. If I take that editor tag outside the popupPanel it works fine, only when it is inside. Does anyone had that problem?

My code is this:

<h:form id="form">

        <rich:dataTable value="#{managePosts.allBlogPosts}" var="post" id="manage_posts_data_table" 
                        styleClass="manage_posts_table" rows="15">
            <f:facet name="noData">                 
               Nothing found
            </f:facet>
           ...
            <rich:column width="70px">
                <h:link outcome="userViewPost.jsf">
                    <f:param name="post_id" value="#{post.id}" />
                    <h:graphicImage library="images" name="posts/manage/view.png" />
                </h:link>                   
                <a4j:commandLink render="editGrid" execute="@this"
                    oncomplete="#{rich:component('editPane')}.show()">
                    <h:graphicImage library="images" name="posts/manage/update.png" />
                    <f:setPropertyActionListener target="#{managePosts.editedPost}" value="#{post}" />
                </a4j:commandLink>

            </rich:column>       
        </rich:dataTable>

        <rich:popupPanel header="#{msg.edit_selected_post}" id="editPane" width="685" height="600" modal="true">                    

                <h:outputLabel value="#{msg.title}: " styleClass="form_labels" />
                <h:inputText id="update_post_title" value="#{managePosts.editedPost.title}" required="true"
                    requiredMessage="#{msg.empty_field_err}" size="103">
                    <f:validateLength minimum="6" maximum="128"/>
                </h:inputText>

                <h:outputLabel value="" />
                <rich:message for="update_post_title" />
                <h:outputLabel value="" />

                <h:outputLabel value="#{msg.content}: " styleClass="form_labels" />
                <rich:editor id="editor" toolbar="custom" skin="kama" required="true" requiredMessage="#{msg.empty_field_err}"
                        value="#{managePosts.editedPost.content}" width="530" height="300">
                    <f:facet name="config">
                    toolbar_custom:
                        [
                            { name: 'document', items : [ 'NewPage','Preview' ] },
                            { name: 'clip#{managePosts.editedPost.title}board', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                            { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
                            { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] }, '/',
                            { name: 'styles', items : [ 'Styles','Format' ] },
                            { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
                            { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
                            { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                            { name: 'tools', items : [ 'Maximize','-','About' ] }
                        ]
                    </f:facet>
                </rich:editor>

                <h:outputLabel value="" />
                <rich:message for="editor" />
                <h:outputLabel value="" />

            <a4j:commandButton value="Cancel" onclick="#{rich:component('editPane')}.hide(); return false;" />
        </rich:popupPanel>

    </h:form>

Thank you in advance!

Answer 1

This Bug is well-known.

The Editor is out of the form-tag.

_{(source: jboss.org)}