AEM 62 - Touch UI Rich Text Editor InPlace Editing Open in FullScreen

Goal


Open Rich Text Editor InPlace Editing in Full Screen mode by default, listening to the editing-start event

Demo | Package Install


Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touchui-rte-edit-in-fullscreen

2) Create node /apps/eaem-touchui-rte-edit-in-fullscreen/clientlib of type cq:ClientLibraryFolder, add String property categories with value cq.authoring.dialog, String property dependencies with value underscore

3) Create file (nt:file) /apps/eaem-touchui-rte-edit-in-fullscreen/clientlib/js.txt, add

                       edit-in-fullscreen.js

4) Create file (nt:file) /apps/eaem-touchui-rte-edit-in-fullscreen/clientlib/edit-in-fullscreen.js, add the following code

(function ($, $document, gAuthor) {
    if(!gAuthor){
        return;
    }

    $document.on("cq-editables-loaded", function(event){
        $.each(event.editables, function(index, editable){
            if(!editable.dom || !isInPlaceEditingEnabled(editable)){
                return;
            }

            editable.dom.on("editing-start", getEditStartedListener());
        });
    });

    $document.on("inline-edit-finish", function (event) {
        event.editable.dom.on("editing-start", getEditStartedListener());
    });

    function isInPlaceEditingEnabled(editable){
        try{
            var editConfig = editable.config.editConfig;
            return editConfig && editConfig.inplaceEditingConfig && editConfig.inplaceEditingConfig.active;
        }catch(err){
            return false;
        }
    }

    function getEditStartedListener(){
        var gRegistry = Granite.author.editor.registry,
            emptyFn = function(){};

        if(_.isEmpty(gRegistry)){
            console.log("EAEM - Granite author registry not available");
            return emptyFn;
        }

        var inlineTextEditor = gRegistry["text"];

        if(!inlineTextEditor){
            console.log("EAEM - Granite author rte not available");
            return emptyFn;
        }

        return function eaemEditStartedListener(){
            if(!inlineTextEditor.rte){
                return;
            }

            inlineTextEditor.rte.editorKernel.execCmd("fullscreen-start");
        }
    }
}(jQuery, jQuery(document), Granite.author));

5 comments:

  1. Hi Sreekanth,

    I went through your blogs on AEM development and it is very nice development articles.

    I have a requirement to reorder components in sidekick. Can you please assist on this?

    Again, amazing work by you.

    Thanks,
    Neeraj Godiyal

    ReplyDelete
  2. Hi Sreekanth,

    I went through your blogs on AEM development and it is very nice development articles.

    I have a requirement to reorder components in sidekick. Can you please assist on this?

    Again, amazing work by you.

    Thanks,
    Neeraj Godiyal

    ReplyDelete
  3. I need Touch UI Richtext with all plugin?? any reference. At present able to see only few plugin. pls guide/?

    ReplyDelete
  4. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!

    Melbourne Web Developer

    ReplyDelete
  5. Great blog post and really helpful and your blog are very interesting midnightinfo

    ReplyDelete