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

CcmNG: Current progress of image plugin for TinyMCE 

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5690 8810af33-2d31-482b-a856-94f89814c4df
ccm-docs
jensp 2018-09-06 14:22:44 +00:00
parent 2c8394c10f
commit d166fa9bf9
1 changed files with 59 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,6 +45,8 @@ function openDialog(editor) {
// }; // };
let imageUuid = undefined; let imageUuid = undefined;
let origWidth = undefined;
let origHeight = undefined;
editor.windowManager.open({ editor.windowManager.open({
body: [ body: [
@ -68,7 +70,7 @@ function openDialog(editor) {
{ {
name: "browse", name: "browse",
onclick: (event) => { onclick: (event) => {
openBrowseDialog(editor, (uuid) => { openBrowseDialog(editor, (uuid, width, height) => {
console.log(`Selected image ${uuid}`); console.log(`Selected image ${uuid}`);
// editor.windowManager.getWindows()[0].find("#imageUuid").value(uuid); // editor.windowManager.getWindows()[0].find("#imageUuid").value(uuid);
imageUuid = uuid; imageUuid = uuid;
@ -79,8 +81,20 @@ function openDialog(editor) {
.getWindows()[0] .getWindows()[0]
.find("#imageViewer") .find("#imageViewer")
.toArray()[0]; .toArray()[0];
const widthField = editor
.windowManager
.getWindows()[0]
.find("#width")
.toArray()[0];
const heightField = editor
.windowManager
.getWindows()[0]
.find("#height")
.toArray()[0];
imageViewer imageViewer
.innerHtml(`<img src="${contextPrefix}/content-sections${contentSection}images/uuid-${uuid}?width=150" />`); .innerHtml(`<img src="${contextPrefix}/content-sections${contentSection}images/uuid-${uuid}?width=150" />`);
widthField.value(width);
heightField.value(height);
}); });
}, },
text: "Browse", text: "Browse",
@ -141,7 +155,44 @@ function openDialog(editor) {
}, },
], ],
onsubmit: function(event) { onsubmit: function(event) {
// console.log(selectedImage.imageUuid); console.log(imageUuid);
const tinyMceWindow = editor
.windowManager
.getWindows()[0];
const captionField = tinyMceWindow.find("#caption").toArray()[0];
const widthField = tinyMceWindow.find("#width").toArray()[0];
const heightField = tinyMceWindow.find("#width").toArray()[0];
const lightboxField = tinyMceWindow.find("#lightbox").toArray[0];
const contextPrefix = editor.getParam("contextprefix");
const contentSection = editor.getParam("contentsection");
let figureHtml = "";
let widthAttr = "";
let heightAttr = "";
let lightbox = "";
if (widthField.value()) {
widthAttr = `width="${widthField.value()}"`;
}
if (heightField.value()) {
heightAttr = `height="${heightField.value()}"`;
}
if (lightbox.value) {
lightbox = "class=\"ccm-lightbox\"";
}
if (captionField.value()) {
figureHtml = `<figure>\
<img src="${contextPrefix}/content-sections${contentSection}images/uuid-${imageUuid}" ${lightbox} ${widthAttr} ${heightAttr} />\
<figcaption>${captionField.value()}</figcaption>\
</figure>`
} else {
figureHtml = `<img alt="${contextPrefix}/content-sections${contentSection}images/uuid-${imageUuid}" src="${imageUuid}" ${lightbox} ${widthAttr} ${heightAttr} />`
}
console.log(`Inserting figure html: ${figureHtml}`)
editor.insertContent(figureHtml);
}, },
title: "Insert image", title: "Insert image",
}); });
@ -152,6 +203,7 @@ function openDialog(editor) {
function openBrowseDialog(editor, selectImage) { function openBrowseDialog(editor, selectImage) {
editor.windowManager.open({ editor.windowManager.open({
buttons: [],
body: [ body: [
{ {
// items: [ // items: [
@ -179,7 +231,9 @@ function openBrowseDialog(editor, selectImage) {
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")); selectImage(event.target.getAttribute("data-uuid"),
event.target.getAttribute("data-width"),
event.target.getAttribute("data-height"));
editor.windowManager.close(); editor.windowManager.close();
}, },
onPostRender: function() { onPostRender: function() {
@ -229,6 +283,8 @@ function openBrowseDialog(editor, selectImage) {
`<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}"
data-width="${image.properties.width}"
data-height="${image.properties.height}"
src="${contextPrefix}/content-sections${contentSection}images/uuid-${image.uuid}?width=150"\ src="${contextPrefix}/content-sections${contentSection}images/uuid-${image.uuid}?width=150"\
alt="${image.title}" alt="${image.title}"
width="150" width="150"
@ -310,9 +366,6 @@ function openBrowseDialog(editor, selectImage) {
], ],
minWidth: 600, minWidth: 600,
minHeight: 400, minHeight: 400,
// onSubmit: function() {
// selectedImage.imageUuid = "0000-0000-0000-0000";
// },
title: "Select image", title: "Select image",
}); });
} }