Create rte style

src/rich_text_editor/index.js

@@ -135,7 +135,7 @@ module.exports = () => {
     udpatePosition() {
       var u = 'px';
       var canvas = config.em.get('Canvas');
-      var pos = canvas.getTargetToElementDim(toolbar.el, lastEl, {
+      var pos = canvas.getTargetToElementDim(toolbar, lastEl, {
         event: 'rteToolbarPosUpdate',
       });
 
@@ -146,7 +146,7 @@ module.exports = () => {
         }
       }
 
-      var toolbarStyle = toolbar.el.style;
+      const toolbarStyle = toolbar.style;
       toolbarStyle.top = pos.top + u;
       toolbarStyle.left = pos.left + u;
     },

src/rich_text_editor/model/RichTextEditor.js

@@ -67,6 +67,8 @@ export default class RichTextEditor {
     const classes = settings.classes;
     let actionbar = settings.actionbar;
     this.actionbar = actionbar;
+    this.settings = settings;
+    this.classes = classes;
 
     if (!actionbar) {
       const actionbarCont = settings.actionbarContainer;
@@ -77,8 +79,6 @@ export default class RichTextEditor {
       settings.actions.forEach(action => this.addAction(action))
     }
 
-    this.settings = settings;
-    this.classes = classes;
     settings.styleWithCSS && this.exec('styleWithCSS');
     this.syncActions();
 
@@ -86,13 +86,13 @@ export default class RichTextEditor {
   }
 
   enable() {
-    this.actionbar().style.display = '';
+    this.actionbarEl().style.display = '';
     this.el.contentEditable = true;
     this.syncActions();
   }
 
   disable() {
-    this.actionbar().style.display = 'none';
+    this.actionbarEl().style.display = 'none';
     this.el.contentEditable = false;
   }
 
@@ -123,7 +123,7 @@ export default class RichTextEditor {
       btn.appendChild(icon);
     }
 
-    this.actionbar().appendChild(btn);
+    this.actionbarEl().appendChild(btn);
   }
 
   /**
@@ -155,7 +155,7 @@ export default class RichTextEditor {
    * Get the actionbar element
    * @return {HTMLElement}
    */
-  actionbar() {
+  actionbarEl() {
     return this.actionbar;
   }
 

src/styles/scss/_gjs_rte.scss

@@ -0,0 +1,33 @@
+.#{$rte-prefix}toolbar {
+  @extend .#{$app-prefix}bg-main;
+
+  display: none;
+  border: 1px solid $mainDkColor;
+  position: absolute;
+  border-radius: 3px;
+  z-index: 10;
+
+  &-btn {
+  	@extend .#{$app-prefix}color-main;
+
+    display: inline-block;
+    padding: 5px;
+    min-width: 25px;
+    border-right: 1px solid $mainDkColor;
+    text-align: center;
+    cursor: pointer;
+    outline: none;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &.btn-info {
+      background-color: $mainDkColor;
+    }
+
+    &:hover {
+      background-color: $mainLhColor;
+    }
+  }
+}

src/styles/scss/main.scss

@@ -769,33 +769,7 @@ ol.example li.placeholder:before {position: absolute;}
 
 /*************RTE****************/
 
-##{$rte-prefix}toolbar {
-  @extend .#{$app-prefix}bg-main;
-  display: none;
-  border: 1px solid $mainDkColor;
-  position: absolute;
-  border-radius: 3px;
-  z-index: 10;
-
-  .#{$rte-prefix}btn {
-  	@extend .#{$app-prefix}color-main;
-    display: inline-block;
-		padding: 5px;
-		min-width:	25px;
-		border-right: 1px solid $mainDkColor;
-		text-align: center;
-		cursor: pointer;
-		outline: none;
-
-	  	&:last-child{ border-right:none; }
-	  	&.btn-info{ background-color: $mainDkColor;}
-	  	&:hover {  background-color: $mainLhColor;}
-	}
-
-  select{
-    height: 16px;
-  }
-}
+@import 'gjs_rte';
 
 /********* Spectrum **********/