sheercms/plugins/tinymce/public/angular.tinymce.js

Sheer Cliff CMS is a simple and powerful content management system (CMS) for Node JS.

/**
 * Binds a TinyMCE widget to <textarea> elements.
 */
app.value('uiTinymceConfig', {})
   .directive('editor', ['uiTinymceConfig', function (uiTinymceConfig) {
        uiTinymceConfig = uiTinymceConfig || {};
        var generatedIds = 0;
        return {
            restrict: 'A',
            priority: 10,
            require: 'ngModel',
            link: function (scope, elm, attrs, ngModel) {

                var expression, options, tinyInstance,
                    updateView = function () {
                        ngModel.$setViewValue(elm.val());
                        if (!scope.$root.$$phase) {
                            scope.$apply();
                        }
                    };

                // generate an ID if not present
                if (!attrs.id) {
                    attrs.$set('id', 'uiTinymce' + generatedIds++);
                }

                if (attrs.editor) {
                    expression = scope.$eval(attrs.editor);
                } else {
                    expression = {};
                }

                // make config'ed setup method available
                if (expression.setup) {
                    var configSetup = expression.setup;
                    delete expression.setup;
                }

                options = {
                    // Update model when calling setContent (such as from the source editor popup)
                    setup: function (ed) {
                        var args;
                        ed.on('init', function(args) {
                            ngModel.$render();
                            ngModel.$setPristine();
                        });
                        // Update model on button click
                        ed.on('ExecCommand', function (e) {
                            ed.save();
                            updateView();
                        });
                        // Update model on keypress
                        ed.on('KeyUp', function (e) {
                            ed.save();
                            updateView();
                        });
                        // Update model on change, i.e. copy/pasted text, plugins altering content
                        ed.on('SetContent', function (e) {
                            if (!e.initial && ngModel.$viewValue !== e.content) {
                                ed.save();
                                updateView();
                            }
                        });
                        ed.on('blur', function(e) {
                            elm.blur();
                        });
                        // Update model when an object has been resized (table, image)
                        ed.on('ObjectResized', function (e) {
                            ed.save();
                            updateView();
                        });
                        if (configSetup) {
                            configSetup(ed);
                        }
                    },
                    mode: 'exact',
                    relative_urls: false,
                    convert_urls: false,
                    code_dialog_width: 960,
                    code_dialog_height: 600,
                    elements: attrs.id,
                    file_browser_callback: function(field_name, url, type, win) {
                        //type values: image, file
                        if (type == 'image') {
                            tinymce.activeEditor.windowManager.open({
                                title: "Image Selector",
                                url: "/cms/static/editor/image-manager.html",
                                width: 950,
                                height: 600
                            },
                            {
                                result: function(url) {
                                    win.document.getElementById(field_name).value = url;
                                }
                            });
                        }
                        else {
                            tinymce.activeEditor.windowManager.open({
                                title: "Link Selector",
                                url: "/cms/static/editor/link-manager.html",
                                width: 950,
                                height: 600
                            }, {
                                result: function(url) {
                                    win.document.getElementById(field_name).value = url;
                                }
                            });
                        }
                    }
                };

                // extend options with initial uiTinymceConfig and options from directive attribute value
                angular.extend(options, uiTinymceConfig, expression);

                setTimeout(function () {
                    tinymce.init(options);
                });

                ngModel.$render = function() {
                    if (!tinyInstance) {
                        tinyInstance = tinymce.get(attrs.id);
                    }
                    if (tinyInstance) {
                        tinyInstance.setContent(ngModel.$viewValue || '');
                    }
                };

                scope.$on('$destroy', function() {
                    if (!tinyInstance) { tinyInstance = tinymce.get(attrs.id); }
                    if (tinyInstance) {
                        tinyInstance.remove();
                        tinyInstance = null;
                    }
                });
            }
        };
    }]);