From ebf8a944b3006788fee1d260794454a47b51ae59 Mon Sep 17 00:00:00 2001 From: jensp Date: Sun, 30 Jun 2019 10:58:26 +0000 Subject: [PATCH] Images plugin for TinyMCE 5 git-svn-id: https://svn.libreccm.org/ccm/trunk@6141 8810af33-2d31-482b-a856-94f89814c4df --- ccm-cms-tinymce/ccm-cms-tinymce.js | 9 +- .../plugins/ccm-cms-images/index.js | 1 + .../plugins/ccm-cms-images/plugin.js | 346 ++++++++++++++++++ 3 files changed, 353 insertions(+), 3 deletions(-) create mode 100644 ccm-cms-tinymce/plugins/ccm-cms-images/index.js create mode 100644 ccm-cms-tinymce/plugins/ccm-cms-images/plugin.js diff --git a/ccm-cms-tinymce/ccm-cms-tinymce.js b/ccm-cms-tinymce/ccm-cms-tinymce.js index fad32488f..2cb96f889 100644 --- a/ccm-cms-tinymce/ccm-cms-tinymce.js +++ b/ccm-cms-tinymce/ccm-cms-tinymce.js @@ -14,6 +14,8 @@ require("tinymce/plugins/template"); require("tinymce/plugins/visualblocks"); require("tinymce/plugins/wordcount"); +require("./plugins/ccm-cms-images/plugin.js"); + // Initialize the app tinymce.init({ plugins: ["code", @@ -25,9 +27,10 @@ tinymce.init({ "table", "template", "visualblocks", - "wordcount"], + "wordcount", + "ccm-cms-images"], selector: ".tinymce", templates: [], - content_css: ["./editor.css"], - toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent" + content_css: ["/assets/tinymce/editor.css"], + toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent | ccm-cms-images" }); diff --git a/ccm-cms-tinymce/plugins/ccm-cms-images/index.js b/ccm-cms-tinymce/plugins/ccm-cms-images/index.js new file mode 100644 index 000000000..b76df7779 --- /dev/null +++ b/ccm-cms-tinymce/plugins/ccm-cms-images/index.js @@ -0,0 +1 @@ +require("./plugin.js"); \ No newline at end of file diff --git a/ccm-cms-tinymce/plugins/ccm-cms-images/plugin.js b/ccm-cms-tinymce/plugins/ccm-cms-images/plugin.js new file mode 100644 index 000000000..1867d9e76 --- /dev/null +++ b/ccm-cms-tinymce/plugins/ccm-cms-images/plugin.js @@ -0,0 +1,346 @@ +const ImageDialog = function (editor) { + + function getImageData(editor) { + + const elem = editor.selection.getNode(); + const imgDiv = editor.dom.getParent(elem, "div.image"); + const img = editor.dom.select("img", imgDiv)[0]; + if (imgDiv != null) { + let imageData = { + file: img.getAttribute("src"), + width: img.getAttribute("width").slice(0, -2), + height: img.getAttribute("height").slice(0, -2), + alt: img.getAttribute("alt"), + align: imgDiv.classList[1], + fancy: imgDiv.childNodes[0].classList[0].slice(0, -1), + title: imgDiv.childNodes[0].title, + caption: imgDiv.childNodes[1].localName == "span", + parent: imgDiv + }; + console.log(imageData); + return imageData; + } else { + return null; + } + } + + function open() { + + return tinymce.activeEditor.windowManager.open({ + title: "Insert/edit images", + body: { + type: "panel", + items: [ + { + type: "input", + name: "file", + label: "File", + disabled: true + } + ] + }, + buttons: [] + }); + + // const imageData = getImageData(editor); + // 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 + // }); + + // let imagePathTextBox = new tinymce.ui.TextBox({ + // name: "file", + // label: "File:", + // disabled: true + // }); + + // 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 + + // "
"; + // if (imageData != null) { + // editor.dom.replace( + // editor.dom.createFragment(img_div), + // imageData.parent + // ); + // } else { + // editor.insertContent(img_div); + // } + // } + // } + // }); + // // ================== Fill with selection ============= + // if (imageData != null) { + // win + // .find("#file") + // .value(imageData.file) + // .fire("change"); + // win + // .find("#alternate") + // .value(imageData.alt) + // .fire("change"); + // win + // .find("#width") + // .value(imageData.width) + // .fire("change"); + // win + // .find("#height") + // .value(imageData.height) + // .fire("change"); + // if (imageData.align != undefined) { + // win + // .find("#alignment") + // .value(imageData.align) + // .fire("change"); + // } + // if (imageData.fancy != undefined) { + // win + // .find("#fancybox") + // .value(imageData.fancy) + // .fire("change"); + // } + // win + // .find("#title") + // .value(imageData.title) + // .fire("change"); + // win + // .find("#caption") + // .value(imageData.caption) + // .fire("change"); + // } + // // ================== Fill with selection ============= + } + + return { + open + }; +} + +const ccmCmsImages = function (editor, url) { + + editor.ui.registry.addButton("ccm-cms-images", + { + //text: "Insert/Edit image", + icon: "image", + tooltip: "Insert/Edit images", + onAction: ImageDialog(editor).open, + stateSelector: "div.image" + }); + + editor.ui.registry.addMenuItem("ccm-cms-images", + { + icon: "image", + text: "Insert/Edit Images", + onAction: ImageDialog(editor).open, + stateSelector: "image", + context: "insert", + prependToContext: true + }); +} + +tinymce.PluginManager.add("ccm-cms-images", ccmCmsImages); \ No newline at end of file