From 4091923301e02fbaf4f0b3254afe0a6f0bc50f6c Mon Sep 17 00:00:00 2001 From: jensp Date: Wed, 5 Sep 2018 18:20:57 +0000 Subject: [PATCH] CcmNG: Next part of TinyMCE integration git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5687 8810af33-2d31-482b-a856-94f89814c4df --- .../scripts/ccm-cms/tinymce-loader.js | 14 +- .../ccm-cms/tinymce/plugins/insertimage.js | 142 ++++++++++++++++++ .../java/org/arsdigita/cms/CMSConfig.java | 3 +- .../rs/AssetPropertiesProvider.java | 38 +++++ .../rs/ImagesPropertiesProvider.java | 76 ++++++++++ .../rs/ProvidesPropertiesForAssetType.java | 40 +++++ .../foundry/foundry/lib/bebop/editors.xsl | 20 ++- 7 files changed, 324 insertions(+), 9 deletions(-) create mode 100644 ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js create mode 100644 ccm-cms/src/main/java/org/librecms/contentsection/rs/AssetPropertiesProvider.java create mode 100644 ccm-cms/src/main/java/org/librecms/contentsection/rs/ImagesPropertiesProvider.java create mode 100644 ccm-cms/src/main/java/org/librecms/contentsection/rs/ProvidesPropertiesForAssetType.java diff --git a/ccm-bundle-devel-wildfly-web/src/main/resources/scripts/ccm-cms/tinymce-loader.js b/ccm-bundle-devel-wildfly-web/src/main/resources/scripts/ccm-cms/tinymce-loader.js index 8c49eadc4..251a540a7 100644 --- a/ccm-bundle-devel-wildfly-web/src/main/resources/scripts/ccm-cms/tinymce-loader.js +++ b/ccm-bundle-devel-wildfly-web/src/main/resources/scripts/ccm-cms/tinymce-loader.js @@ -1,6 +1,10 @@ -tinymce.init({ - menubar: "edit view insert format tools table", - plugins: "ccm-cms-insertmedia code lists nonbreaking noneditable paste searchreplace table template visualblocks wordcount", - selector: ".tinymce", - toolbar: "undo redo formatselect bold italic underline strikethrough alignleft aligncenter alignright alignjustify alignnone insert indent outdent blockquote bullist numlist link unlink openlink insertmedia table", +document.addEventListener("DOMContentLoaded", function() { + tinymce.init({ + contentsection: document.querySelector(".tinymce").getAttribute("data-contentsection"), + contextprefix: document.querySelector(".tinymce").getAttribute("data-contextprefix"), + menubar: "edit view insert format tools table", + plugins: "ccm-cms-insertimage code lists nonbreaking noneditable paste searchreplace table template visualblocks wordcount", + selector: ".tinymce", + toolbar: "undo redo formatselect bold italic underline strikethrough alignleft aligncenter alignright alignjustify alignnone insert indent outdent blockquote bullist numlist link unlink openlink insertimage table", + }); }); diff --git a/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js b/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js new file mode 100644 index 000000000..3c5824456 --- /dev/null +++ b/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js @@ -0,0 +1,142 @@ +tinymce.PluginManager.add("ccm-cms-insertimage", function(editor, url) { + + console.log("Adding plugin ccm-cms-insertimage..."); + + editor.addButton( + "insertimage", + { + icon: "image", + onclick: function() { + openDialog(editor); + }, + tooltip: "Insert image", + }, + ); + + editor.addMenuItem( + "insert-image", + { + text: "Insert image", + context: "tools", + onclick: function() { + openDialog(editor); + }, + }, + ); + +}); + +function openDialog(editor) { + + console.log("Opening dialog"); + + editor.windowManager.open({ + body: [ + { + items: [ + { + direction: "row", + items: [ + { + disabled: true, + label: "Image", + name: "imageUuid", + type: "textbox", + value: "foobar", + }, + { + name: "browse", + onclick: function() { + openBrowseDialog(editor); + }, + text: "Browse", + type: "button", + }, + ], + label: "Image", + layout: "flex", + type: "container", + }, + { + label: "Caption", + name: "caption", + type: "textbox", + }, + { + label: "Width", + name: "width", + size: 4, + type: "textbox", + }, + { + label: "Height", + name: "height", + size: 4, + type: "textbox", + }, + { + name: "lightbox", + text: "Lightbox?", + type: "Checkbox", + }, + { + border: "1 1 1 1", + name: "imagePanel", + type: "container", + }, + ], + minHeight: 200, + minWidth: 400, + name: "insertimage_dialog_container", + onPostRender: function() { + // console.log(`imageUuid = ${this.find("#imageUuid").value()}`); + const imageUuid = this.find("#imageUuid").value(); + console.log(`imageUuid = ${imageUuid}`); + // this.find("#imagePanel").innerHTML = `
${imageUuid}
`; + this.find("#imagePanel").append([ + { + html: `
${imageUuid}
`, + // text: `${imageUuid}`, + // type: "label", + type: "container", + } + ]); + console.log(this.find("#imagePanel")); + }, + type: "form", + }, + ], + onsubmit: function(event) { + + }, + title: "Insert image", + }); + + console.log("Dialog opened."); +} + +function openBrowseDialog(editor) { + + editor.windowManager.open({ + + body: [ + { + items: [ + { + text: "foo", + type: "label", + } + ], + layout: "flow", + minHeigth: 400, + minWidth: 400, + onPostRender: function() { + console.log(`contentSection: ${editor.getParam("contentsection")}`); + console.log(`contextPrefix: ${editor.getParam("contextprefix")}`); + }, + type: "container", + } + ], + title: "Select image", + }); +} 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 4744dc461..19d8846d7 100644 --- a/ccm-cms/src/main/java/org/arsdigita/cms/CMSConfig.java +++ b/ccm-cms/src/main/java/org/arsdigita/cms/CMSConfig.java @@ -93,7 +93,8 @@ public class CMSConfig { */ @Setting private List dhtmlEditorPlugins = Arrays.asList(new String[]{ - "scripts/ccm-cms/tinymce/plugins/insertmedia.js" +// "scripts/ccm-cms/tinymce/plugins/insertimage.js" + "http://localhost/web/ccm-cms-tinymce/insertimage.js" }); /** diff --git a/ccm-cms/src/main/java/org/librecms/contentsection/rs/AssetPropertiesProvider.java b/ccm-cms/src/main/java/org/librecms/contentsection/rs/AssetPropertiesProvider.java new file mode 100644 index 000000000..6be6f84a5 --- /dev/null +++ b/ccm-cms/src/main/java/org/librecms/contentsection/rs/AssetPropertiesProvider.java @@ -0,0 +1,38 @@ +/* + * Copyright (C) 2018 LibreCCM Foundation. + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2.1 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this library; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, + * MA 02110-1301 USA + */ +package org.librecms.contentsection.rs; + +import org.librecms.contentsection.Asset; + +import javax.json.JsonObjectBuilder; + +/** + * An helper interface for providing additional properties of assets which are + * provided as JSON object. + * + * Implementations must be CDI beans (request scope is recommended) annotated + * with the qualifier annotation {@link ProvidesProperties}. + * + * @author Jens Pelzetter + */ +public interface AssetPropertiesProvider { + + void addProperties(Asset asset, JsonObjectBuilder builder); + +} diff --git a/ccm-cms/src/main/java/org/librecms/contentsection/rs/ImagesPropertiesProvider.java b/ccm-cms/src/main/java/org/librecms/contentsection/rs/ImagesPropertiesProvider.java new file mode 100644 index 000000000..4f77e1f19 --- /dev/null +++ b/ccm-cms/src/main/java/org/librecms/contentsection/rs/ImagesPropertiesProvider.java @@ -0,0 +1,76 @@ +/* + * Copyright (C) 2018 LibreCCM Foundation. + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2.1 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this library; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, + * MA 02110-1301 USA + */ +package org.librecms.contentsection.rs; + +import org.libreccm.core.UnexpectedErrorException; +import org.librecms.assets.Image; +import org.librecms.contentsection.Asset; + +import java.awt.image.BufferedImage; +import java.io.ByteArrayInputStream; +import java.io.IOException; +import java.io.InputStream; +import java.util.Objects; + +import javax.imageio.ImageIO; +import javax.json.JsonObjectBuilder; + +/** + * + * @author Jens Pelzetter + */ +@ProvidesPropertiesForAssetType(Image.class) +public class ImagesPropertiesProvider implements AssetPropertiesProvider { + + @Override + public void addProperties(final Asset asset, + final JsonObjectBuilder builder) { + + Objects.requireNonNull(asset); + Objects.requireNonNull(builder); + + if (!(asset instanceof Image)) { + throw new IllegalArgumentException(String + .format("\"%s\" only supports assets of type \"%s\". Check " + + "the qualifier annotation on \"%s\".", + getClass().getName(), + Image.class.getName(), + getClass().getName())); + } + + final Image image = (Image) asset; + final byte[] data = image.getData(); + final InputStream inputStream = new ByteArrayInputStream(data); + final BufferedImage bufferedImage; + try { + bufferedImage = ImageIO.read(inputStream); + } catch(IOException ex) { + throw new UnexpectedErrorException(ex); + } + + builder + .add("name", image.getDisplayName()) + .add("filename", image.getFileName()) + .add("mimetype", image.getMimeType().toString()) + .add("width", bufferedImage.getWidth()) + .add("height", bufferedImage.getHeight()) + .add("size", data.length); + } + +} diff --git a/ccm-cms/src/main/java/org/librecms/contentsection/rs/ProvidesPropertiesForAssetType.java b/ccm-cms/src/main/java/org/librecms/contentsection/rs/ProvidesPropertiesForAssetType.java new file mode 100644 index 000000000..27c7e0f76 --- /dev/null +++ b/ccm-cms/src/main/java/org/librecms/contentsection/rs/ProvidesPropertiesForAssetType.java @@ -0,0 +1,40 @@ +/* + * Copyright (C) 2018 LibreCCM Foundation. + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2.1 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this library; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, + * MA 02110-1301 USA + */ +package org.librecms.contentsection.rs; + +import org.librecms.contentsection.Asset; + +import java.lang.annotation.ElementType; +import java.lang.annotation.Retention; +import java.lang.annotation.RetentionPolicy; +import java.lang.annotation.Target; + +import javax.inject.Qualifier; + +/** + * + * @author Jens Pelzetter + */ +@Qualifier +@Retention(RetentionPolicy.RUNTIME) +@Target(ElementType.TYPE) +public @interface ProvidesPropertiesForAssetType { + + Class value(); +} 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 efaefea9c..c68f8eada 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 @@ -253,7 +253,12 @@ - @@ -272,7 +277,14 @@ - + + + + + + + + @@ -286,7 +298,9 @@ name="{@name}" rows="{@rows}" cols="{@cols}" - wrap="{@wrap}"> + wrap="{@wrap}" + data-contextprefix="{$context-prefix}" + data-contentsection="{./@current-contentsection-primaryurl}">