diff --git a/ccm-core/web/assets/tinymce/editor.css b/ccm-core/web/assets/tinymce/editor.css
new file mode 100644
index 000000000..9e769023d
--- /dev/null
+++ b/ccm-core/web/assets/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;
+}
\ No newline at end of file
diff --git a/ccm-core/web/assets/tinymce/js/tinymce/plugins/image/plugin.min.js b/ccm-core/web/assets/tinymce/js/tinymce/plugins/image/plugin.min.js
index eae3a15ae..4ab72c5e3 100644
--- a/ccm-core/web/assets/tinymce/js/tinymce/plugins/image/plugin.min.js
+++ b/ccm-core/web/assets/tinymce/js/tinymce/plugins/image/plugin.min.js
@@ -1 +1 @@
-!function(){"use strict";var e=tinymce.util.Tools.resolve("tinymce.PluginManager"),d=function(e){return!1!==e.settings.image_dimensions},a=function(e){return!0===e.settings.image_advtab},f=function(e){return e.getParam("image_prepend_url","")},n=function(e){return e.getParam("image_class_list")},r=function(e){return!1!==e.settings.image_description},i=function(e){return!0===e.settings.image_title},o=function(e){return!0===e.settings.image_caption},l=function(e){return e.getParam("image_list",!1)},u=function(e){return e.getParam("images_upload_url",!1)},c=function(e){return e.getParam("images_upload_handler",!1)},s=function(e){return e.getParam("images_upload_url")},g=function(e){return e.getParam("images_upload_handler")},m=function(e){return e.getParam("images_upload_base_path")},p=function(e){return e.getParam("images_upload_credentials")},h="undefined"!=typeof window?window:Function("return this;")(),v=function(e,t){for(var n=t!==undefined&&null!==t?t:h,r=0;r";
+ var fancy_box_wrap = " ' +
+ img +
+ "";
+ var span = "";
+ if (win.find("#caption").value()) {
+ span =
+ '' +
+ image_name +
+ "";
+ }
+ var img_div = '' +
+ fancy_box_wrap +
+ span +
+ "
";
+ editor.insertContent(img_div + "
");
+ }
+ }
+ });
+ }
+ return {
+ open: open
+ };
+}
+exports["default"] = default_1;
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+exports.__esModule = true;
+var plugin_1 = __webpack_require__(0);
+tinymce.PluginManager.add("trunk-images", plugin_1["default"]);
+
+
+/***/ })
+/******/ ]);
\ No newline at end of file
diff --git a/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.min.js b/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.min.js
new file mode 100644
index 000000000..0c57978da
--- /dev/null
+++ b/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.min.js
@@ -0,0 +1 @@
+!function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";t.__esModule=!0;var i=n(1),a=function(e,t){e.addButton("trunk-images-button",{icon:"image",onlick:i.default(e).open,stateSelector:"div.image"}),e.addMenuItem("trunk-images",{icon:"image",text:"Insert Images",onclick:i.default(e).open,stateSelector:"image",context:"insert",prependToContext:!0})};t.default=a},function(e,t,n){"use strict";function i(e){function t(){var t="",n=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),i=new tinymce.ui.TextBox({name:"file",label:"File:",disabled:!0});n.add(i);var a=new tinymce.ui.Button({name:"browse_images",text:"Browse Images",onclick:function(){var e=window.location.href,n=e.lastIndexOf("/"),a=e.slice(0,n+1)+"image_select.jsp";window.open(a,"_blank","scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no");window.openCCM=new Object,window.openCCM.imageSet=function(e){return i.text(e.src),p.find("#file").value(e.src).fire("change"),p.find("#width").value(e.width).fire("change"),p.find("#height").value(e.height).fire("change"),t=e.name,!0}}});n.add(a);var o=new tinymce.ui.TextBox({name:"alternate",label:"Alternate:"}),l=new tinymce.ui.TextBox({name:"title",label:"Title:"}),r=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),u=new tinymce.ui.Label({text:"Alignment:"}),c=new tinymce.ui.ListBox({name:"alignment",values:[{text:"Not set",value:""},{text:"Left",value:"left"},{text:"Center",value:"center"},{text:"Right",value:"right"}]});r.add(u),r.add(c);var d=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),s=new tinymce.ui.Label({text:"Fancy Box:"}),m=new tinymce.ui.ListBox({name:"fancybox",values:[{text:"None",value:""},{text:"Zoom",value:"imageZoom"},{text:"Gallery",value:"imageGallery"}]});d.add(s),d.add(m);var f=new tinymce.ui.Checkbox({label:"Caption:",name:"caption"}),g=new tinymce.ui.Container({label:"Dimension",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),x=new tinymce.ui.TextBox({name:"width",label:"Width"}),w=new tinymce.ui.TextBox({name:"height",label:"Height"});g.add(x),g.add({type:"label",text:"X"}),g.add(w);var p=e.windowManager.open({title:"Insert/Modify Image",width:800,height:600,body:[n,o,l,r,d,f,g],onsubmit:function(){var n=p.find("#file").value(),i=p.find("#alternate").value(),a=p.find("#width").value(),o=p.find("#height").value(),l=p.find("#title").value(),r=p.find("#alignment").value(),u=p.find("#fancybox").value();if(null!=n){var c="
',d=" '+c+"",s="";p.find("#caption").value()&&(s=''+t+"");var m=''+d+s+"
";e.insertContent(m+"
")}}})}return{open:t}}t.__esModule=!0,t.default=i},function(e,t,n){"use strict";t.__esModule=!0;var i=n(0);tinymce.PluginManager.add("trunk-images",i.default)}]);
\ No newline at end of file
diff --git a/trunk-images/config/webpack.config.prod.js b/trunk-images/config/webpack.config.prod.js
index cf159f665..498de4d90 100644
--- a/trunk-images/config/webpack.config.prod.js
+++ b/trunk-images/config/webpack.config.prod.js
@@ -10,30 +10,26 @@ module.exports = {
"plugin.min": "./src/index.ts"
},
output: {
- path: path.join(__dirname, "../dist", pluginName),
+ path: path.join(__dirname, "../../runtime/apache-tomcat-8.5.15/webapps/ROOT/assets/tinymce/js/tinymce/plugins", pluginName),
filename: "[name].js"
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".js"]
},
module: {
- rules: [
- {
- test: /\.ts$/,
- use: "ts-loader"
- }
- ]
+ rules: [{
+ test: /\.ts$/,
+ use: "ts-loader"
+ }]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
}),
- new CopyWebpackPlugin([
- {
- from: path.join(__dirname, "../src/LICENSE"),
- to: path.join(__dirname, "../dist", pluginName)
- }
- ])
+ new CopyWebpackPlugin([{
+ from: path.join(__dirname, "../src/LICENSE"),
+ to: path.join(__dirname, "../dist", pluginName)
+ }])
]
-};
+};
\ No newline at end of file
diff --git a/trunk-images/src/Dialog.ts b/trunk-images/src/Dialog.ts
index c55b9dbdf..c89aaa0d9 100644
--- a/trunk-images/src/Dialog.ts
+++ b/trunk-images/src/Dialog.ts
@@ -1,232 +1,234 @@
declare var tinymce: any;
-const open = function(editor) {
- let image_name = "";
+export default function(editor) {
+ function open() {
+ let image_name = "";
- // ================== File Chooser ====================
- let fileChooseContainer = new tinymce.ui.Container({
- type: "container",
- layout: "flex",
- direction: "row",
- align: "center",
- padding: 5,
- spacing: 15,
- margin: 5
- });
+ // ================== File Chooser ====================
+ let fileChooseContainer = new tinymce.ui.Container({
+ type: "container",
+ layout: "flex",
+ direction: "row",
+ align: "center",
+ padding: 5,
+ spacing: 15,
+ margin: 5
+ });
- let imagePathTextBox = new tinymce.ui.TextBox({
- name: "file",
- label: "File:",
- disabled: true
- });
+ let imagePathTextBox = new tinymce.ui.TextBox({
+ name: "file",
+ label: "File:",
+ disabled: true
+ });
- fileChooseContainer.add(imagePathTextBox);
+ fileChooseContainer.add(imagePathTextBox);
- let browseButton = new tinymce.ui.Button({
- name: "browse_images",
- text: "Browse Images",
- onclick: function() {
- let baseURL = window.location.href;
- let offset = baseURL.lastIndexOf("/");
- let destURL = baseURL.slice(0, offset + 1) + "image_select.jsp";
- let selectWindow = window.open(
- destURL,
- "_blank",
- "scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no"
- );
- (window).openCCM = new Object();
- (window).openCCM.imageSet = selectedImage => {
- imagePathTextBox.text(selectedImage.src);
- win
- .find("#file")
- .value(selectedImage.src)
- .fire("change");
- win
- .find("#width")
- .value(selectedImage.width)
- .fire("change");
- win
- .find("#height")
- .value(selectedImage.height)
- .fire("change");
- image_name = selectedImage.name;
- return true;
- };
- }
- });
- fileChooseContainer.add(browseButton);
- // ================== File Chooser ====================
-
- // ================== Alternate Text ==================
- let alternateTextBox = new tinymce.ui.TextBox({
- name: "alternate",
- label: "Alternate:"
- });
- // ================== Alternate Text ==================
-
- // ================== Title Text ======================
- let titleTextBox = new tinymce.ui.TextBox({
- name: "title",
- label: "Title:"
- });
- // ================== Title Text ======================
-
- // ================== Alignment =======================
- let alignmentContainer = new tinymce.ui.Container({
- type: "container",
- layout: "flex",
- direction: "row"
- });
-
- let alginLabel = new tinymce.ui.Label({
- text: "Alignment:"
- });
-
- let alignListBox = new tinymce.ui.ListBox({
- name: "alignment",
- values: [
- { text: "Not set", value: "" },
- { text: "Left", value: "left" },
- { text: "Center", value: "center" },
- { text: "Right", value: "right" }
- ]
- });
-
- alignmentContainer.add(alginLabel);
- alignmentContainer.add(alignListBox);
- // ================== Alignment =======================
-
- // ================== Fancy Box =======================
- let fancyBoxContainer = new tinymce.ui.Container({
- type: "container",
- layout: "flex",
- direction: "row"
- });
-
- let fancyBoxLabel = new tinymce.ui.Label({
- text: "Fancy Box:"
- });
-
- let fancyBoxListBox = new tinymce.ui.ListBox({
- name: "fancybox",
- values: [
- { text: "None", value: "" },
- { text: "Zoom", value: "imageZoom" },
- { text: "Gallery", value: "imageGallery" }
- ]
- });
-
- fancyBoxContainer.add(fancyBoxLabel);
- fancyBoxContainer.add(fancyBoxListBox);
- // ================== Fancy Box =======================
-
- // ================== Caption =========================
- let captionCheckBox = new tinymce.ui.Checkbox({
- label: "Caption:",
- name: "caption"
- });
- // ================== Caption =========================
-
- // ================== Dimension Box ===================
- let dimensionContainer = new tinymce.ui.Container({
- label: "Dimension",
- layout: "flex",
- direction: "row",
- align: "center",
- padding: 5,
- spacing: 15,
- margin: 5
- });
-
- let widthTextBox = new tinymce.ui.TextBox({
- name: "width",
- label: "Width"
- });
-
- let heightTextBox = new tinymce.ui.TextBox({
- name: "height",
- label: "Height"
- });
-
- dimensionContainer.add(widthTextBox);
- dimensionContainer.add({ type: "label", text: "X" });
- dimensionContainer.add(heightTextBox);
- // ================== Dimension Box ===================
-
- const win = editor.windowManager.open({
- title: "Insert/Modify Image",
- width: 800,
- height: 600,
- body: [
- fileChooseContainer,
- alternateTextBox,
- titleTextBox,
- alignmentContainer,
- fancyBoxContainer,
- captionCheckBox,
- dimensionContainer
- ],
- onsubmit: function() {
- let src = win.find("#file").value();
- let alternate = win.find("#alternate").value();
- let width = win.find("#width").value();
- let height = win.find("#height").value();
- let title = win.find("#title").value();
- let alignment = win.find("#alignment").value();
- let fancy_box = win.find("#fancybox").value();
-
- if (src != null) {
- let img =
- "
";
-
- let fancy_box_wrap =
- " ' +
- img +
- "";
- let span = "";
- if (win.find("#caption").value()) {
- span =
- '' +
- image_name +
- "";
- }
- let img_div =
- '' +
- fancy_box_wrap +
- span +
- "
";
- editor.insertContent(img_div);
+ let browseButton = new tinymce.ui.Button({
+ name: "browse_images",
+ text: "Browse Images",
+ onclick: function() {
+ let baseURL = window.location.href;
+ let offset = baseURL.lastIndexOf("/");
+ let destURL = baseURL.slice(0, offset + 1) + "image_select.jsp";
+ let selectWindow = window.open(
+ destURL,
+ "_blank",
+ "scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no"
+ );
+ (window).openCCM = new Object();
+ (window).openCCM.imageSet = selectedImage => {
+ imagePathTextBox.text(selectedImage.src);
+ win
+ .find("#file")
+ .value(selectedImage.src)
+ .fire("change");
+ win
+ .find("#width")
+ .value(selectedImage.width)
+ .fire("change");
+ win
+ .find("#height")
+ .value(selectedImage.height)
+ .fire("change");
+ image_name = selectedImage.name;
+ return true;
+ };
}
- }
- });
-};
+ });
+ fileChooseContainer.add(browseButton);
+ // ================== File Chooser ====================
-export default {
- open
-};
+ // ================== Alternate Text ==================
+ let alternateTextBox = new tinymce.ui.TextBox({
+ name: "alternate",
+ label: "Alternate:"
+ });
+ // ================== Alternate Text ==================
+
+ // ================== Title Text ======================
+ let titleTextBox = new tinymce.ui.TextBox({
+ name: "title",
+ label: "Title:"
+ });
+ // ================== Title Text ======================
+
+ // ================== Alignment =======================
+ let alignmentContainer = new tinymce.ui.Container({
+ type: "container",
+ layout: "flex",
+ direction: "row"
+ });
+
+ let alginLabel = new tinymce.ui.Label({
+ text: "Alignment:"
+ });
+
+ let alignListBox = new tinymce.ui.ListBox({
+ name: "alignment",
+ values: [
+ { text: "Not set", value: "" },
+ { text: "Left", value: "left" },
+ { text: "Center", value: "center" },
+ { text: "Right", value: "right" }
+ ]
+ });
+
+ alignmentContainer.add(alginLabel);
+ alignmentContainer.add(alignListBox);
+ // ================== Alignment =======================
+
+ // ================== Fancy Box =======================
+ let fancyBoxContainer = new tinymce.ui.Container({
+ type: "container",
+ layout: "flex",
+ direction: "row"
+ });
+
+ let fancyBoxLabel = new tinymce.ui.Label({
+ text: "Fancy Box:"
+ });
+
+ let fancyBoxListBox = new tinymce.ui.ListBox({
+ name: "fancybox",
+ values: [
+ { text: "None", value: "" },
+ { text: "Zoom", value: "imageZoom" },
+ { text: "Gallery", value: "imageGallery" }
+ ]
+ });
+
+ fancyBoxContainer.add(fancyBoxLabel);
+ fancyBoxContainer.add(fancyBoxListBox);
+ // ================== Fancy Box =======================
+
+ // ================== Caption =========================
+ let captionCheckBox = new tinymce.ui.Checkbox({
+ label: "Caption:",
+ name: "caption"
+ });
+ // ================== Caption =========================
+
+ // ================== Dimension Box ===================
+ let dimensionContainer = new tinymce.ui.Container({
+ label: "Dimension",
+ layout: "flex",
+ direction: "row",
+ align: "center",
+ padding: 5,
+ spacing: 15,
+ margin: 5
+ });
+
+ let widthTextBox = new tinymce.ui.TextBox({
+ name: "width",
+ label: "Width"
+ });
+
+ let heightTextBox = new tinymce.ui.TextBox({
+ name: "height",
+ label: "Height"
+ });
+
+ dimensionContainer.add(widthTextBox);
+ dimensionContainer.add({ type: "label", text: "X" });
+ dimensionContainer.add(heightTextBox);
+ // ================== Dimension Box ===================
+
+ const win = editor.windowManager.open({
+ title: "Insert/Modify Image",
+ width: 800,
+ height: 600,
+ body: [
+ fileChooseContainer,
+ alternateTextBox,
+ titleTextBox,
+ alignmentContainer,
+ fancyBoxContainer,
+ captionCheckBox,
+ dimensionContainer
+ ],
+ onsubmit: function() {
+ let src = win.find("#file").value();
+ let alternate = win.find("#alternate").value();
+ let width = win.find("#width").value();
+ let height = win.find("#height").value();
+ let title = win.find("#title").value();
+ let alignment = win.find("#alignment").value();
+ let fancy_box = win.find("#fancybox").value();
+
+ if (src != null) {
+ let img =
+ "
";
+
+ let fancy_box_wrap =
+ " ' +
+ img +
+ "";
+ let span = "";
+ if (win.find("#caption").value()) {
+ span =
+ '' +
+ image_name +
+ "";
+ }
+ let img_div =
+ '' +
+ fancy_box_wrap +
+ span +
+ "
";
+ editor.insertContent(img_div + "
");
+ }
+ }
+ });
+ }
+
+ return {
+ open
+ };
+}
diff --git a/trunk-images/src/plugin.ts b/trunk-images/src/plugin.ts
index 8565d748b..82b0df6d6 100644
--- a/trunk-images/src/plugin.ts
+++ b/trunk-images/src/plugin.ts
@@ -1,15 +1,20 @@
import Dialog from "./Dialog";
+declare var tinymce: any;
const plugin = (editor: any, url: String) => {
- console.log("Trunk-Images loaded");
- editor.addMenuItem("trunk-images", {
- icon: false,
- text: "Insert Trunk-Images",
- onclick: function() {
- Dialog.open(editor);
- },
- context: "insert"
+ editor.addButton("trunk-images-button", {
+ icon: "image",
+ onlick: Dialog(editor).open,
+ stateSelector: "div.image"
+ });
+
+ editor.addMenuItem("trunk-images", {
+ icon: "image",
+ text: "Insert Images",
+ onclick: Dialog(editor).open,
+ stateSelector: "image",
+ context: "insert",
+ prependToContext: true
});
- return {};
};
export default plugin;