#3056 The editor now loads a CSS which sets some stylings for images. Also adds a button which reacts to the selection of an image.

git-svn-id: https://svn.libreccm.org/ccm/trunk@5728 8810af33-2d31-482b-a856-94f89814c4df
master
baka 2018-11-07 15:44:10 +00:00
parent 1594b79ce9
commit bcccc4cfce
7 changed files with 593 additions and 248 deletions

View File

@ -0,0 +1,36 @@
ul {
list-style: disc inside;
}
div.image {
border: 1px solid #999;
margin-bottom: 0.5em;
}
div.image span.caption {
display: block;
}
div.image.left {
float: left;
margin-right: 1em;
}
div.image.right {
float: right;
margin-left: 1em;
}
div.image.center {
text-align: center;
}
div.image.center span.caption {
margin-left: auto;
margin-right: auto;
text-align: left;
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,305 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var Dialog_1 = __webpack_require__(1);
var plugin = function (editor, url) {
editor.addButton("trunk-images-button", {
icon: "image",
onlick: Dialog_1["default"](editor).open,
stateSelector: "div.image"
});
editor.addMenuItem("trunk-images", {
icon: "image",
text: "Insert Images",
onclick: Dialog_1["default"](editor).open,
stateSelector: "image",
context: "insert",
prependToContext: true
});
};
exports["default"] = plugin;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
function default_1(editor) {
function open() {
var image_name = "";
var fileChooseContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row",
align: "center",
padding: 5,
spacing: 15,
margin: 5
});
var imagePathTextBox = new tinymce.ui.TextBox({
name: "file",
label: "File:",
disabled: true
});
fileChooseContainer.add(imagePathTextBox);
var browseButton = new tinymce.ui.Button({
name: "browse_images",
text: "Browse Images",
onclick: function () {
var baseURL = window.location.href;
var offset = baseURL.lastIndexOf("/");
var destURL = baseURL.slice(0, offset + 1) + "image_select.jsp";
var selectWindow = window.open(destURL, "_blank", "scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no");
window.openCCM = new Object();
window.openCCM.imageSet = function (selectedImage) {
imagePathTextBox.text(selectedImage.src);
win
.find("#file")
.value(selectedImage.src)
.fire("change");
win
.find("#width")
.value(selectedImage.width)
.fire("change");
win
.find("#height")
.value(selectedImage.height)
.fire("change");
image_name = selectedImage.name;
return true;
};
}
});
fileChooseContainer.add(browseButton);
var alternateTextBox = new tinymce.ui.TextBox({
name: "alternate",
label: "Alternate:"
});
var titleTextBox = new tinymce.ui.TextBox({
name: "title",
label: "Title:"
});
var alignmentContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row"
});
var alginLabel = new tinymce.ui.Label({
text: "Alignment:"
});
var alignListBox = new tinymce.ui.ListBox({
name: "alignment",
values: [
{ text: "Not set", value: "" },
{ text: "Left", value: "left" },
{ text: "Center", value: "center" },
{ text: "Right", value: "right" }
]
});
alignmentContainer.add(alginLabel);
alignmentContainer.add(alignListBox);
var fancyBoxContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row"
});
var fancyBoxLabel = new tinymce.ui.Label({
text: "Fancy Box:"
});
var fancyBoxListBox = new tinymce.ui.ListBox({
name: "fancybox",
values: [
{ text: "None", value: "" },
{ text: "Zoom", value: "imageZoom" },
{ text: "Gallery", value: "imageGallery" }
]
});
fancyBoxContainer.add(fancyBoxLabel);
fancyBoxContainer.add(fancyBoxListBox);
var captionCheckBox = new tinymce.ui.Checkbox({
label: "Caption:",
name: "caption"
});
var dimensionContainer = new tinymce.ui.Container({
label: "Dimension",
layout: "flex",
direction: "row",
align: "center",
padding: 5,
spacing: 15,
margin: 5
});
var widthTextBox = new tinymce.ui.TextBox({
name: "width",
label: "Width"
});
var heightTextBox = new tinymce.ui.TextBox({
name: "height",
label: "Height"
});
dimensionContainer.add(widthTextBox);
dimensionContainer.add({ type: "label", text: "X" });
dimensionContainer.add(heightTextBox);
var win = editor.windowManager.open({
title: "Insert/Modify Image",
width: 800,
height: 600,
body: [
fileChooseContainer,
alternateTextBox,
titleTextBox,
alignmentContainer,
fancyBoxContainer,
captionCheckBox,
dimensionContainer
],
onsubmit: function () {
var src = win.find("#file").value();
var alternate = win.find("#alternate").value();
var width = win.find("#width").value();
var height = win.find("#height").value();
var title = win.find("#title").value();
var alignment = win.find("#alignment").value();
var fancy_box = win.find("#fancybox").value();
if (src != null) {
var img = "<img src=" +
src +
' alt="' +
alternate +
'" name="' +
image_name +
'" width="' +
width +
'px"' +
' height="' +
height +
'px"' +
" />";
var fancy_box_wrap = "<a class=" +
fancy_box +
'" href="' +
src +
'" title="' +
title +
'" data-mce-href="' +
src +
'"> ' +
img +
"</a>";
var span = "";
if (win.find("#caption").value()) {
span =
'<span class="caption" style="width: ' +
width +
'px;" data-mce-style="width: ' +
width +
'px;">' +
image_name +
"</span>";
}
var img_div = '<div class="image ' +
alignment +
'">' +
fancy_box_wrap +
span +
"</div>";
editor.insertContent(img_div + "<br/>");
}
}
});
}
return {
open: open
};
}
exports["default"] = default_1;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var plugin_1 = __webpack_require__(0);
tinymce.PluginManager.add("trunk-images", plugin_1["default"]);
/***/ })
/******/ ]);

View File

@ -0,0 +1 @@
!function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";t.__esModule=!0;var i=n(1),a=function(e,t){e.addButton("trunk-images-button",{icon:"image",onlick:i.default(e).open,stateSelector:"div.image"}),e.addMenuItem("trunk-images",{icon:"image",text:"Insert Images",onclick:i.default(e).open,stateSelector:"image",context:"insert",prependToContext:!0})};t.default=a},function(e,t,n){"use strict";function i(e){function t(){var t="",n=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),i=new tinymce.ui.TextBox({name:"file",label:"File:",disabled:!0});n.add(i);var a=new tinymce.ui.Button({name:"browse_images",text:"Browse Images",onclick:function(){var e=window.location.href,n=e.lastIndexOf("/"),a=e.slice(0,n+1)+"image_select.jsp";window.open(a,"_blank","scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no");window.openCCM=new Object,window.openCCM.imageSet=function(e){return i.text(e.src),p.find("#file").value(e.src).fire("change"),p.find("#width").value(e.width).fire("change"),p.find("#height").value(e.height).fire("change"),t=e.name,!0}}});n.add(a);var o=new tinymce.ui.TextBox({name:"alternate",label:"Alternate:"}),l=new tinymce.ui.TextBox({name:"title",label:"Title:"}),r=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),u=new tinymce.ui.Label({text:"Alignment:"}),c=new tinymce.ui.ListBox({name:"alignment",values:[{text:"Not set",value:""},{text:"Left",value:"left"},{text:"Center",value:"center"},{text:"Right",value:"right"}]});r.add(u),r.add(c);var d=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),s=new tinymce.ui.Label({text:"Fancy Box:"}),m=new tinymce.ui.ListBox({name:"fancybox",values:[{text:"None",value:""},{text:"Zoom",value:"imageZoom"},{text:"Gallery",value:"imageGallery"}]});d.add(s),d.add(m);var f=new tinymce.ui.Checkbox({label:"Caption:",name:"caption"}),g=new tinymce.ui.Container({label:"Dimension",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),x=new tinymce.ui.TextBox({name:"width",label:"Width"}),w=new tinymce.ui.TextBox({name:"height",label:"Height"});g.add(x),g.add({type:"label",text:"X"}),g.add(w);var p=e.windowManager.open({title:"Insert/Modify Image",width:800,height:600,body:[n,o,l,r,d,f,g],onsubmit:function(){var n=p.find("#file").value(),i=p.find("#alternate").value(),a=p.find("#width").value(),o=p.find("#height").value(),l=p.find("#title").value(),r=p.find("#alignment").value(),u=p.find("#fancybox").value();if(null!=n){var c="<img src="+n+' alt="'+i+'" name="'+t+'" width="'+a+'px" height="'+o+'px" />',d="<a class="+u+'" href="'+n+'" title="'+l+'" data-mce-href="'+n+'"> '+c+"</a>",s="";p.find("#caption").value()&&(s='<span class="caption" style="width: '+a+'px;" data-mce-style="width: '+a+'px;">'+t+"</span>");var m='<div class="image '+r+'">'+d+s+"</div>";e.insertContent(m+"<br/>")}}})}return{open:t}}t.__esModule=!0,t.default=i},function(e,t,n){"use strict";t.__esModule=!0;var i=n(0);tinymce.PluginManager.add("trunk-images",i.default)}]);

View File

@ -10,30 +10,26 @@ module.exports = {
"plugin.min": "./src/index.ts"
},
output: {
path: path.join(__dirname, "../dist", pluginName),
path: path.join(__dirname, "../../runtime/apache-tomcat-8.5.15/webapps/ROOT/assets/tinymce/js/tinymce/plugins", pluginName),
filename: "[name].js"
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader"
}
]
rules: [{
test: /\.ts$/,
use: "ts-loader"
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
}),
new CopyWebpackPlugin([
{
from: path.join(__dirname, "../src/LICENSE"),
to: path.join(__dirname, "../dist", pluginName)
}
])
new CopyWebpackPlugin([{
from: path.join(__dirname, "../src/LICENSE"),
to: path.join(__dirname, "../dist", pluginName)
}])
]
};

View File

@ -1,232 +1,234 @@
declare var tinymce: any;
const open = function(editor) {
let image_name = "";
export default function(editor) {
function open() {
let image_name = "";
// ================== File Chooser ====================
let fileChooseContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row",
align: "center",
padding: 5,
spacing: 15,
margin: 5
});
// ================== File Chooser ====================
let fileChooseContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row",
align: "center",
padding: 5,
spacing: 15,
margin: 5
});
let imagePathTextBox = new tinymce.ui.TextBox({
name: "file",
label: "File:",
disabled: true
});
let imagePathTextBox = new tinymce.ui.TextBox({
name: "file",
label: "File:",
disabled: true
});
fileChooseContainer.add(imagePathTextBox);
fileChooseContainer.add(imagePathTextBox);
let browseButton = new tinymce.ui.Button({
name: "browse_images",
text: "Browse Images",
onclick: function() {
let baseURL = window.location.href;
let offset = baseURL.lastIndexOf("/");
let destURL = baseURL.slice(0, offset + 1) + "image_select.jsp";
let selectWindow = window.open(
destURL,
"_blank",
"scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no"
);
(<any>window).openCCM = new Object();
(<any>window).openCCM.imageSet = selectedImage => {
imagePathTextBox.text(selectedImage.src);
win
.find("#file")
.value(selectedImage.src)
.fire("change");
win
.find("#width")
.value(selectedImage.width)
.fire("change");
win
.find("#height")
.value(selectedImage.height)
.fire("change");
image_name = selectedImage.name;
return true;
};
}
});
fileChooseContainer.add(browseButton);
// ================== File Chooser ====================
// ================== Alternate Text ==================
let alternateTextBox = new tinymce.ui.TextBox({
name: "alternate",
label: "Alternate:"
});
// ================== Alternate Text ==================
// ================== Title Text ======================
let titleTextBox = new tinymce.ui.TextBox({
name: "title",
label: "Title:"
});
// ================== Title Text ======================
// ================== Alignment =======================
let alignmentContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row"
});
let alginLabel = new tinymce.ui.Label({
text: "Alignment:"
});
let alignListBox = new tinymce.ui.ListBox({
name: "alignment",
values: [
{ text: "Not set", value: "" },
{ text: "Left", value: "left" },
{ text: "Center", value: "center" },
{ text: "Right", value: "right" }
]
});
alignmentContainer.add(alginLabel);
alignmentContainer.add(alignListBox);
// ================== Alignment =======================
// ================== Fancy Box =======================
let fancyBoxContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row"
});
let fancyBoxLabel = new tinymce.ui.Label({
text: "Fancy Box:"
});
let fancyBoxListBox = new tinymce.ui.ListBox({
name: "fancybox",
values: [
{ text: "None", value: "" },
{ text: "Zoom", value: "imageZoom" },
{ text: "Gallery", value: "imageGallery" }
]
});
fancyBoxContainer.add(fancyBoxLabel);
fancyBoxContainer.add(fancyBoxListBox);
// ================== Fancy Box =======================
// ================== Caption =========================
let captionCheckBox = new tinymce.ui.Checkbox({
label: "Caption:",
name: "caption"
});
// ================== Caption =========================
// ================== Dimension Box ===================
let dimensionContainer = new tinymce.ui.Container({
label: "Dimension",
layout: "flex",
direction: "row",
align: "center",
padding: 5,
spacing: 15,
margin: 5
});
let widthTextBox = new tinymce.ui.TextBox({
name: "width",
label: "Width"
});
let heightTextBox = new tinymce.ui.TextBox({
name: "height",
label: "Height"
});
dimensionContainer.add(widthTextBox);
dimensionContainer.add({ type: "label", text: "X" });
dimensionContainer.add(heightTextBox);
// ================== Dimension Box ===================
const win = editor.windowManager.open({
title: "Insert/Modify Image",
width: 800,
height: 600,
body: [
fileChooseContainer,
alternateTextBox,
titleTextBox,
alignmentContainer,
fancyBoxContainer,
captionCheckBox,
dimensionContainer
],
onsubmit: function() {
let src = win.find("#file").value();
let alternate = win.find("#alternate").value();
let width = win.find("#width").value();
let height = win.find("#height").value();
let title = win.find("#title").value();
let alignment = win.find("#alignment").value();
let fancy_box = win.find("#fancybox").value();
if (src != null) {
let img =
"<img src=" +
src +
' alt="' +
alternate +
'" name="' +
image_name +
'" width="' +
width +
'px"' +
' height="' +
height +
'px"' +
" />";
let fancy_box_wrap =
"<a class=" +
fancy_box +
'" href="' +
src +
'" title="' +
title +
'" data-mce-href="' +
src +
'"> ' +
img +
"</a>";
let span = "";
if (win.find("#caption").value()) {
span =
'<span class="caption" style="width: ' +
width +
'px;" data-mce-style="width: ' +
width +
'px;">' +
image_name +
"</span>";
}
let img_div =
'<div class="image ' +
alignment +
'">' +
fancy_box_wrap +
span +
"</div>";
editor.insertContent(img_div);
let browseButton = new tinymce.ui.Button({
name: "browse_images",
text: "Browse Images",
onclick: function() {
let baseURL = window.location.href;
let offset = baseURL.lastIndexOf("/");
let destURL = baseURL.slice(0, offset + 1) + "image_select.jsp";
let selectWindow = window.open(
destURL,
"_blank",
"scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no"
);
(<any>window).openCCM = new Object();
(<any>window).openCCM.imageSet = selectedImage => {
imagePathTextBox.text(selectedImage.src);
win
.find("#file")
.value(selectedImage.src)
.fire("change");
win
.find("#width")
.value(selectedImage.width)
.fire("change");
win
.find("#height")
.value(selectedImage.height)
.fire("change");
image_name = selectedImage.name;
return true;
};
}
}
});
};
});
fileChooseContainer.add(browseButton);
// ================== File Chooser ====================
export default {
open
};
// ================== Alternate Text ==================
let alternateTextBox = new tinymce.ui.TextBox({
name: "alternate",
label: "Alternate:"
});
// ================== Alternate Text ==================
// ================== Title Text ======================
let titleTextBox = new tinymce.ui.TextBox({
name: "title",
label: "Title:"
});
// ================== Title Text ======================
// ================== Alignment =======================
let alignmentContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row"
});
let alginLabel = new tinymce.ui.Label({
text: "Alignment:"
});
let alignListBox = new tinymce.ui.ListBox({
name: "alignment",
values: [
{ text: "Not set", value: "" },
{ text: "Left", value: "left" },
{ text: "Center", value: "center" },
{ text: "Right", value: "right" }
]
});
alignmentContainer.add(alginLabel);
alignmentContainer.add(alignListBox);
// ================== Alignment =======================
// ================== Fancy Box =======================
let fancyBoxContainer = new tinymce.ui.Container({
type: "container",
layout: "flex",
direction: "row"
});
let fancyBoxLabel = new tinymce.ui.Label({
text: "Fancy Box:"
});
let fancyBoxListBox = new tinymce.ui.ListBox({
name: "fancybox",
values: [
{ text: "None", value: "" },
{ text: "Zoom", value: "imageZoom" },
{ text: "Gallery", value: "imageGallery" }
]
});
fancyBoxContainer.add(fancyBoxLabel);
fancyBoxContainer.add(fancyBoxListBox);
// ================== Fancy Box =======================
// ================== Caption =========================
let captionCheckBox = new tinymce.ui.Checkbox({
label: "Caption:",
name: "caption"
});
// ================== Caption =========================
// ================== Dimension Box ===================
let dimensionContainer = new tinymce.ui.Container({
label: "Dimension",
layout: "flex",
direction: "row",
align: "center",
padding: 5,
spacing: 15,
margin: 5
});
let widthTextBox = new tinymce.ui.TextBox({
name: "width",
label: "Width"
});
let heightTextBox = new tinymce.ui.TextBox({
name: "height",
label: "Height"
});
dimensionContainer.add(widthTextBox);
dimensionContainer.add({ type: "label", text: "X" });
dimensionContainer.add(heightTextBox);
// ================== Dimension Box ===================
const win = editor.windowManager.open({
title: "Insert/Modify Image",
width: 800,
height: 600,
body: [
fileChooseContainer,
alternateTextBox,
titleTextBox,
alignmentContainer,
fancyBoxContainer,
captionCheckBox,
dimensionContainer
],
onsubmit: function() {
let src = win.find("#file").value();
let alternate = win.find("#alternate").value();
let width = win.find("#width").value();
let height = win.find("#height").value();
let title = win.find("#title").value();
let alignment = win.find("#alignment").value();
let fancy_box = win.find("#fancybox").value();
if (src != null) {
let img =
"<img src=" +
src +
' alt="' +
alternate +
'" name="' +
image_name +
'" width="' +
width +
'px"' +
' height="' +
height +
'px"' +
" />";
let fancy_box_wrap =
"<a class=" +
fancy_box +
'" href="' +
src +
'" title="' +
title +
'" data-mce-href="' +
src +
'"> ' +
img +
"</a>";
let span = "";
if (win.find("#caption").value()) {
span =
'<span class="caption" style="width: ' +
width +
'px;" data-mce-style="width: ' +
width +
'px;">' +
image_name +
"</span>";
}
let img_div =
'<div class="image ' +
alignment +
'">' +
fancy_box_wrap +
span +
"</div>";
editor.insertContent(img_div + "<br/>");
}
}
});
}
return {
open
};
}

View File

@ -1,15 +1,20 @@
import Dialog from "./Dialog";
declare var tinymce: any;
const plugin = (editor: any, url: String) => {
console.log("Trunk-Images loaded");
editor.addMenuItem("trunk-images", {
icon: false,
text: "Insert Trunk-Images",
onclick: function() {
Dialog.open(editor);
},
context: "insert"
editor.addButton("trunk-images-button", {
icon: "image",
onlick: Dialog(editor).open,
stateSelector: "div.image"
});
editor.addMenuItem("trunk-images", {
icon: "image",
text: "Insert Images",
onclick: Dialog(editor).open,
stateSelector: "image",
context: "insert",
prependToContext: true
});
return {};
};
export default plugin;