1 2 Previous Next 18 Replies Latest reply on Feb 1, 2019 10:10 AM by Jacob Madsen

    Adding image upload functionality to Rich Text Editor

    Jacob Madsen

      Hello forum

       

      I'm trying to implement image upload functionality to the Rich Text Editor by following the example given in this blog post:

       

      https://apex.oracle.com/pls/apex/germancommunities/apexcommunity/tipp/6401/index-en.html

       

      The end product will be a documentation management system, where the editing functionality is crucial.My environment: APEX 18.2, ORDS 18.3, Weblogic 12.2.1.3.

       

      I have already made the RESTful service to provide the direct image link from the BLOB, as described in the blog article - everything works as described in the blog post. But I'm facing two challenges with the example given:

       

      1. 1. The submit button in the Image Upload page allows submitting the page, even if the user has not chosen any file, causing a null BLOB to be created. Upload should only be allowed, if the user has actually chosen a file. How can I modify the Submit button, so it takes this into consideration?

       

      1. 2. Next – again the Submit button in the Image Upload page. When launched, the URL of this page looks like this (in my setup):

       

      https://(server)/ords/bska/apex/f?p=101:2:10061186388535::&CKEditor=P1_NEW&CKEditorFuncNum=1&langCode=en

       

      In the Function and Global Variable Declaration, in the example, a piece of JavaScript is given:

       

      function returnFileUrl( pId ) {
       var funcNum = getUrlParam( 'CKEditorFuncNum' ),
       // Achtung: hier anpassen!
       fileUrl = "/ords/bska/apex/apex_bska_001/image/download/" + pId;
      
       function getUrlParam( paramName ) {
       var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
       var match = window.location.search.match( reParam );
       return ( match && match.length > 1 ) ? match[1] : null;
       }
      
       window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );
       window.close();
      }
      

       

      The big problem is, that this JavaScript fails after having submitted this page once, as the URL looks like this after a Submit:

       

      https://(servername)/ords/bska/apex/f?p=101:2:10061186388535::NO:::

       

      The getUrlParam fails with this URL, because the reParam returns "CKEditorFuncNum=1", because this is part of the URL. But after doing a Submit, this is no longer part of the URL. For that reason, the getUrlParam function returns null – which means, that you can only return existing images, if you don't upload an image – ie. submit the page. This can hardly be the intention. How do you Submit without altering window.location.search?

       

      Thanks in advance

        • 1. Re: Adding image upload functionality to Rich Text Editor
          Carsten Czarski-Oracle

          Hi Jacob,

           

          happy new Year 2019.

           

          The answer to your question 1.1 is simple: You can add a Dynamic Action to your upload page as follows:

          • Create it on Change of the File Browse item
          • use the item value is NOT NULL condition
          • As TRUE action, show the button (or enable it), as FALSE action hide the button (or disable it)

           

          As a result, end users will not be able to submit the page when no file has been chosen. In addition to that, you might add some code to the tr_pk_editor_images trigger, which raises an error, if the BLOB is empty or NULL.

           

          create or replace trigger tr_pk_editor_images
          before insert on tab_editor_images
          for each row
          begin
              if :new.image is null or sys.dbms_lob.getlength(:new.image) = 0 then
                raise_application_error(-20000, 'Empty files are not allowed!');
              end if;
          
              :new.id          := seq_editor_images.nextval;
              :new.uploaded_at := sysdate;
              :new.uploaded_by := coalesce( v( 'APP_USER' ), sys_context( 'userenv', 'current_user' ) );
          end;
          

          Regarding your question 1.2, I'm afraid I don't quite get what you mean. Do you, by chance, have a test case for me (e.g. on apex.oracle.com) ...?

           

          Thanks and best regards

           

          -Carsten

          • 2. Re: Adding image upload functionality to Rich Text Editor
            Jacob Madsen

            Hi Carsten

             

            Thanks for your answer.

             

            Sorry, but I don't understand what you don't understand. Have you tried running your own example, uploaded an image - ie. choose a file, hitting the Submit button and then clicking on one of the images in the list to return the URL to the file dialog in the Rich Text Editor? This doesn't work.

             

            - If you open the file upload page and choose an existing file, you get a valid URL back to the Rich Text Editor

            - However, if you first upload a file, you will get a blank URL back to the Rich Text Editor. This is because your returnFileUrl function checks on whether window.location.search - ie. the URL for the file upload page - changes, once you have hit the Submit button. Your Javascript code checks, if the URL contains "CKEditor", and after hitting the Submit button, this will return false, and the function will return a blank value. Please inspect your returnFileUrl function. Why do you perform this check in your function? var match = window.location.search.match( reParam ); 

             

            Look at the URL of the file upload page after hitting the Submit button - ie. after you have uploaded a file. The URL changes in the way I already described, causing your returnFileUrl function to fail, as I described.

             

            Please try running your example and see, if you can get an URL back to the Rich Text Editor right after uploading an image. Is it clear now? I don't know how else to describe it. I've tried my best to describe it, I thought it was 100% clear.

             

             

            Regarding your solution to my first question. Your solution is not 100% complete. As far as I can see, I need two dynamic actions:

             

            - One which disables the button, if the value of the Filename item is NULL.

            - One which enables the button, if the value of the Filename item is NOT NULL.

             

            Otherwise, the button will be enabled as default, and the user can still upload a NULL file. But if I create two Dynamic actions, I can Enable and Disable the button as needed.

             

             

            But can  you please tell me, if you understand my second question now? I believe, that if you run your own example, upload a file and then choose a file, you should see the behavior.

             

            Thanks in advance!

            • 3. Re: Adding image upload functionality to Rich Text Editor
              Carsten Czarski-Oracle

              Hi Jacob,

               

              let me walk through this step by step - I will come back to you.

               

              Regarding your question 1.1:

               

              You will need one(!) Dynamic Action. The condition is the Client-Side Condition.

              Bildschirmfoto 2019-01-07 um 13.41.50.png

               

              Then, as the TRUE action, Show the UPLOAD button.

              Bildschirmfoto 2019-01-07 um 13.41.56.png

              As the False Action, hide the UPLOAD button.

               

              Best regards

               

              -Carsten

              • 4. Re: Adding image upload functionality to Rich Text Editor
                Carsten Czarski-Oracle

                Hi Jacob,

                 

                I now have carefully revisited all the steps - and I can see what happens. Thank you very much for making me aware of this.

                 

                The issue is that the Rich Text Editor (CKEditor) adds some special URL parameters when invoking the Browse Server dialog page - these are needed to correctly pass back the image URL (https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browser_api.html ). When you upload a new image, those parameters are lost.

                 

                I now have updated the blog posting (at the end of the Add an image uploading facility to the Rich Text Editor section) with a few more steps in order to preserve those parameters. Have a look and let me know whether this works for you.

                https://apex.oracle.com/pls/apex/germancommunities/apexcommunity/tipp/6401/index-en.html

                 

                I hope this helps

                 

                Best regards

                 

                -Carsten

                • 5. Re: Adding image upload functionality to Rich Text Editor
                  Jacob Madsen

                  Hi Carsten.

                   

                  This was exactly the response I was looking for regarding question 2. Thanks! However, I do believe that there is one important thing you forget to mention. Regarding the new hidden item to save the parameters, make sure it's "source" is set to Null. Otherwise you get errors when clicking submit, that "CKEDITOR_PARAMS is not a database item" etc. It took a while for me to figure this one out. But after finally finding the cause of this error, your example works perfectly. I can now finally choose a file I just submitted!

                   

                  Now that I have you. In the same article, you give an example of how to make the CKEditor component responsive. I can't get your example to work. When following your example under "Responsive Rich Text editor", I just get JavaScript errors. The browser console reports this, when the page loads:

                   

                  Uncaught TypeError: apex.da.initDaEventList is not a function

                      at f?p=101:1:85412931328::::::194

                      at f?p=101:1:85412931328::::::194

                      at i (desktop_all.min.js?v=18.2.0.00.12:2)

                      at Object.add [as done] (desktop_all.min.js?v=18.2.0.00.12:2)

                      at HTMLDocument.<anonymous> (f?p=101:1:85412931328::::::174)

                      at Object.a.init (desktop_all.min.js?v=18.2.0.00.12:16)

                      at HTMLDocument.<anonymous> (f?p=101:1:85412931328::::::172)

                      at j (desktop_all.min.js?v=18.2.0.00.12:2)

                      at k (desktop_all.min.js?v=18.2.0.00.12:2)

                   

                  My JavaScript initialization code for my CKEditor component looks like this. The name of my CKEditor component is P1_NEW.

                   

                  function ( configObject ) {

                      configObject.uiColor        = "#AADC6E";

                      configObject.resize_enabled = false;

                      configObject.filebrowserBrowseUrl = "f?p=" + $v( "pFlowId" ) + ":2:" + $v( "pInstance" ) + "::" + $v( "pdebug" );

                      configObject.filebrowserWindowWidth = 640;

                      configObject.width      = $( "#P1_NEW" ).closest(".t-Form-inputContainer").width() - 5;

                      configObject.height     = 300;  // Specify your desired item height, in pixels

                      configObject.resize_dir = 'vertical';

                      return configObject;

                  }

                   

                  And my Resize event looks like this:

                   

                  CKEDITOR.instances.P1_NEW.resize( $("#P1_NEW" ).closest( ".t-Form-inputContainer" ).width()

                   

                  What's wrong here?

                   

                  Thanks in advance!

                  • 6. Re: Adding image upload functionality to Rich Text Editor
                    Jacob Madsen

                    Carsten, I have found the cause of this error as well. The code in the event is incomplete. I found the error by comparing to Joel Kallman's similar example. In your blog post, you have:

                     

                    CKEDITOR.instances.{PX_item-name}.resize( $("#{PX_item-name}" ).closest( ".t-Form-inputContainer" ).width()

                     

                    But in Joel's example, it is:

                     

                    CKEDITOR.instances.P3_RESUME.resize( $("#P3_RESUME").closest(".t-Form-inputContainer").width() - 5, 300);

                     

                    As you can see, something is clearly cut off in your example. When I use Joel's example, the JavaScript error goes away. But the responsive thing still doesn't work. Resizing the window does nothing. Please help fixing this. Thanks in advance!

                    • 7. Re: Adding image upload functionality to Rich Text Editor
                      Carsten Czarski-Oracle

                      Hi Jacob,

                       

                      but you are running 18.2, right?

                       

                      So you don't need to apply all that javascript. Just navigate to Shared Components > Component Settings and enable Responsiveness for your Rich Text Editors there. The out-of-the-box funcitionality should also be more complete than custom Javascript.

                       

                      Best regards

                       

                      -Carsten

                      • 8. Re: Adding image upload functionality to Rich Text Editor
                        Jacob Madsen

                        Carsten, I can't get this to work. Yes, I'm running 18.2, and I found the setting under Component Settings. It's by default set to Responsive=Yes. But the Rich Text Editor does not resize itself, when the window is resized. Are any extra settings needed?

                         

                        EDIT: It works to some extent. The editor only resizes automatically with this settings, when the window is made larger. Not when it's made smaller. Why is this? This looks like a bug to me.

                        • 9. Re: Adding image upload functionality to Rich Text Editor
                          Carsten Czarski-Oracle

                          Hi Jacob,

                           

                          hmmm ... are you using the Universal Theme ...?

                           

                          Best regards

                           

                          -Carsten

                          • 10. Re: Adding image upload functionality to Rich Text Editor
                            Jacob Madsen

                            Edit Application Properties -> User Interface -> Theme = "Universal Theme - 42"

                             

                            If I hit F5 to refresh after making the window smaller, the Rich Text Editor is adjusted to the correct size.

                            • 11. Re: Adding image upload functionality to Rich Text Editor
                              Carsten Czarski-Oracle

                              Hi Jacob,

                               

                              the resize stuff should be independent from the rest of your application ... could you provide that as a single page test case on apex.oracle.com ...?

                               

                              Best regards

                               

                              -Carsten

                              • 12. Re: Adding image upload functionality to Rich Text Editor
                                Jacob Madsen

                                Hi Carsten. I can't. I don't have an account on apex.oracle.com. I applied for one a long time ago, but nobody ever bothered to respond. Could you eventually help me get this fixed?

                                • 13. Re: Adding image upload functionality to Rich Text Editor
                                  Carsten Czarski-Oracle

                                  Hi Jacob,

                                   

                                  this process is 100% automated. Just make sure to enter a valid email address; after application you should get an email and as soon as you confirm, the workspace should be created ... I would recommend to give it one more try. Let me know whether this works ...

                                   

                                  Best regards

                                   

                                  -Carsten

                                  • 14. Re: Adding image upload functionality to Rich Text Editor
                                    Jacob Madsen

                                    Hi Carsten. I managed to get an account on apex.oracle.com. I then simply exported the application from my own instance and imported it on my new instance. I can still reproduce the behavior on apex.oracle.com. Making a window smaller does not automatically resize the Rich Text Editor. Shouldn't it? Try for yourself:

                                     

                                    https://apex.oracle.com/pls/apex/f?p=35056:1:14548887237496:::::

                                    1 2 Previous Next