Nov 06, 2020 at 05:15 PM

Customize smartedit generic editor and include a custom third party javascript

456 Views Last edit Nov 06, 2020 at 05:16 PM 2 rev

Requirement - We are trying to customize the out of the box generic media upload editor in smartedit and replace it with a custom editor for uploading a media. The custom editor would be a angular component and would consist of an iframe rendered from a third party javascript.

We created a custom angular component which includes the angular directive/controller and the view part for the cloudinary upload widget iframe which is a javascript rendered from a third party. The javascript/iframe is not getting injected into the view as i understand that it is not part of the DOM. We need a way to inject the javascript in the view and render the iframe and be able to handle the events based on the custom editor. Do we have any standard approach for this?

Please find the custom angular components created below -

Angular controller-

/*
 * Copyright (c) 2020 SAP SE or an SAP affiliate company. All rights reserved.
 */
angular
    .module('seMediaLibraryWidgetModule', [])
    .controller('seMediaLibraryWidgetController', function() {
        this.$onInit = function() {
            this.disabled = this.disabled || false;
            this.customClass = this.customClass || '';
            this.selectionMode = this.selectionMode || 'replace';
        };
        this.buildAcceptedFileTypesList = function() {
            return this.acceptedFileTypes
                .map(function(fileType) {
                    return '.' + fileType;
                })
                .join(',');
        };
        this.isReplaceMode = function() {
            return this.selectionMode === 'replace';
        };
        this.openWidget = function() {
        // tslint:disable-next-line:no-console
        console.log("click");
        };
    })
    .directive('seMediaLibraryWidget', function() {
        return {
            templateUrl: 'seMediaLibraryWidgetTemplate.html',
            restrict: 'E',
            scope: {},
            controller: 'seMediaLibraryWidgetController',
            controllerAs: 'ctrl',
            bindToController: {
                selectionMode: '<?',
                labelI18nKey: '<',
                acceptedFileTypes: '<',
                customClass: '<?',
                disabled: '<?',
                onFileSelect: '&'
            },
            link: function() {
            }
        };
    });
View -
    <html>
    <head>
    <script src="https://YYY.com/global/all.js"></script>
    <script type="text/javascript">
    console.log('testjshgdsahgd');
                    window.ml = yyy.openMediaLibrary({
                    cloud_name: 'XXX',
                    api_key: 'XXX',
                    multiple: true,
                    max_files: 1,
                    button_class: 'myBtn',
                    button_caption: 'Select Image or Video',
                    }, {
                            insertHandler: function (data) {
                                data.assets.forEach(
                                    asset => { console.log("Inserted asset:",
                                    JSON.stringify(asset, null, 2)) }
                                )
                            }
                        },
                        document.getElementById("open-btn");
                    )
    </script>
    </head>
    </html>