From d17d413646fdae3255e5defa6d7c0324c4764d5d Mon Sep 17 00:00:00 2001 From: jensp Date: Sat, 1 Sep 2018 17:00:13 +0000 Subject: [PATCH] CcmNG: Basic integration for TinyMCE git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5684 8810af33-2d31-482b-a856-94f89814c4df Former-commit-id: 216fd13620d7dc996ae28ab6cbb0fa91d53f4ab9 --- .../package-lock.json | 272 -- ccm-bundle-devel-wildfly-web/package.json | 1 - ccm-bundle-devel-wildfly-web/pom.xml | 13 + .../scripts/ccm-cms/tinymce-loader.js | 6 + ...-cms-tinymce.ts => ccm-cms-tinymce.ts.off} | 0 .../tinymce.off/ccm-cms-tinymce-loader.ts.off | 30 + ccm-bundle-devel-wildfly-web/tsconfig.json | 1 + .../webpack.config.js | 2 +- ccm-cms-js/package-lock.json | 390 +- ccm-cms-tinymce/package-lock.json | 4048 +++++++++++++++++ ccm-cms-tinymce/package.json | 8 +- ccm-cms-tinymce/pom.xml | 23 +- .../ccm-cms/tinymce/plugins/insertmedia.js | 47 + .../ccm-cms/ccm-cms-tinymce.ts | 0 .../ccm-cms/index.ts.off | 0 .../ccm-cms/insert-media.ts.off | 0 .../ccm-cms-tinymce-insertmedia/index.ts | 7 + .../ccm-cms-tinymce-insertmedia/plugin.ts | 69 + ccm-cms-tinymce/tsconfig.json | 4 +- ccm-cms-tinymce/webpack.config.js | 25 + .../java/org/arsdigita/cms/CMSConfig.java | 9 +- .../java/com/arsdigita/bebop/BebopConfig.java | 2 +- .../com/arsdigita/bebop/form/DHTMLEditor.java | 2 +- .../foundry/foundry/lib/bebop/editors.xsl | 153 +- 24 files changed, 4508 insertions(+), 604 deletions(-) create mode 100644 ccm-bundle-devel-wildfly-web/src/main/resources/scripts/ccm-cms/tinymce-loader.js rename ccm-bundle-devel-wildfly-web/src/main/typescript/{ccm-cms-tinymce.ts => ccm-cms-tinymce.ts.off} (100%) create mode 100644 ccm-bundle-devel-wildfly-web/src/main/typescript/tinymce.off/ccm-cms-tinymce-loader.ts.off create mode 100644 ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertmedia.js rename ccm-cms-tinymce/src/main/{typescript => typescript.off}/ccm-cms/ccm-cms-tinymce.ts (100%) rename ccm-cms-tinymce/src/main/{typescript => typescript.off}/ccm-cms/index.ts.off (100%) rename ccm-cms-tinymce/src/main/{typescript => typescript.off}/ccm-cms/insert-media.ts.off (100%) create mode 100644 ccm-cms-tinymce/src/main/typescript.off/tinymce/plugins/ccm-cms-tinymce-insertmedia/index.ts create mode 100644 ccm-cms-tinymce/src/main/typescript.off/tinymce/plugins/ccm-cms-tinymce-insertmedia/plugin.ts create mode 100644 ccm-cms-tinymce/webpack.config.js diff --git a/ccm-bundle-devel-wildfly-web/package-lock.json b/ccm-bundle-devel-wildfly-web/package-lock.json index 3c6e922f3..3ee6e36c1 100644 --- a/ccm-bundle-devel-wildfly-web/package-lock.json +++ b/ccm-bundle-devel-wildfly-web/package-lock.json @@ -1663,278 +1663,6 @@ } } }, - "ccm-cms-tinymce": { - "version": "7.0.0", - "requires": { - "tinymce": "4.8.2" - }, - "dependencies": { - "@types/jquery": { - "version": "3.3.6", - "bundled": true - }, - "@types/tinymce": { - "version": "4.5.16", - "bundled": true, - "requires": { - "@types/jquery": "3.3.6" - } - }, - "ansi-regex": { - "version": "2.1.1", - "bundled": true - }, - "ansi-styles": { - "version": "2.2.1", - "bundled": true - }, - "argparse": { - "version": "1.0.10", - "bundled": true, - "requires": { - "sprintf-js": "1.0.3" - } - }, - "babel-code-frame": { - "version": "6.26.0", - "bundled": true, - "requires": { - "chalk": "1.1.3", - "esutils": "2.0.2", - "js-tokens": "3.0.2" - }, - "dependencies": { - "chalk": { - "version": "1.1.3", - "bundled": true, - "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" - } - } - } - }, - "balanced-match": { - "version": "1.0.0", - "bundled": true - }, - "brace-expansion": { - "version": "1.1.11", - "bundled": true, - "requires": { - "balanced-match": "1.0.0", - "concat-map": "0.0.1" - } - }, - "builtin-modules": { - "version": "1.1.1", - "bundled": true - }, - "chalk": { - "version": "2.4.1", - "bundled": true, - "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.4.0" - }, - "dependencies": { - "ansi-styles": { - "version": "3.2.1", - "bundled": true, - "requires": { - "color-convert": "1.9.2" - } - }, - "supports-color": { - "version": "5.4.0", - "bundled": true, - "requires": { - "has-flag": "3.0.0" - } - } - } - }, - "color-convert": { - "version": "1.9.2", - "bundled": true, - "requires": { - "color-name": "1.1.1" - } - }, - "color-name": { - "version": "1.1.1", - "bundled": true - }, - "commander": { - "version": "2.17.1", - "bundled": true - }, - "concat-map": { - "version": "0.0.1", - "bundled": true - }, - "diff": { - "version": "3.5.0", - "bundled": true - }, - "escape-string-regexp": { - "version": "1.0.5", - "bundled": true - }, - "esprima": { - "version": "4.0.1", - "bundled": true - }, - "esutils": { - "version": "2.0.2", - "bundled": true - }, - "fs.realpath": { - "version": "1.0.0", - "bundled": true - }, - "glob": { - "version": "7.1.2", - "bundled": true, - "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" - } - }, - "has-ansi": { - "version": "2.0.0", - "bundled": true, - "requires": { - "ansi-regex": "2.1.1" - } - }, - "has-flag": { - "version": "3.0.0", - "bundled": true - }, - "inflight": { - "version": "1.0.6", - "bundled": true, - "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" - } - }, - "inherits": { - "version": "2.0.3", - "bundled": true - }, - "js-tokens": { - "version": "3.0.2", - "bundled": true - }, - "js-yaml": { - "version": "3.12.0", - "bundled": true, - "requires": { - "argparse": "1.0.10", - "esprima": "4.0.1" - } - }, - "minimatch": { - "version": "3.0.4", - "bundled": true, - "requires": { - "brace-expansion": "1.1.11" - } - }, - "once": { - "version": "1.4.0", - "bundled": true, - "requires": { - "wrappy": "1.0.2" - } - }, - "path-is-absolute": { - "version": "1.0.1", - "bundled": true - }, - "path-parse": { - "version": "1.0.6", - "bundled": true - }, - "resolve": { - "version": "1.8.1", - "bundled": true, - "requires": { - "path-parse": "1.0.6" - } - }, - "semver": { - "version": "5.5.0", - "bundled": true - }, - "sprintf-js": { - "version": "1.0.3", - "bundled": true - }, - "strip-ansi": { - "version": "3.0.1", - "bundled": true, - "requires": { - "ansi-regex": "2.1.1" - } - }, - "supports-color": { - "version": "2.0.0", - "bundled": true - }, - "tinymce": { - "version": "4.8.2", - "bundled": true - }, - "tslib": { - "version": "1.9.3", - "bundled": true - }, - "tslint": { - "version": "5.11.0", - "bundled": true, - "requires": { - "babel-code-frame": "6.26.0", - "builtin-modules": "1.1.1", - "chalk": "2.4.1", - "commander": "2.17.1", - "diff": "3.5.0", - "glob": "7.1.2", - "js-yaml": "3.12.0", - "minimatch": "3.0.4", - "resolve": "1.8.1", - "semver": "5.5.0", - "tslib": "1.9.3", - "tsutils": "2.29.0" - } - }, - "tsutils": { - "version": "2.29.0", - "bundled": true, - "requires": { - "tslib": "1.9.3" - } - }, - "typescript": { - "version": "3.0.1", - "bundled": true - }, - "wrappy": { - "version": "1.0.2", - "bundled": true - } - } - }, "chalk": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", diff --git a/ccm-bundle-devel-wildfly-web/package.json b/ccm-bundle-devel-wildfly-web/package.json index 6c8046fbf..3c69c6602 100644 --- a/ccm-bundle-devel-wildfly-web/package.json +++ b/ccm-bundle-devel-wildfly-web/package.json @@ -6,7 +6,6 @@ }, "dependencies": { "ccm-cms-pagemodelseditor": "7.0.0", - "ccm-cms-tinymce": "7.0.0", "tinymce": "^4.8.2" }, "devDependencies": { diff --git a/ccm-bundle-devel-wildfly-web/pom.xml b/ccm-bundle-devel-wildfly-web/pom.xml index 909baeafc..12a82ce15 100644 --- a/ccm-bundle-devel-wildfly-web/pom.xml +++ b/ccm-bundle-devel-wildfly-web/pom.xml @@ -38,6 +38,11 @@ requirejs-domready 2.0.1-2 + + org.webjars.npm + tinymce + 4.8.2 + + --> - - - + npm install @@ -108,7 +93,7 @@ - + --> diff --git a/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertmedia.js b/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertmedia.js new file mode 100644 index 000000000..4d98b93f3 --- /dev/null +++ b/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertmedia.js @@ -0,0 +1,47 @@ +tinymce.PluginManager.add("ccm-cms-insertmedia", function(editor, url) { + + console.log("Adding plugin ccm-cms-insertmedia..."); + + editor.addButton( + "insertmedia", + { + icon: "image", + onclick: function() { + openDialog(editor); + }, + tooltip: "Insert media", + }, + ); + + editor.addMenuItem( + "insert-media", + { + text: "Insert media", + context: "tools", + onclock: function() { + openDialog(editor); + }, + }, + ); + +}); + +function openDialog(editor) { + + console.log("Opening dialog"); + + editor.windowManager.open( + { + body: [ + { + label: "Search term", + name: "searchterm", + type: "textbox" + }, + ], + onsubmit: function(event) { + + }, + title: "Insert media", + }); +} diff --git a/ccm-cms-tinymce/src/main/typescript/ccm-cms/ccm-cms-tinymce.ts b/ccm-cms-tinymce/src/main/typescript.off/ccm-cms/ccm-cms-tinymce.ts similarity index 100% rename from ccm-cms-tinymce/src/main/typescript/ccm-cms/ccm-cms-tinymce.ts rename to ccm-cms-tinymce/src/main/typescript.off/ccm-cms/ccm-cms-tinymce.ts diff --git a/ccm-cms-tinymce/src/main/typescript/ccm-cms/index.ts.off b/ccm-cms-tinymce/src/main/typescript.off/ccm-cms/index.ts.off similarity index 100% rename from ccm-cms-tinymce/src/main/typescript/ccm-cms/index.ts.off rename to ccm-cms-tinymce/src/main/typescript.off/ccm-cms/index.ts.off diff --git a/ccm-cms-tinymce/src/main/typescript/ccm-cms/insert-media.ts.off b/ccm-cms-tinymce/src/main/typescript.off/ccm-cms/insert-media.ts.off similarity index 100% rename from ccm-cms-tinymce/src/main/typescript/ccm-cms/insert-media.ts.off rename to ccm-cms-tinymce/src/main/typescript.off/ccm-cms/insert-media.ts.off diff --git a/ccm-cms-tinymce/src/main/typescript.off/tinymce/plugins/ccm-cms-tinymce-insertmedia/index.ts b/ccm-cms-tinymce/src/main/typescript.off/tinymce/plugins/ccm-cms-tinymce-insertmedia/index.ts new file mode 100644 index 000000000..51f962dc9 --- /dev/null +++ b/ccm-cms-tinymce/src/main/typescript.off/tinymce/plugins/ccm-cms-tinymce-insertmedia/index.ts @@ -0,0 +1,7 @@ +import * as tinymce from "tinymce"; + +import plugin from "./plugin"; + +tinymce.PluginManager.add("ccm-cms-insertmedia", plugin); + +export default function() {}; diff --git a/ccm-cms-tinymce/src/main/typescript.off/tinymce/plugins/ccm-cms-tinymce-insertmedia/plugin.ts b/ccm-cms-tinymce/src/main/typescript.off/tinymce/plugins/ccm-cms-tinymce-insertmedia/plugin.ts new file mode 100644 index 000000000..71e66ee16 --- /dev/null +++ b/ccm-cms-tinymce/src/main/typescript.off/tinymce/plugins/ccm-cms-tinymce-insertmedia/plugin.ts @@ -0,0 +1,69 @@ +import * as tinymce from "tinymce"; + +const plugin = (editor: tinymce.Editor, url: string): void => { + editor.addButton( + "insert-media", + { + text: "Insert media", + icon: false, + onclick: function() { + openDialog(editor); + } + } + ); + + editor.addMenuItem( + "insert-media", + { + text: "Insert media", + context: "tools", + onclock: function() { + openDialog(editor); + } + } + ); +}; + +// tinymce.PluginManager.add("ccm-cms-insertmedia", +// function(editor: tinymce.Editor, +// url: string): void { +// +// editor.addButton( +// "insert-media", +// { +// text: "Insert media", +// icon: false, +// onclick: function() { +// openDialog(editor); +// } +// } +// ); +// +// editor.addMenuItem( +// "insert-media", +// { +// text: "Insert media", +// context: "tools", +// onclock: function() { +// openDialog(editor); +// } +// } +// ); +// }); + +function openDialog(editor: tinymce.Editor): void { + + editor.windowManager.open( + {}, + { + title: "Insert media", + body: [ + { label: "Search term", name: "searchterm", type: "textbox" } + ], + onsubmit: function(event: Event) { + + }, + }); +} + +export default plugin; diff --git a/ccm-cms-tinymce/tsconfig.json b/ccm-cms-tinymce/tsconfig.json index 3e29514b9..dfb12f0f8 100644 --- a/ccm-cms-tinymce/tsconfig.json +++ b/ccm-cms-tinymce/tsconfig.json @@ -3,13 +3,13 @@ "jsx": "React", "module": "commonjs", "moduleResolution": "node", - "outDir": "target/dist", + "rootDir": "src/main/typescript", "sourceMap": true, "declaration": true, "strict": true, "target": "es6" }, "include": [ - "src/main/typescript/**/*" + "src/main/typescript/tinymce/plugins/ccm-cms-tinymce-insertmedia/**/*" ] } diff --git a/ccm-cms-tinymce/webpack.config.js b/ccm-cms-tinymce/webpack.config.js new file mode 100644 index 000000000..23f65e9e2 --- /dev/null +++ b/ccm-cms-tinymce/webpack.config.js @@ -0,0 +1,25 @@ +const path = require("path"); + +module.exports = { + + devtool: "source-map", + + entry: { + "ccm-cms-tinymce-insertmedia/plugin": "./src/main/typescript/tinymce/plugins/ccm-cms-tinymce-insertmedia/index.ts", + }, + + output: { + path: path.resolve(__dirname, "target/generated-resources/tinymce/plugins"), + filename: "[name].js" + }, + + resolve: { + extensions: [".webpack.js", "web.js", ".ts", ".tsx", ".js"] + }, + + module: { + rules: [ + { test: /\.tsx?$/, loader: "ts-loader"} + ] + } +}; diff --git a/ccm-cms/src/main/java/org/arsdigita/cms/CMSConfig.java b/ccm-cms/src/main/java/org/arsdigita/cms/CMSConfig.java index abdb795ea..4744dc461 100644 --- a/ccm-cms/src/main/java/org/arsdigita/cms/CMSConfig.java +++ b/ccm-cms/src/main/java/org/arsdigita/cms/CMSConfig.java @@ -83,15 +83,18 @@ public class CMSConfig { */ @Setting private List dhtmlEditorConfig = Arrays.asList(new String[]{ - "TinyMCE.Config", "/scripts/dist/ccm-cms-tinymce.js"}); -// "TinyMCE.Config", "/tinymce/tinymce_cms_config.js"}); + "TinyMCE.Config", "scripts/ccm-cms/tinymce-loader.js" + }); +// "TinyMCE.Config", "scripts/dist/tinymce/tinymce_cms_config.js"}); /** * Defines which plugins to use, e.g.TableOperations,CSS Format: * [string,string,string] */ @Setting - private List dhtmlEditorPlugins = Collections.emptyList(); + private List dhtmlEditorPlugins = Arrays.asList(new String[]{ + "scripts/ccm-cms/tinymce/plugins/insertmedia.js" + }); /** * Prevent undesirable functions from being made available, eg images should diff --git a/ccm-core/src/main/java/com/arsdigita/bebop/BebopConfig.java b/ccm-core/src/main/java/com/arsdigita/bebop/BebopConfig.java index d42067569..bff6acabb 100755 --- a/ccm-core/src/main/java/com/arsdigita/bebop/BebopConfig.java +++ b/ccm-core/src/main/java/com/arsdigita/bebop/BebopConfig.java @@ -79,7 +79,7 @@ public final class BebopConfig { @Setting // private String dhtmlEditorSrcFile = "/ccm-editor/ccm-editor-loader.js"; - private String dhtmlEditorSrcFile = "/tinymce/js/tinymce/tinymce.min.js"; + private String dhtmlEditorSrcFile = "/webjars/tinymce/4.8.2/tinymce.js"; @Setting private Boolean showClassName = false; diff --git a/ccm-core/src/main/java/com/arsdigita/bebop/form/DHTMLEditor.java b/ccm-core/src/main/java/com/arsdigita/bebop/form/DHTMLEditor.java index fe0f15697..2748266a7 100755 --- a/ccm-core/src/main/java/com/arsdigita/bebop/form/DHTMLEditor.java +++ b/ccm-core/src/main/java/com/arsdigita/bebop/form/DHTMLEditor.java @@ -112,7 +112,7 @@ public class DHTMLEditor extends TextArea { "/ccm-editor/ccm-editor-loader.js"); public static final Config STANDARD = new Config("tinymce.config", - "/tinymce(tinymce-config.js"); + "/tinymce/tinymce-config.js"); private String m_name; private String m_path; diff --git a/ccm-theme-foundry/src/main/resources/themes/foundry/foundry/lib/bebop/editors.xsl b/ccm-theme-foundry/src/main/resources/themes/foundry/foundry/lib/bebop/editors.xsl index 253fff37d..efaefea9c 100644 --- a/ccm-theme-foundry/src/main/resources/themes/foundry/foundry/lib/bebop/editors.xsl +++ b/ccm-theme-foundry/src/main/resources/themes/foundry/foundry/lib/bebop/editors.xsl @@ -1,9 +1,9 @@ ]> - - + - + - + - + - + - - + --> - + - + - + - + - - + + - + + + + + + - + - + + + - + - + - + - + + - + - + @@ -348,9 +355,9 @@ - + - +