Add content listener in text view component

index.html

@@ -6,8 +6,6 @@
     <link rel="stylesheet" href="dist/css/grapes.min.css">
     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="dist/grapes.min.js"></script>
-    <script src="private/ckeditor/ckeditor.js"></script>
-    <script src="private/grapesjs-plugin-ckeditor.min.js"></script>
 
   </head>
   <style>
@@ -26,7 +24,7 @@
             <div class="menu-item">WEB</div>
           </nav>
           <div class="clearfix"></div>
-          <div class="lead-title">Build your templates without coding <br/></div>
+          <div class="lead-title">Build your templates without coding</div>
           <div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
           <div class="lead-btn">Hover me</div>
         </div>
@@ -824,17 +822,6 @@
 
 
     {
-      plugins: ['gjs-plugin-ckeditor'],
-        pluginsOpts: {
-          'gjs-plugin-ckeditor': {
-            position: 'center',
-            options: {
-              enterMode: CKEDITOR.ENTER_BR,
-              language: 'en',
-              //skin: 'moono-dark',
-            }
-          }
-        },
       allowScripts: 1,
       showOffsets: 1,
       autorender: 0,

src/dom_components/view/ComponentTextView.js

@@ -11,7 +11,9 @@ module.exports = ComponentView.extend({
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
     _.bindAll(this,'disableEditing');
-    this.listenTo(this.model, 'focus active', this.enableEditing);
+    const model = this.model;
+    this.listenTo(model, 'focus active', this.enableEditing);
+    this.listenTo(model, 'change:content', this.updateContent);
     this.rte = this.config.rte || '';
     this.activeRte = null;
     this.em = this.config.em;

src/dom_components/view/ComponentView.js

@@ -183,6 +183,14 @@ module.exports = Backbone.View.extend({
     this.$el.attr('style', this.getStyleString());
   },
 
+  /**
+   * Update component content
+   * @private
+   * */
+  updateContent() {
+    this.getChildrenContainer().innerHTML = this.model.get('content');
+  },
+
   /**
    * Return style string
    * @return  {string}
@@ -401,8 +409,7 @@ module.exports = Backbone.View.extend({
   render() {
     this.renderAttributes();
     var model = this.model;
-    var container = this.getChildrenContainer();
-    container.innerHTML = model.get('content');
+    this.updateContent();
     this.renderChildren();
     this.updateScript();
     return this;