143 lines
4.3 KiB
JavaScript
143 lines
4.3 KiB
JavaScript
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",
|
|
});
|
|
}
|