Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jason 122 posts 658 karma points
    Feb 02, 2016 @ 19:27
    Jason
    1

    How do yo access the Umbrace Angular services from a custom TinyMCE button plugin?

    I need to create a custom button in the RTE (TinyMCE) that opens an Umbraco dialog (dialogService). Creating the button is easy, but how do I get access to the Umbraco Angular Scope and Services within my custom TinyMCE plugin?

  • Jason 122 posts 658 karma points
    Feb 03, 2016 @ 21:21
    Jason
    103

    So I solved the issue. Here is the code if anyone else needs to do something similar.

    (function () {   
    
    // Register plugin
    tinymce.PluginManager.add('mymcecustomplug', function (editor) {
    
        function populate(imagePath) {
    
            var imgData = {
                src: (imagePath) ? imagePath : "nothing.jpg"
            };
    
            editor.insertContent(editor.dom.createHTML('img', imgData));
    
        };
    
        editor.addButton('mymcecustomplug', {
            icon: 'custom icon-picture',
            tooltip: 'My Custom Image Picker',
            onclick: function () {
    
                //get your angular element
                var elem = angular.element(document.querySelector('[ng-controller]'));
    
                //get the scope.
                var $scope = elem.scope();
    
                //get the injector.
                var injector = elem.injector();
    
                //get the services.
                var dialogService = injector.get('dialogService');
                var $routeParams = injector.get('$routeParams');
                var $http = injector.get('$http');
    
                var id = $routeParams.id;
                $http.get('url to something on the server')
                    .then(function (response) {                       
    
                        myDialog = dialogService.open({
                            template: "pathtomydialog.html",
                            callback: populate
                        });
    
                    }, function (data) {
                        $log.error(data)
                    });
            }
        });
    }); })();
    

    This post helped me figure out how to solve the problem: http://stackoverflow.com/questions/13613288/angularjs-i-need-to-update-a-service-from-outside-of-angular

  • Lakshan 1 post 71 karma points
    Dec 28, 2017 @ 09:01
    Lakshan
    0

    Hi i want to know how to add this plugin to tinyMCE. Where should i want to place this code and how to config.. please tell me in step by step.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies