Module for TinyMCE integration (to keep NPM stuff separate)

git-svn-id: https://svn.libreccm.org/ccm/trunk@6140 8810af33-2d31-482b-a856-94f89814c4df

ccm-cms-tinymce/README.md

@@ -0,0 +1,14 @@
+# TinyMCE Integration module for ccm-cms
+
+## Prepare 
+
+Install modules via `npm`
+
+    npm install
+
+Build CCM plugins for TinyMCE And copy all required files to web directory:
+
+    npm run build
+
+After that the normal build (`ant deploy` or similar) will pick up the files 
+and put them into the correct places.

ccm-cms-tinymce/application.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<ccm:application xmlns:ccm="http://ccm.redhat.com/ccm-project"
+                 name="ccm-cms-tinymce"
+                 prettyName="TinyMCE for ccm-cms"
+                 version = "6.6.9"
+                 release="1"
+                 webapp="ROOT">
+
+   <ccm:dependencies>
+        <ccm:requires name="ccm-core" version="6.6.3" relation="ge"/>  
+        <ccm:requires name="ccm-cms" version="6.6.4" relation="ge"/>
+    </ccm:dependencies>
+
+    <ccm:contacts>
+        <ccm:contact uri="http://www.scientificcms.org" type="website"/>
+        <ccm:contact uri="mailto:info@scientificcms.org" type="support"/>
+    </ccm:contacts>
+    <ccm:description>
+        Integration of the TinyMCE editor for ccm-cms.
+    </ccm:description>
+
+    
+
+</ccm:application>
+

ccm-cms-tinymce/build-ccm-cms-tinymce.js

@@ -0,0 +1,64 @@
+const fs = require("fs");
+const fsextra = require("fs-extra");
+const path = require("path");
+const webpack = require("webpack");
+
+fs.copyFile("node_modules/tinymce/tinymce.min.js", "web/assets/ccm-cms-tinymce/tinymce.min.js", (error) => {
+    if (error) {
+        throw error;
+    } else {
+        console.log("TinyMCE copied to web directory.");
+    }
+});
+
+webpack(
+    {
+        entry: {
+            "ccm-cms-tinymce": "./ccm-cms-tinymce.js"
+        },
+        mode: "production",
+        output: {
+            path: path.resolve(__dirname, "web/assets/ccm-cms-tinymce"),
+            filename: "[name].js"
+        }
+    },
+    (error, stats) => {
+        if (error) {
+            console.error("webpack failed:");
+            console.error(error.stack || error);
+            if (error.details) {
+                console.error("Error details:");
+                console.error(error.details);
+            }
+            return;
+        }
+
+        const info = stats.toJson();
+        if (stats.hasErrors()) {
+            console.error("webpack failed:");
+            console.error(info.errors);
+            return;
+        }
+
+        if (stats.hasWarnings()) {
+            console.warn(info.warnings);
+        }
+
+        console.log("webpack executed successfully.");
+    }
+);
+
+fsextra.copy("node_modules/tinymce/skins", "web/assets/ccm-cms-tinymce/skins", (error) => {
+    if (error) {
+        throw error;
+    } else {
+        console.log("TinyMCE skins copied to web directory");
+    }
+});
+fsextra.copy("node_modules/tinymce/themes", "web/assets/ccm-cms-tinymce/themes", (error) => {
+    if (error) {
+        throw error;
+    } else {
+        console.log("TinyMCE themes copied to web directory");
+    }
+});

ccm-cms-tinymce/ccm-cms-tinymce.js

@@ -0,0 +1,33 @@
+var tinymce = require("tinymce/tinymce");
+
+// A theme is also required
+require('tinymce/themes/silver');
+
+require("tinymce/plugins/code");
+require("tinymce/plugins/lists");
+require("tinymce/plugins/nonbreaking");
+require("tinymce/plugins/noneditable");
+require("tinymce/plugins/paste");
+require("tinymce/plugins/searchreplace");
+require("tinymce/plugins/table");
+require("tinymce/plugins/template");
+require("tinymce/plugins/visualblocks");
+require("tinymce/plugins/wordcount");
+
+// Initialize the app
+tinymce.init({
+    plugins: ["code", 
+              "lists", 
+              "nonbreaking", 
+              "noneditable", 
+              "paste", 
+              "searchreplace", 
+              "table", 
+              "template", 
+              "visualblocks", 
+              "wordcount"],
+    selector: ".tinymce",
+    templates: [],
+    content_css: ["./editor.css"],
+    toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent"
+});

ccm-cms-tinymce/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "ccm-cms-tinymce",
+  "version": "1.0.0",
+  "description": "TinyMCE for ccm-cms",
+  "main": "index.js",
+  "scripts": {
+    "build": "node build-ccm-cms-tinymce.js"
+  },
+  "author": "Jens Pelzetter",
+  "license": "GPL-2.0",
+  "dependencies": {
+    "tinymce": "^5.0.9"
+  },
+  "devDependencies": {
+    "fs-extra": "^8.1.0",
+    "webpack": "^4.35.0",
+    "webpack-cli": "^3.3.5"
+  }
+}

ccm-cms-tinymce/web/assets/ccm-cms-tinymce/editor.css

@@ -0,0 +1,36 @@
+ul {
+    list-style: disc inside;
+}
+
+div.image {
+    border: 1px solid #999;
+
+    margin-bottom: 0.5em;
+}
+
+div.image span.caption {
+    display: block;
+}
+
+div.image.left {
+    float: left;
+
+    margin-right: 1em;
+}
+
+div.image.right {
+    float: right;
+
+    margin-left: 1em;
+}
+
+div.image.center {
+    text-align: center;
+}
+
+div.image.center span.caption {
+    margin-left: auto;
+    margin-right: auto;
+
+    text-align: left;
+}

ccm-cms-tinymce/web/assets/ccm-cms-tinymce/tinymce_cms_config.js

@@ -0,0 +1,10 @@
+tinymce.init({
+    plugins:
+        "ccmcmsimages code lists nonbreaking noneditable paste searchreplace table template visualblocks wordcount",
+    selector: ".tinymce",
+    templates: [],
+    content_css: ["./editor.css"],
+    toolbar:
+        "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent"
+        //"undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent | ccm-cms-images-button"
+});

ccm-core/web/themes/foundry/foundry/lib/bebop/editors.xsl

@@ -227,9 +227,23 @@
 
         <xsl:if test="@name=$first-match">
             
+            <xsl:choose>
+                <xsl:when test="./@editor_src = ./bebop:config[@name='TinyMCE.Config']/@path">
+                    <script src="{./@editor_src}"></script>
+                </xsl:when>
+                <xsl:when test="./@editor_src = ''">
+                    <script src="{./bebop:config[@name='TinyMCE.Config']/@path}">
+                    </script>
+                </xsl:when>
+                <xsl:when test="./bebop:config[@name='TinyMCE.Config']/@path = ''">
+                    <script src="{./@editor_src}"></script>
+                </xsl:when>
+                <xsl:otherwise>
                     <script src="{./@editor_src}"></script>
                     <script src="{./bebop:config[@name='TinyMCE.Config']/@path}">
                     </script>
+                </xsl:otherwise>
+            </xsl:choose>
             
         </xsl:if>