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

    Rich:editor not showing on ajax reload

    jprats
    jprats Jun 20, 2012 11:03 AM

      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
          jprats Jun 21, 2012 4:01 AM (in response to jprats)

          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
            • Actions
          • 2. Re: Rich:editor not showing on ajax reload
            strannik
            strannik Aug 26, 2012 4:55 PM (in response to jprats)

            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

              • Actions
            • 3. Re: Rich:editor not showing on ajax reload
              strannik
              strannik Aug 27, 2012 2:51 AM (in response to strannik)

              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?

                • Actions
              • 4. Re: Rich:editor not showing on ajax reload
                tungtrum17
                tungtrum17 Aug 27, 2012 4:53 AM (in response to jprats)

                You may be referenced at : https://community.jboss.org/message/752483#752483

                  • Actions
                • 5. Re: Rich:editor not showing on ajax reload
                  strannik
                  strannik Aug 27, 2012 7:19 AM (in response to tungtrum17)

                  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?

                    • Actions
                  • 6. Re: Rich:editor not showing on ajax reload
                    rutlucas
                    rutlucas Mar 8, 2013 8:07 AM (in response to jprats)

                    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 !

                      • Actions