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


4 comments:

  1. Can you please suggest how to do this on 6.4

    ReplyDelete
  2. can you please post 6.4/6.5 version of this, It's not saving content when I have the rte in Content fragment metadata

    ReplyDelete
  3. Thanks for the awesome post on Rich Text Editor. Keep sharing more.

    ReplyDelete
  4. Thank you for this workaround for adding Rich Text editor to asset metadata schema field! It worked for me for AEM6.5!

    ReplyDelete