#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-94f89814c4dfmaster
parent
1594b79ce9
commit
bcccc4cfce
|
|
@ -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
|
|
@ -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"]);
|
||||
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
|
@ -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)}]);
|
||||
|
|
@ -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)
|
||||
}])
|
||||
]
|
||||
};
|
||||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue