TinyMCE 4 Ember Component

tinymce-ember.js

   App.TinymceEditorComponent = Ember.Component.extend({
                    // Warning!!! only use tinyMCE not tinymce !!!
                    editor: null,
                    data: {},
                    watchData: true,
                    didInsertElement: function(){
                        var _this = this;

                        // The magic config - http://www.tinymce.com/wiki.php/Configuration
                        var config = {};

                        config = $.extend(config, {
                            statusbar : false,
                            resize: false,


                            // inline: true
                            // mode: "exact",
                            width: "100%",
                            height: '100%',
                            //height: "485",
                            autoresize: true
                        });

                        console.log(config)

                        function resize(){
                            setTimeout(function(){
                                var max = $('.mce-tinymce').css('border', 'none').parent().outerHeight()
                                max = max - $('.mce-menubar.mce-toolbar').outerHeight() //menubar
                                max = max - $('.mce-toolbar-grp').outerHeight() //toolbar
                                max = max - 1;
                                $('.mce-edit-area').height(max)
                            }, 200);
                        }
                        $(window).on('resize', function(){
                            resize();
                        })

                        // Setup plugins and toolbar
                        config.plugins = ["save"];
                        config.toolbar = ["save | undo redo | styleselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent "];

                        // Configure what happens on save
                        config.save_enablewhendirty = true;
                        config.save_onsavecallback = function() {
                            _this.sendAction();
                        };

                        // Choose selector
                        config.selector = "#" + _this.get("elementId");

                        // Setup what happens on data changes
                        config.setup = function(editor) {
                                editor.on('change', function(e) {
                                    var newData = htmlToJson(e.level.content);
                                     _this.set('watchData', false);
                                    if (newData) _this.set('data', JSON.stringify(newData));
                                     _this.set('watchData', true);
                                });
                            }

                        // Set content once initialized
                        config.init_instance_callback = function(editor) {
                            _this.update();
                            resize();
                        }

                        tinyMCE.init(config);

                    },
                    update: function(){
                        if (this.get('watchData')){
                            var content = jsonToHtml([JSON.parse(this.get('data'))]);
                            if (content && tinyMCE.activeEditor !== null) {
                                tinyMCE.activeEditor.setContent(content);
                            }
                        }
                    }.observes('data')
                });