Merge pull request #5 from netgen/IOTA-313-switch-to-tiny-mce

IOTA-313 switch from ckeditor to tiny mce

Author: emodric

bundle/Resources/config/services.yaml

@@ -39,4 +39,14 @@ services:
             - { name: 'form.type' }
 
     Netgen\IbexaFieldTypeHtmlText\Utils\HtmlPurifier:
-        class: Netgen\IbexaFieldTypeHtmlText\Utils\HtmlPurifier
+        class: Netgen\IbexaFieldTypeHtmlText\Utils\HtmlPurifier
+
+    app.components.my_script_component:
+        parent: Ibexa\AdminUi\Component\ScriptComponent
+        autowire: true
+        autoconfigure: false
+        arguments:
+            $src: "/bundles/netgenibexafieldtypehtmltext/build/admin_app.js"
+        tags:
+            - { name: ibexa.admin_ui.component, group: script-body }
+

bundle/Resources/js/app.js

@@ -1,16 +1,6 @@
-import Editor from '../public/ckeditor/build/ckeditor';
+import nghtmltextTinyMCE from "./nghtmltext-tinymce";
+import ready from './helpers';
 
-const ready = (callback) => {
-    if (document.readyState !== "loading") callback();
-    else document.addEventListener("DOMContentLoaded", callback);
-}
-
-ready(async () => {
-    const ckEditorTextareas = Array.from(document.querySelectorAll('.nghtmltext > textarea'));
-
-    ckEditorTextareas.forEach((ckEditor) => {
-        Editor.create(ckEditor).catch( error => {
-            console.error( error );
-        } );
-    });
-});
+ready(() => {
+    nghtmltextTinyMCE('.nghtmltext > textarea');
+});

bundle/Resources/js/helpers.js

@@ -0,0 +1,4 @@
+export default function ready(callback) {
+    if (document.readyState !== "loading") callback();
+    else document.addEventListener("DOMContentLoaded", callback);
+}

bundle/Resources/js/ibexa_admin.js

@@ -0,0 +1,6 @@
+import nghtmltextTinyMCE from "./nghtmltext-tinymce";
+import ready from './helpers';
+
+ready(() => {
+    nghtmltextTinyMCE('.ibexa-field-edit--nghtmltext textarea')
+});

bundle/Resources/js/nghtmltext-tinymce.js

@@ -0,0 +1,19 @@
+import tinymce from '../public/tinymce/tinymce.min'
+import '../public/tinymce/themes/silver/theme.min';
+import '../public/tinymce/plugins/link/plugin';
+import '../public/tinymce/plugins/lists/plugin.min';
+
+export default function nghtmltextTinyMCE(selector) {
+    tinymce.init({
+        selector: selector,
+        base_url: '/bundles/netgenibexafieldtypehtmltext/tinymce/',
+        statusbar: false,
+        menubar: false,
+        toolbar: 'undo redo | blocks | ' +
+            'bold italic underline strikethrough | blockquote | ' +
+            'alignleft aligncenter alignright alignjustify | ' +
+            'bullist numlist | outdent indent | ' +
+            'link unlink | removeformat',
+        plugins: 'link lists'
+    });
+}