Skip to main content
rupaljain2408
rupaljain2408
Level 3
March 13, 2023
Solved

Using Video plugin in touch-UI RTE

Hi All, 

Has anyone ever tried to create/use video plugin in RTE in Touch-UI? 

Any leads would be really helpful.

 

Thank you in advance !

 

Best,

Rupal

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
ksh_ingole7
ksh_ingole7Accepted solution
Community Advisor
March 13, 2023

  1. Create a custom component that extends the RTE component: You can create a new component that extends the existing RTE component. This custom component will include your video plugin.

  2. Define a video plugin: Create a new plugin to add to your custom component. You can define the plugin using the CoralUI library or the Granite UI library.

  3. Configure the plugin: Configure the plugin by adding the necessary properties and parameters. For example, you may need to specify the video's URL, width, and height.

  4. Integrate the plugin into the RTE: Add the video plugin to the RTE toolbar by updating the RTE's client libraries. You can also configure the plugin to appear as a button or dropdown in the RTE.

  5. Test the video plugin: Test your video plugin in the RTE to ensure it works as expected.

View in thread

2 replies

ksh_ingole7
Community Advisor
ksh_ingole7Community AdvisorAccepted solution
Community Advisor
March 13, 2023

  1. Create a custom component that extends the RTE component: You can create a new component that extends the existing RTE component. This custom component will include your video plugin.

  2. Define a video plugin: Create a new plugin to add to your custom component. You can define the plugin using the CoralUI library or the Granite UI library.

  3. Configure the plugin: Configure the plugin by adding the necessary properties and parameters. For example, you may need to specify the video's URL, width, and height.

  4. Integrate the plugin into the RTE: Add the video plugin to the RTE toolbar by updating the RTE's client libraries. You can also configure the plugin to appear as a button or dropdown in the RTE.

  5. Test the video plugin: Test your video plugin in the RTE to ensure it works as expected.

Translate
    Jagadeesh_Prakash
    Community Advisor
    Jagadeesh_PrakashCommunity Advisor
    Community Advisor
    March 13, 2023

    @rupaljain2408 

     

    For below code to work you need to have the RTE and vidoe components available in your instance 

     

    Edit the RTE's configuration to include the Video Plugin. This can be done by adding the following code to the cq/gui/components/authoring/editors/rte/dialog/definition node:

     

     

    <video
    jcr:primaryType="nt:unstructured"
    features="[video]"    title="Video"
    iconPath="${pathToIcons}videoplg.png"
    disableTargeting="true"
    />

     

    Add a placeholder image: To add a placeholder image for the video, add the following code to the RTE's cq/gui/components/authoring/editors/rte/plugins/image/dialog/items/content/items/items/image/items/file node:

     

    <jcr:root
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    primaryType="nt:unstructured"
    name="placeholder"
    xtype="pathfield"
    fieldLabel="Video Placeholder"
    rootPath="/content/dam"
    allowBlank="true"
    predicate="asset"
    predicateGroups="[media]"
    />

     

    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...