Application Developmentpublic

Visual Builder

Get Involved. Join the Conversation.

This is a public Forum  public

Topic

    Rajeev Singh
    Rich Text Editor Component
    Topic posted October 31, 2019 by Rajeev SinghRed Ribbon: 250+ Points, tagged UI 
    76 Views, 9 Comments
    Title:
    Rich Text Editor Component
    Summary:
    Rich Text Editor Component
    Content:

    Hi,

    Do we have Rich Text editor component in VBCS?

    Did not find it in Component Pallete.

    Version:
    19.3.1
    Image:

    Comment

     

    • Shay Shmeltzer

      There isn't a built in component for this in Visual Builder (or JET) - but you should be able to incorporate any third party HTML component into your pages.

      You can look at something like https://ckeditor.com/ for example.

       

      • Rajeev Singh

        Hi Shay,

        How do we integrate this with VBCS.

        • Shay Shmeltzer

          The basic would be to include the HTML code you need for the editor in the page, and import the needed JS libraries over into the page too.

          (More on importing JS libararies here - https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-visual-builder ).

          You can then get the value from the field in JS PageModule function, and assign it to a VB variable.

          For a deeper integration you can potentially wrap the component as a Web Component that could be added to the VB component palette.

          Web Component Techniques - Integrating Components with VBCS Service Endpoints

          • Mohammed Baig

            Hello Shay,

            I tried to use the 3rd party library as advised by you but could not render the rich text in VBCS page.

            Can you please let me know what is missing in below steps.?

            1. I downloaded the standard package from https://ckeditor.com/ckeditor-4/download/
            2. Imported the downloaded zip file ‘ckeditor_4.13.0_standard.zip’ into resources as attached: 
            3. It got imported. 
            4. Added the below code to my page:
            <div class="oj-flex">
                <oj-label id="oj-label-637398431-3" for="oj-text-area-637398431-2" class="oj-flex-item oj-sm-12 oj-md-4">Text Area</oj-label>
                <oj-text-area name="ck_text" id="ck_text" class="oj-flex-item oj-sm-12 oj-md-8"></oj-text-area>
            </div>
            5. Imported the library in JS and created the below function, which I am calling from vbEnter action and also kept the button in page to invoke this below function

            define(['ojs/ojarraydataprovider', 'resources/ckeditor/ckeditor'], function(ArrayDataProvider, ckeditor) {
            .
            .
            PageModule.prototype.callCKFunction = function() {

            ckeditor.replace("ck_text");
            return;

            };

            6. In all cases, this is giving me run time error as below:

            Rendering this page encountered errors:

            Action callModuleFunction1_aecbf8csf: error running custom action: callCKFunction(undefined)

             

    • Mohammed Baig

      Hello Experts,

      Has anyone tried to implement the Rich text in VBCS, using 3rd party libraries.?

      Thank you

    • Mohammed Baig

      Hi Shay,

      May we know if this can be achieved in VBCS, so we can update the customer accordingly.?

      However, ckeditor do talks about integration with Angular, React and Vue, but not finding any other way than what we tried above.

      https://ckeditor.com/docs/ckeditor4/latest/guide/dev_angular.html

      Awaiting for your comments.

      Thank you

     

    community forum