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!
Views
Replies
Total Likes
Any pointers and inputs will be a great help!
Thanks in advance!
Views
Replies
Total Likes
Any help on this is much appreciated
Views
Replies
Total Likes