Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Rich Text Editor with <audio controls> is not working

Avatar

Avatar
Validate 10
Level 3
sreenivasula
Level 3

Likes

7 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 3
sreenivasula
Level 3

Likes

7 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
sreenivasula
Level 3

30-10-2018

Hello All,

We have a Rich Text Editor component having below controls available(in _cq_editConfig.xml) for editing text.

<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
editorType="text"
>
<
config jcr:primaryType="nt:unstructured">
<
rtePlugins jcr:primaryType="nt:unstructured">
<
paraformat
jcr:primaryType="nt:unstructured"
features="*"
>
<
formats jcr:primaryType="cq:WidgetCollection">

                 // P, h1, h2, h3 etc goes here
                </formats>
           </
paraformat>
           <
styles
jcr:primaryType="nt:unstructured"
features="*"
>
<
styles jcr:primaryType="cq:WidgetCollection">
// title1, body1, body 2, body 3 etc goes here
            </styles>
</
styles>
<
edit
jcr:primaryType="nt:unstructured"
features="[cut,copy,paste-default,paste-plaintext,paste-wordhtml]"
>
<
configuration
jcr:primaryType="nt:unstructured"
defaultPasteMode="plaintext"
/>
</
edit>
<
findreplace
jcr:primaryType="nt:unstructured"
features="*"
/>
<
format
jcr:primaryType="nt:unstructured"
features="[bold,italic,underline]"
/>
<
links
jcr:primaryType="nt:unstructured"
features="*"
>
<
anchorDialogConfig jcr:primaryType="nt:unstructured"/>
</
links>
<
lists
jcr:primaryType="nt:unstructured"
features="*"
/>
<
misctools
jcr:primaryType="nt:unstructured"
features="[sourceedit,specialchars]"
/>
<
spellcheck
jcr:primaryType="nt:unstructured"
features="*"
/>
<
subsuperscript
jcr:primaryType="nt:unstructured"
features="*"
/>
<
table
jcr:primaryType="nt:unstructured"
features="*"
/>
<
undo
jcr:primaryType="nt:unstructured"
features="*"
/>
</
rtePlugins>
</
config>
</
cq:inplaceEditing>

-------------------

In the rich-text-editor.html, we have below sightly code(partial code) to render content

<div class="rte-text">
<
p data-sly-unwrap="${rte.context == rte.CONST.CONTEXT_HTML}" >
${rte.text @ context=rte.context}
</
p>
</
div>

-------------------

And the rich-text-editor component is associated with below JS code

"use strict";


/**

* Text foundation component JS backing script

*/use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js"], function (AuthoringUtils) {

   

   
var CONST = {

       
PROP_TEXT: "text",

       
PROP_RICH_FORMAT: "textIsRich",

       
CONTEXT_TEXT: "text",

       
CONTEXT_HTML: "html"

   
};

   

   
var text = {};

   

   
// The actual text content

   
text.text = granite.resource.properties[CONST.PROP_TEXT]

            ||
"";

   

   
// Wether the text contains HTML or not

   
text.context = granite.resource.properties[CONST.PROP_RICH_FORMAT]

            ?
CONST.CONTEXT_HTML : CONST.CONTEXT_TEXT

   

   
// Set up placeholder if empty

   
if (!text.text) {

       
text.cssClass = AuthoringUtils.isTouch

                ?
"cq-placeholder"

               
: "cq-text-placeholder-ipe";

       
text.context = CONST.CONTEXT_TEXT;

       
text.text = AuthoringUtils.isTouch

                ?
""

               
: "Rich Text Editor";

    }

                   

   
// Adding the constants to the exposed API

   
text.CONST = CONST;

   

   
return text;

   

});

----------------

With above code our RTE component is correctly rendering text and html.

But we have a requirement to add a audio/mp3 to the RTE component along with text/html using sourceedit option

We tried adding below code, which is successfully showing a player and playing the audio/mp3, when dialog is open and in expanded mode.

<audio controls>

  <source src="/content/dam/en/podcasts/Bear.mp3" type="audio/mp3">

  <p>Your browser doesn't support HTML5 audio.</p>

</audio>

But the moment we save the dialog, it shows "Your browser doesn't support HTML5 audio." instead of showing a player to play the audio/mp3.

Please provide some pointers how to play a audio/mp3 in above RTE component?

Thanks in Advance!

Replies

Avatar

Avatar
Validate 10
Level 3
sreenivasula
Level 3

Likes

7 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 3
sreenivasula
Level 3

Likes

7 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
sreenivasula
Level 3

30-10-2018

Any pointers and inputs will be a great help!

Thanks in advance!

Avatar

Avatar
Validate 10
Level 3
sreenivasula
Level 3

Likes

7 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 3
sreenivasula
Level 3

Likes

7 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
sreenivasula
Level 3

31-10-2018

Any help on this is much appreciated