AEM 62 - Touch UI Rich Text (RTE) in Asset Metadata Editor

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

4) In CRXDE Lite, create folder (nt:folder) /apps/eaem-metadata-editor-rte

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.$);