Feature tinymce

src/demo/js/options/index.js

@@ -27,6 +27,7 @@ export const editorOptions = {
   // debug: true,
   sessionStorage: true,
   editPanelOrder: ['attrs', 'options'],
+  // controlOnLeft: true,
 }
 
 export const renderOptions = {

src/js/components/controls/html/index.js

@@ -1,5 +1,6 @@
 import HeaderControl from './header'
 import ParagraphControl from './paragraph'
 import HRControl from './hr'
+import TinyMCEControl from './tinymce'
 
-export default [HeaderControl, ParagraphControl, HRControl]
+export default [HeaderControl, ParagraphControl, HRControl, TinyMCEControl]

src/js/components/controls/html/tinymce.js

@@ -0,0 +1,36 @@
+import Control from '../control'
+
+class TinyMCEControl extends Control {
+  constructor() {
+    const textAreaConfig = {
+      tag: 'textarea',
+      config: {
+        label: 'WYSIWYG',
+        editableContent: true,
+      },
+      meta: {
+        group: 'html',
+        icon: 'rich-text',
+        id: 'tinymce',
+      },
+      attrs: {
+        required: false,
+      },
+      action: {
+        onRender: evt => {
+          if (evt.id) {
+            this.textareaID = evt.id
+            console.log('render ', evt.id)
+            window.tinymce.remove('textarea#' + evt.id)
+            window.tinymce.init({
+              selector: 'textarea#' + evt.id,
+            })
+          }
+        },
+      },
+    }
+    super(textAreaConfig)
+  }
+}
+
+export default TinyMCEControl

src/js/editor.js

@@ -119,7 +119,17 @@ export class FormeoEditor {
    * @return {void}
    */
   render() {
+    const script = document.createElement('script')
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.11/tinymce.min.js'
+
+    document.head.appendChild(script)
+
     this.stages = Object.values(Components.get('stages'))
+    if (this.opts.controlOnLeft) {
+      this.stages.forEach(stage => {
+        stage.dom.style.order = 1
+      })
+    }
     const elemConfig = {
       attrs: {
         className: 'formeo formeo-editor',