9 Replies Latest reply on Jun 27, 2011 11:26 AM by sascha mussjanicht

    Richfaces editor with fileUpload component

    Mustafa Dasgin Newbie

      Hi,

      We have used TinyMCE with rich:fileupload for custom filebrowser of TinyMCE. Because of the problem between rich:calendar and TinyMCE, we decided to upgrade our component to the rich:editor.

      After upgrading, we try to entegrate rich:fileupload with rich:editor for filebrowser but we get some problems like:

      "FileUpload is not defined."


      The source code of HTML where the problem occurs:

      <!--
      FileUpload.CLASSES = {
      ADD : {
      ENABLED : 'rich-fileupload-button rich-fileupload-font ',
      DISABLED : 'rich-fileupload-button-dis rich-file-upload-font '
      },
      ADD_CONTENT : {
      ENABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-add ',
      DISABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-add-dis '
      },
      UPDATE : {
      ENABLED : 'rich-fileupload-button rich-fileupload-font ',
      DISABLED : 'rich-fileupload-button-dis rich-fileupload-font '
      },
      UPDATE_CONTENT : {
      ENABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-start ',
      DISABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-start-dis '
      },
      ....
      ...
      ..


      Dou you have any idea about problem?

        • 1. Re: Richfaces editor with fileUpload component
          Mustafa Dasgin Newbie

          FileUpload.CLASSES = {
          ADD : {
          ENABLED : 'rich-fileupload-button rich-fileupload-font ',
          DISABLED : 'rich-fileupload-button-dis rich-file-upload-font '
          },
          ADD_CONTENT : {
          ENABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-add ',
          DISABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-add-dis '
          },
          UPDATE : {
          ENABLED : 'rich-fileupload-button rich-fileupload-font ',
          DISABLED : 'rich-fileupload-button-dis rich-fileupload-font '
          },
          UPDATE_CONTENT : {
          ENABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-start ',
          DISABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-start-dis '
          },

          ...


          Dou you have any idea about problem?
          Thanks..

          • 2. Re: Richfaces editor with fileUpload component
            Ilya Shaikovsky Master

            please describe your environment in a details and show the code snippets. I've tried your case at richfaces-demo. I've added editor component to the fileUpload sample and both components works fine for me.

            • 3. Re: Richfaces editor with fileUpload component
              Mustafa Dasgin Newbie

              Hi again,

              rich:editor component:

              
              <rich:editor id="xx" value="xx" theme="advanced" configuration="editorconfig">
               <f:param name="language" value="tr"/>
               <f:param name="file_browser_callback" value="myFileBrowser"/>
              </rich:editor>
              
              



              myFileBrowser javascript code:

              function myFileBrowser (field_name, url, type, win) {
               var cmsURL = window.location.toString();
               cmsURL = cmsURL.substring(0, cmsURL.indexOf(appContextPath));
               var fuUrl;
              
               if(type == "image") {
               fuUrl = cmsURL + appContextPath + "/jsf/components/richtext/imageupload.faces";
               }else if(type == "file") {
               fuUrl = cmsURL + appContextPath + "/jsf/components/richtext/fileupload.faces";
               }else if(type == "media"){
               fuUrl = cmsURL + appContextPath + "/jsf/components/richtext/mediaupload.faces";
               }else{
               return false;
               }
              
               tinyMCE.activeEditor.windowManager.open({
               file : fuUrl,
               title : 'My File Browser',
               width : 600,
               height : 150,
               resizable : "no",
               inline : "yes",
               close_previous : "no"
               }, {
               window : win,
               input : field_name
               });
              
               return false;
              }
              
              



              in imageupload.xhtml:

              
              ....
              <script type="text/javascript" src="${contextPath}/scripts/tiny_mce/tiny_mce_popup.js" />
              <script type="text/javascript" src="${contextPath}/scripts/tiny_mce/tiny_mce.js"/>
              <script type="text/javascript" src="${contextPath}/scripts/tiny_mce/tiny_mce_myJavascriptCodeForFileUpload.js" />
              ....
              
              <f:view>
              <h:form>
              ...
               <rich:fileUpload id="fupload_id" ..../>
              ...
              
              <f:form>
              </f:view>
              
              


              • 4. Re: Richfaces editor with fileUpload component
                Ilya Shaikovsky Master

                Please create a sample and fill the issue in our jira with sample attachment.

                • 5. Re: Richfaces editor with fileUpload component
                  Ilya Shaikovsky Master

                  B.t.w. why you defining tinyMCE scripts on your page?
                  And what about tiny_mce_myJavascriptCodeForFileUpload.js file.


                  So one more time - if you able to provide working sample - we will investigate it asap.

                  • 6. Re: Richfaces editor with fileUpload component
                    Mustafa Dasgin Newbie

                    Hi again,

                    According to the explanation in "Necessary HTML Output" chapter at "http://wiki.moxiecode.com/index.php/TinyMCE:Custom_filebrowser", I use TinyMCE scripts in my imageupload.xhtml popup page.

                    And I put some javascript code for file browser initialization in tiny_mce_myJavascriptCodeForFileUpload.js according to "File Browser Dialogue Initialization in TinyMCE3.x" chapter:

                    
                    var FileBrowserDialogue = {
                    
                     selectedFileURL : "",
                    
                     init : function () {
                     // Here goes your code for setting your custom things onLoad.
                     },
                     mySubmit : function () {
                    
                     var win = tinyMCEPopup.getWindowArg("window");
                    
                     // insert information now
                     win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = FileBrowserDialogue.selectedFileURL;
                    
                    ......
                    
                    


                    I will try to provide working sample for both richfaces 3.2.2.GA and richfaces 3.3.0.CR3 as soon as possible and create an issue in jira.

                    Thanks.

                    • 7. Re: Richfaces editor with fileUpload component
                      Ilya Shaikovsky Master

                      you could provide only for 3.3.0 because editor was not present in 3.2.2.

                      Many thanks for your efforts.

                      • 8. Re: Richfaces editor with fileUpload component
                        Mustafa Dasgin Newbie

                        Before 3.3.0, we wrote our own TinyMCE editor component by using facelets.

                        • 9. Re: Richfaces editor with fileUpload component
                          sascha mussjanicht Newbie

                          hi ilya

                           

                          thanks for testing the integration of the rich:fileUpload component as a custom file browser within rich:editor!

                          could you provide code snippets on how you did it?