6 Replies Latest reply on Oct 27, 2015 8:56 PM by arnieaustin

rich:editor renders wrong and doesn't react

arnieaustin Oct 26, 2015 9:05 PM

The following markup, part of a rich:popupPanel, renders - with the wrong skin, but is DOA. Can tab from subject to editor and the work area gets a black outline, but no caret, can't type, can't paste, and the buttons darken with mouseover but clicking does nothing.

<rich:editor id="comment" value="#{infoPersonCommentDTOCDI.comment}"

toolbar="custom" style="width:100% !important;resize:none;"

readOnly="#{infoPersonCommentDTOEdit.readOnly}" skin="richfaces"

<f:facet name="config">

toolbar_custom: [

{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },

{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },

{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },

'/',

{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },

{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },

{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },

'/',

{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },

{ name: 'colors', items : [ 'TextColor','BGColor' ] },

{ name: 'tools', items : [ 'Maximize', 'ShowBlocks'] }

]

</f:facet>

</rich:editor>

Anyone have any ideas that I could try?

1. Re: rich:editor renders wrong and doesn't react

arnieaustin Oct 26, 2015 9:21 PM (in response to arnieaustin)

UGH. Added the domElementAttachment="parent" per the manual to the popup and that fixed the inactivity part.

Still don't have the richfaces theme appearing, by default or by name. Tried the others, no joy.
Actions

2. Re: rich:editor renders wrong and doesn't react

arnieaustin Oct 26, 2015 10:13 PM (in response to arnieaustin)

Here's the markup of the entire modal panel. The hot keys don't work. Save doesn't call the actions but closes the panel. ? How would one detect that the action reported errors and not close the panel after a click on the save button?

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich" 
    xmlns:richext="http://java.sun.com/jsf/composite/richext"
    xmlns:a4j="http://richfaces.org/a4j"
    >
    
    <a4j:outputPanel id="panelModalInfoPersonCommentEdit">
    
        <rich:popupPanel id="modalInfoPersonCommentEdit" autosized="false" minHeight="600" minWidth="800" 
            moveable="true" style="z-index:1000 !important;" domElementAttachment="parent" closeOnEscape="true" >
            
            <f:facet name="header">
                <h:panelGroup>
                    <h:outputText value="#{messages.getString('infoPersonCommentEdit.label.edit')}"
                        rendered="#{!infoPersonCommentDTOEdit.readOnly}" />
                    <h:outputText value="#{messages.getString('infoPersonCommentEdit.label.view')}"
                        rendered="#{infoPersonCommentDTOEdit.readOnly}" />
                </h:panelGroup>
            </f:facet>
            
            <h:panelGrid id="panelGridText" width="100%" columns="1" columnClasses="table-column-left" >
            
                <h:form id="formInfoPersonCommentEdit" >
                
                    <h:panelGrid width="100%" columns="2" columnClasses="table-column-left,table-column-right">
                        <h:outputText value="#{messages.getString('infoPersonCommentEdit.label.info')}" />
                        <a4j:commandButton id="cmdCancelModalCommentEdit" 
                            onclick="#{rich:component('modalInfoPersonCommentEdit')}.hide();"
                            value="#{messages.getString('application.lbl.cmdCancel')}" >
                            <f:param name="cid" value="#{javax.enterprise.context.conversation.id}"/>
                        </a4j:commandButton>
                        <rich:hotKey key="esc" enabledInInput="false" preventDefault="true"
                            selector="#cmdCancelModalCommentEdit" />
                    </h:panelGrid>
                        
                    <ui:include src="/layout/helpPanel.xhtml"/>
        
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputFormat value="#{messages.getString('infoPersonCommentEdit.lbl.pageTitleEdit')} #{infoPersonCommentDTOCDI.pageSummary}"
                                rendered="#{infoPersonCommentDTOEdit.readOnly ne true}" />
                            <h:outputFormat value="#{messages.getString('infoPersonCommentEdit.lbl.pageTitleView')} #{infoPersonCommentDTOCDI.pageSummary}" 
                                rendered="#{infoPersonCommentDTOEdit.readOnly eq true}" />
                        </h:panelGroup>
                    </f:facet>
                    
                    <rich:focus value="#{infoPersonCommentEdit.focusField}" />
                    
                    <ui:decorate id="decorCommentId" template="/layout/displayEighth.xhtml">
                        <ui:define name="label"><h:outputText value="#{messages.getString('infoPersonEdit.name.label.userId')}" /></ui:define>
                           <ui:define name="value">
                               <h:panelGroup>
                                <h:outputText value="#{infoPersonCommentDTOCDI.id}" rendered="#{not empty infoPersonCommentDTOCDI.id}" />
                                <h:outputText value="#{messages.getString('application.lbl.newId')}" rendered="#{empty infoPersonCommentDTOCDI.id}" />
                            </h:panelGroup>
                           </ui:define>
                       </ui:decorate>                
        
                    <ui:decorate id="decorSubject" template="/layout/editEighth.xhtml">
                        <ui:define name="label"><h:outputLabel value="#{messages.getString('infoPersonCommentEdit.label.subject')}" for="subject"/></ui:define>
                           <ui:define name="field">
                            <h:inputText id="subject" value="#{infoPersonCommentEdit.subject}" 
                                maxlength="100" size="100" 
                                disabled="#{infoPersonCommentDTOEdit.readOnly}" />
                           </ui:define>
                        <ui:param name="required" value="true" />
                        <ui:param name="fieldName" value="subject" />
                        <ui:param name="msgFieldName" value="msgSubject" />
                       </ui:decorate>                
            
                    <ui:decorate id="decorComment" template="/layout/editEighth.xhtml">
                        <ui:define name="label"><h:outputLabel value="#{messages.getString('infoPersonCommentEdit.label.comment')}" for="comment"/></ui:define>
                           <ui:define name="field">
                               <h:panelGroup>
                                   
                                <rich:editor id="comment" value="#{infoPersonCommentEdit.comment}" 
                                    toolbar="custom" style="width:100% !important;resize:none;" 
                                    readOnly="#{infoPersonCommentDTOEdit.readOnly}" 
                                    >
                                    <f:facet name="config">
                                        toolbar_custom: [
                                           { name: 'document',   items : [ 'Source','-','NewPage','DocProps','Preview','Print','-','Templates' ] },
                                           { name: 'clipboard',  items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                                           { name: 'editing',    items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
                                           '/',
                                           { name: 'basicstyles',  items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
                                           { name: 'paragraph',  items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                                           { name: 'links',    items : [ 'Link','Unlink','Anchor' ] },
                                           { name: 'insert',   items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
                                           '/',
                                           { name: 'styles',   items : [ 'Styles','Format','Font','FontSize' ] },
                                           { name: 'colors',   items : [ 'TextColor','BGColor' ] },
                                           { name: 'tools',    items : [ 'Maximize', 'ShowBlocks'] }
                                         ]
                                    </f:facet>
                                </rich:editor>
<ui:remove>                                
                                <h:inputTextarea value="#{infoPersonCommentEdit.comment}"
                                    readonly="#{infoPersonCommentDTOEdit.readOnly}"
                                    rows="25" title="#{messages.getString('infoPersonCommentEdit.title.comment')}"
                                    style="width:100% !important;resize:none;" />
</ui:remove>
                            </h:panelGroup>
                           </ui:define>
                        <ui:param name="required" value="true" />
                        <ui:param name="fieldName" value="comment" />
                        <ui:param name="msgFieldName" value="msgComment" />
                       </ui:decorate>                
                    
                    <h:panelGrid width="100%" columns="1" columnClasses="table-column-right" style="vertical-align:bottom;" >
                        <h:panelGroup>
                            <a4j:commandButton id="cmdSaveModalCommentEdit"  
                                value="#{messages.getString('application.lbl.cmdSave')}" 
                                actionListener="#{infoPersonCommentEdit.saveListener}" 
                                type="submit" oncomplete="return false;"
                                render="@all" execute="@form" status="statusInProgress"
                                rendered="#{empty infoPersonCommentDTOCDI.id}" > 
                                <f:param name="cid" value="#{javax.enterprise.context.conversation.id}"/>
                            </a4j:commandButton>
                            <rich:hotKey key="enter" enabledInInput="false" preventDefault="true"
                                selector="#cmdSaveModalCommentEdit" />

                            <richext:spacer width="5" rendered="#{empty infoPersonCommentDTOCDI.id}" />
                            <a4j:commandButton id="cmdUpdateModalCommentEdit"  
                                value="#{messages.getString('application.lbl.cmdUpdate')}" 
                                actionListener="#{infoPersonCommentEdit.updateListener}" 
                                type="submit" oncomplete="return false;"
                                render="@form" execute="@form" status="statusInProgress"
                                rendered="#{not empty infoPersonCommentDTOCDI.id and !infoPersonCommentDTOEdit.readOnly}" >
                                <f:param name="cid" value="#{javax.enterprise.context.conversation.id}"/>
                            </a4j:commandButton>
                            <richext:spacer width="5" rendered="#{not empty infoPersonCommentDTOCDI.id and !infoPersonCommentDTOEdit.readOnly}" />
                            <h:commandButton id="cmdDeleteModalCommentEdit"  
                                value="#{messages.getString('application.lbl.cmdDelete')}" 
                                action="#{infoPersonCommentEdit.delete}" 
                                type="submit" oncomplete="return false;"
                                render="@form" execute="@form" status="statusInProgress"
                                rendered="#{not empty infoPersonCommentDTOCDI.id and !infoPersonCommentDTOEdit.readOnly}" >
                                <f:param name="cid" value="#{javax.enterprise.context.conversation.id}"/>
                            </h:commandButton>
                            <richext:spacer width="5" rendered="#{not empty infoPersonCommentDTOCDI.id and !infoPersonCommentDTOEdit.readOnly}" />
                            <a4j:commandButton id="cmdResetModalCommentEdit"  
                                value="#{messages.getString('application.lbl.cmdReset')}" 
                                actionListener="#{infoPersonCommentEdit.resetListener}" 
                                type="submit" oncomplete="return false;"
                                render="@form" execute="@form" status="statusInProgress"
                                rendered="#{not empty infoPersonCommentDTOCDI.id and !infoPersonCommentDTOEdit.readOnly}" >    
                                <f:param name="cid" value="#{javax.enterprise.context.conversation.id}"/>
                            </a4j:commandButton>
                        </h:panelGroup>
                    </h:panelGrid>

                    <richext:spacer height="10" />
                    <h:outputText value="#{messages.getString('application.lbl.requiredField')}" />
                            
                </h:form>
        
            </h:panelGrid>
                
        </rich:popupPanel>
    
    </a4j:outputPanel>
    
</ui:composition>

3. Re: rich:editor renders wrong and doesn't react

michpetrov Oct 27, 2015 5:43 AM (in response to arnieaustin)
The VDLDoc is incorrect, in RichFaces 4.5.x the only skin bundled with rich:editor is "moono".

As for the hotkeys, what are you trying to do?
<rich:hotKey key="enter" enabledInInput="false" preventDefault="true" selector="#cmdSaveModalCommentEdit" />
This hotkey listens for "enter" being pressed on "#cmdSaveModalCommentEdit" (i.e. it only triggers when the button is focused) and doesn't perform any action.

For passing value from bean to JavaScript use @data:
<a4j:commandButton data="#{bean.errorInAction}" oncomplete="if (!event.data) { … }" />
Actions
4. Re: rich:editor renders wrong and doesn't react

arnieaustin Oct 27, 2015 9:09 AM (in response to michpetrov)
Ok, is the RF skin somewhere else where it can be downloaded? Or was it never created?

I thought the hotkey didn't look right either. But the doc doesn't show an action or actionListener property. I want it (enter) to equate to the save button (simulate a button click). But given the editor on that panel, that may not be best idea.

But for the escape one - I want it to "click" the cancel button which will result in the panel closing; or so I hoped. I tried this:

<h:panelGrid width="100%" columns="2" columnClasses="table-column-left,table-column-right"> <h:outputText value="#{messages.getString('infoPersonCommentEdit.label.info')}" /> <a4j:commandButton id="cmdCancelModalCommentEdit" onclick="#{rich:component('modalInfoPersonCommentEdit')}.hide();" value="#{messages.getString('application.lbl.cmdCancel')}" > <f:param name="cid" value="#{javax.enterprise.context.conversation.id}"/> </a4j:commandButton> <rich:hotKey key="esc" enabledInInput="true" preventDefault="true" selector="#cmdCancelModalCommentEdit" > <rich:componentControl target="cmdCancelModalCommentEdit" operation="click" /> </rich:hotKey> </h:panelGrid>

But nothing happened. I removed the compound forms; no change.

Thanks for the data= reminder; but for now, the problem is that the save button doesn't call anything (removed the enter hotKey).
Actions
5. Re: rich:editor renders wrong and doesn't react

michpetrov Oct 27, 2015 11:00 AM (in response to arnieaustin)

There's no richfaces skin for CKEditor 4.x, at least not an official one.

You need to set the hotkey @selector to an element where you expect the keydown event to pass through. i.e. the popupPanel, not the button. But if you're trying to make the hotkey work inside the editor that's unfortunately not possible.
Actions
6. Re: rich:editor renders wrong and doesn't react

arnieaustin Oct 27, 2015 8:56 PM (in response to michpetrov)

It was the multiple forms plus the fact that I was ui:including the panel mark up from the file with the tab page content, which itself is included within the tab control mark up - which was in a form.

Once I moved it outside the form it started working finally.
Actions

Go to original post