6 Replies Latest reply on Mar 8, 2013 8:07 AM by Lucas Ponce

    Rich:editor not showing on ajax reload

    jprats Newbie

      I've found the following problem while using a <rich:editor> and a partial page update via ajax.

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:rich="http://richfaces.org/rich"
          xmlns:a4j="http://richfaces.org/a4j">
      <h:head>
          <title>Test</title>
      </h:head>
      <h:body>
          <h:form>
              <rich:tabPanel switchType="ajax">
                  <rich:tab header="Tab 1">
                      <h:outputText value="Hello World!" />
                  </rich:tab>
                  <rich:tab header="Tab 2">
                      <rich:editor />
                  </rich:tab>
              </rich:tabPanel>
          </h:form>
      </h:body>
      </html>
      

       

      When changing from tab1 to tab2 the editor is not shown. With switchType="server" or "client" it works fine.

      This has been tested with RichFaces 4.2.0.Final (also with 4.2.2.Final) runing on JBoss 7.1.1.Final.

       

      I've found this issue (https://issues.jboss.org/browse/RF-6573) but it's quite old and for version 3. The suggested workaround, include <rich:editor width="0" height="0" rendered="false"/>, is not working for me.

       

      It's strange because some resources seem to be loaded and others not. For example, "ckeditor.js" is always loaded, but "en.js" fails when is an ajax request.

        • 1. Re: Rich:editor not showing on ajax reload
          jprats Newbie

          After some investigation I found the problem appears when ckeditor tries to load its own resources.

          For example, it looks for:

          {contextPath}/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.2.2.Final/Packed/org.richfaces.ckeditor/skins/v2/skin.js?t=B7U9

           

          while the correct path is:

          {contextPath}/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/skins/v2/skin.js?t=B7U9

           

          A simple solution is to manually include a global javascript variable on the page, which tells ckeditor where to find its resources:

           

          <script type="text/javascript">
              window.CKEDITOR_BASEPATH = '#{request.contextPath}/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/';
          </script>
          
          

           

          That line should be included by the <rich:editor> itself, but for some reason it's not working properly when doing an ajax update.

          This solution works fine for switchType=ajax, client or server.

          1 of 1 people found this helpful
          • 2. Re: Rich:editor not showing on ajax reload
            Sergey Morenets Novice

            Hi, Juan.

             

            I encountered more weird behavior. My rich:editor is not loading even if it is placed outside of the tabPanel.

            The requested resource cannot be found. Even if I apply your fix and path has changed the resource is still unavailable.

             

            {contextPath}/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/skins/richfaces/editor.ecss?db=eAG7ZOn5HQAFgAJM

             

            Showcase smaple works properly and path is similar.

             

            http://showcase.richfaces.org/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/skins/v2/editor.css?t=B7U9

            • 3. Re: Rich:editor not showing on ajax reload
              Sergey Morenets Novice

              I performed small investigation and added rich:editor component to Spring Booking RichFaces demo application.

               

              The editor is not loading as well. I see two resources below not found.

               

              {contextPath}/swf-booking-richfaces/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/lang/en.js?t=B7U9

              {contextPath}/swf-booking-richfaces/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/skins/richfaces/editor.ecss?db=eAETZsyWAwABRwCe

               

              What is ridiculous the same links work properly for showcase application

               

              http://showcase.richfaces.org/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/lang/en.js?t=B7U9

              http://showcase.richfaces.org/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/skins/richfaces/editor.ecss?db=eAHb1WuhCAAFJAGh

               

              So it looks like configuration issue. Any suggestions?

              • 5. Re: Rich:editor not showing on ajax reload
                Sergey Morenets Novice

                Thanks, nguyen.

                 

                I tried the solution suggested by Brendan but it didn't work. rich:editor was not loading.

                 

                However after few attempts I figured out that if I copy /ckeditor/ into my application and add the following lines

                 

                <h:head>

                  <script type="text/javascript" src="/ckeditor/ckeditor.js"/>

                  <script type="text/javascript" src="/ckeditor/adapters/jquery.js"/>

                </h:head>

                 

                even <rich:editor /> line works properly. I needed to copy richfaces folder from RF jar into skins folder additionally.

                However skins are completely missing. I guess it happened because skins were defined as EL expression like #{richSkin.panelBorderColor}

                and is not processed in js file.

                Is it possible to troubleshoot that?

                 

                One more thing I didn't understand from Brendan. Doesn't rich:editor work now? The sample at showscase.richfaces.org works ok. How can it be?

                • 6. Re: Rich:editor not showing on ajax reload
                  Lucas Ponce Novice

                  Hi,

                   

                  I've experimented same issue with RF 3.4.1.Final and a design like this from a ui:include:

                   

                      <a4j:outputPanel id="main-panel">

                        <h:form>

                          <h:outputText value="Folder" rendered="#{panel.view == 'folder'}" />

                          <h:outputText value="Binary" rendered="#{panel.view == 'binary'}"  />

                          <rich:tabPanel switchType="ajax" rendered="#{panel.view == 'text'}" >

                            <rich:tab>

                              <f:facet name="header">

                                #{panel.selected.textContent.id}

                                <a4j:status name="panelUpdateStatus">

                                    <f:facet name="start">

                                        (Updating)

                                    </f:facet>

                                </a4j:status>         

                              </f:facet>

                              <a4j:outputPanel name="previewStatus">

                                <h:outputText escape="false" value="#{panel.selected.text}" />

                              </a4j:outputPanel>

                            </rich:tab>

                            <rich:tab header="Edit">

                              <rich:editor id="editor" toolbar="full" value="#{panel.selected.text}" >                   

                                <a4j:ajax event="change" render="panel" status="panelUpdateStatus" />

                                <a4j:ajax event="dirty" render="panel" status="panelUpdateStatus">

                                    <a4j:attachQueue requestDelay="1000" />

                                </a4j:ajax>

                              </rich:editor>              

                            </rich:tab>     

                          </rich:tabPanel>       

                        </h:form>

                      </a4j:outputPanel>

                   

                  After use

                   

                  <script>

                  window.CKEDITOR_BASEPATH = '#{request.contextPath}/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/';

                  </script>

                   

                  from the parent page it worked and resolved my issue.

                   

                  Thanks for sharing !