CcmNG: Next part of TinyMCE integration
git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5687 8810af33-2d31-482b-a856-94f89814c4dfpull/2/head
jensp
parent
df326f9622
commit
35bf7b3ad5
|
|
@ -1,6 +1,10 @@
|
|||
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-insertmedia code lists nonbreaking noneditable paste searchreplace table template visualblocks wordcount",
|
||||
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 insertmedia table",
|
||||
toolbar: "undo redo formatselect bold italic underline strikethrough alignleft aligncenter alignright alignjustify alignnone insert indent outdent blockquote bullist numlist link unlink openlink insertimage table",
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 = `<pre>${imageUuid}</pre>`;
|
||||
this.find("#imagePanel").append([
|
||||
{
|
||||
html: `<pre>${imageUuid}</pre>`,
|
||||
// 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",
|
||||
});
|
||||
}
|
||||
|
|
@ -93,7 +93,8 @@ public class CMSConfig {
|
|||
*/
|
||||
@Setting
|
||||
private List<String> 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"
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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 <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
|
||||
*/
|
||||
public interface AssetPropertiesProvider {
|
||||
|
||||
void addProperties(Asset asset, JsonObjectBuilder builder);
|
||||
|
||||
}
|
||||
|
|
@ -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 <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
|
||||
*/
|
||||
@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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
|
||||
*/
|
||||
@Qualifier
|
||||
@Retention(RetentionPolicy.RUNTIME)
|
||||
@Target(ElementType.TYPE)
|
||||
public @interface ProvidesPropertiesForAssetType {
|
||||
|
||||
Class<? extends Asset> value();
|
||||
}
|
||||
|
|
@ -253,7 +253,12 @@
|
|||
<xsl:call-template name="process-label">
|
||||
<xsl:with-param name="widget" select="."/>
|
||||
</xsl:call-template>
|
||||
<textarea id="ta_{@name}" name="{@name}" style="width:100%" rows="{@rows}" cols="{@cols}" wrap="{@wrap}">
|
||||
<textarea id="ta_{@name}"
|
||||
name="{@name}"
|
||||
style="width:100%"
|
||||
rows="{@rows}"
|
||||
cols="{@cols}"
|
||||
wrap="{@wrap}">
|
||||
<xsl:value-of disable-output-escaping="no" select="text()"/>
|
||||
</textarea>
|
||||
|
||||
|
|
@ -272,7 +277,14 @@
|
|||
</script>
|
||||
<xsl:if test="bebop:plugin">
|
||||
<xsl:for-each select="bebop:plugin">
|
||||
<xsl:choose>
|
||||
<xsl:when test="starts-with(./@name, 'http://') or starts-with(./@name, 'https://')">
|
||||
<script src="{./@name}"></script>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<script src="{$context-prefix}/{./@name}"></script>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</xsl:for-each>
|
||||
</xsl:if>
|
||||
|
||||
|
|
@ -286,7 +298,9 @@
|
|||
name="{@name}"
|
||||
rows="{@rows}"
|
||||
cols="{@cols}"
|
||||
wrap="{@wrap}">
|
||||
wrap="{@wrap}"
|
||||
data-contextprefix="{$context-prefix}"
|
||||
data-contentsection="{./@current-contentsection-primaryurl}">
|
||||
<xsl:value-of disable-output-escaping="no" select="text()"/>
|
||||
</textarea>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue