Copied to clipboard

Flag this post as spam?

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


  • Jason 113 posts 626 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 113 posts 626 karma points
    Feb 03, 2016 @ 21:21
    Jason
    102

    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.

Please Sign in or register to post replies

Write your reply to:

Draft