LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

CCM NG: Current progress of the image plugin for TinyMCE 

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5689 8810af33-2d31-482b-a856-94f89814c4df
jensp 2018-09-06 12:51:18 +00:00
parent 37fa02a4c7
commit 662880d9ee
1 changed files with 46 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js
View File

@ -30,18 +30,21 @@ function openDialog(editor) {
console.log("Opening dialog"); console.log("Opening dialog");
const selectedImage = { // const selectedImage = {
//
// selectedUuid: undefined,
//
// get imageUuid() {
// this.selectedUuid;
// },
// set imageUuid(value) {
// this.selectedUuid = value;
// console.log(`Set imageUuid to ${this.selectedUuid}`);
// editor.windowManager
// },
// };
selectedUuid: undefined, let imageUuid = undefined;
get imageUuid() {
this.selectedUuid;
},
set imageUuid(value) {
this.selectedUuid = value;
console.log(`Set imageUuid to ${this.imageUuid}`);
},
};
editor.windowManager.open({ editor.windowManager.open({
body: [ body: [
@ -51,22 +54,40 @@ function openDialog(editor) {
direction: "row", direction: "row",
items: [ items: [
{ {
disabled: true, // disabled: true,
label: "Image", // label: "Image",
name: "imageUuid", // name: "imageUuid",
type: "textbox", // type: "textbox",
value: "foobar", // value: "foobar",
border: "1 1 1 1",
minWidth: 150,
minHeight: 150,
name: "imageViewer",
type: "container",
}, },
{ {
name: "browse", name: "browse",
onclick: function() { onclick: (event) => {
openBrowseDialog(editor, selectedImage); openBrowseDialog(editor, (uuid) => {
console.log(`Selected image ${uuid}`);
// editor.windowManager.getWindows()[0].find("#imageUuid").value(uuid);
imageUuid = uuid;
const contextPrefix = editor.getParam("contextprefix");
const contentSection = editor.getParam("contentsection");
const imageViewer = editor
.windowManager
.getWindows()[0]
.find("#imageViewer")
.toArray()[0];
imageViewer
.innerHtml(`<img src="${contextPrefix}/content-sections${contentSection}images/uuid-${uuid}?width=150" />`);
});
}, },
text: "Browse", text: "Browse",
type: "button", type: "button",
}, },
], ],
label: "Image", label: "Selected image",
layout: "flex", layout: "flex",
type: "container", type: "container",
}, },
@ -120,7 +141,7 @@ function openDialog(editor) {
}, },
], ],
onsubmit: function(event) { onsubmit: function(event) {
console.log(selectedImage.imageUuid); // console.log(selectedImage.imageUuid);
}, },
title: "Insert image", title: "Insert image",
}); });
@ -128,7 +149,7 @@ function openDialog(editor) {
console.log("Dialog opened."); console.log("Dialog opened.");
} }
function openBrowseDialog(editor, selectedImage) { function openBrowseDialog(editor, selectImage) {
editor.windowManager.open({ editor.windowManager.open({
body: [ body: [
@ -157,7 +178,8 @@ function openBrowseDialog(editor, selectedImage) {
console.log("Click in Image Container..."); console.log("Click in Image Container...");
console.log(`...on image ${event.target.getAttribute("data-uuid")}`); console.log(`...on image ${event.target.getAttribute("data-uuid")}`);
selectedImage.imageUuid = event.target.getAttribute("data-uuid"); // selectedImage.imageUuid = event.target.getAttribute("data-uuid");
selectImage(event.target.getAttribute("data-uuid"));
editor.windowManager.close(); editor.windowManager.close();
}, },
onPostRender: function() { onPostRender: function() {
@ -207,7 +229,7 @@ function openBrowseDialog(editor, selectedImage) {
`<div style="display: flex; margin-top: 10px; margin-bottom: 10px;">\ `<div style="display: flex; margin-top: 10px; margin-bottom: 10px;">\
<dt style="margin-right: 15px">\ <dt style="margin-right: 15px">\
<img data-uuid="${image.uuid}" <img data-uuid="${image.uuid}"
src="${contextPrefix}/content-sections${contentSection}images/uuid-${image.uuid}"\ src="${contextPrefix}/content-sections${contentSection}images/uuid-${image.uuid}?width=150"\
alt="${image.title}" alt="${image.title}"
width="150" width="150"
style="width: 150px; cursor: pointer">\ style="width: 150px; cursor: pointer">\