Highlighted

Rich Text Editor with <audio controls> is not working

sreenivasula

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