Smartphone

Goal

Add Rich Text Editor (RTE) in Asset Metadata Editor for editing metadata fields

Demo | Package Install | GitHub


RTE in Metadata Editor



Data in CRX

Solution

1) To add a metadata field to the image/jpeg editor; access jpeg metadata schema editor

http://localhost:4502/mnt/overlay/dam/gui/content/metadataschemaeditor/schemadetails.html/default/image/jpeg?formPath=/conf/global/settings/dam/adminui-extension/metadataschema

2) Drag & Drop a Text Field, add label EAEM Summary mapping to the property ./jcr:content/metadata/eaemSummary in new tab, here EAEM





3) Saved in CRX eg. /conf/global/settings/dam/adminui-extension/metadataschema/default/image/jpeg/items/tabs/items/tab4/items/col1/items/1493448609617; manually, change the saved metadata field sling:resourceType to   cq/gui/components/authoring/dialog/richtext

5) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-metadata-editor-rte/clientlib, set property categories of String type to dam.gui.coral.metadataeditor and dependencies of type String[] to rte.coralui2,underscore

6) Create file ( type nt:file ) /apps/eaem-metadata-editor-rte/clientlib/js.txt, add the following

                         metadata-editor-rte.js

7) Create file ( type nt:file ) /apps/eaem-metadata-editor-rte/clientlib/metadata-editor-rte.js, add the following code

(function($document, $) {
 "use strict";

 $document.on("foundation-contentloaded", initRTE);

 function initRTE(){
 var $rteContainer = $document.find(".richtext-container");

 if(_.isEmpty($rteContainer)){
 return;
 }

 CUI.util.plugClass(CUI.RichText, "richEdit", function(rte) {
 CUI.rte.ConfigUtils.loadConfigAndStartEditing(rte, $(this));
 });

 handleStartFinish($rteContainer);

 styleUI($rteContainer);
 }

 function handleStartFinish($rteContainer){
 $rteContainer.find(".coral-RichText").each(function() {
 ($(this)).richEdit();
 });

 var $valueField = $rteContainer.find("input[type=hidden]");

 $rteContainer.each(function() {
 $(this).find(".coral-RichText-editable").empty().append($valueField.val());
 });

 $rteContainer.on("editing-finished", ".coral-RichText-editable", function(e, editedContent) {
 $valueField.val(editedContent);
 });
 }

 function styleUI($rteContainer){
 var $richTextDiv = $rteContainer.find(".coral-RichText");

 $rteContainer.find("[name=./textIsRich]").remove();

 $richTextDiv.css("height", "180px").closest(".aem-assets-metadata-form-column").css("width", "80%");
 }
})(Granite.$(document), Granite.$);