feat(field): add tinymce field

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

@@ -120,6 +120,11 @@ 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 => {