Using Video plugin in touch-UI RTE

[rupaljain2408]

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

[ksh_ingole7 · Accepted solution]

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.

[Jagadeesh_Prakash]

@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]"
/>