#3056 New compiled images plugin, now with working toolbar button
git-svn-id: https://svn.libreccm.org/ccm/trunk@5814 8810af33-2d31-482b-a856-94f89814c4dfmaster
baka
parent
5c52ff9259
commit
e7e0ef4776
|
|
@ -1,7 +1,9 @@
|
|||
tinymce.init({
|
||||
plugins: "ccm-cms-images code lists nonbreaking noneditable paste searchreplace table template visualblocks wordcount",
|
||||
selector: ".tinymce",
|
||||
templates: [],
|
||||
content_css: ['./editor.css'],
|
||||
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent"
|
||||
plugins:
|
||||
"ccmcmsimages code lists nonbreaking noneditable paste searchreplace table template visualblocks wordcount",
|
||||
selector: ".tinymce",
|
||||
templates: [],
|
||||
content_css: ["./editor.css"],
|
||||
toolbar:
|
||||
"undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent | ccm-cms-images-button"
|
||||
});
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
(function () {
|
||||
var ccmcmsimages = (function () {
|
||||
'use strict';
|
||||
|
||||
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
|
||||
|
||||
function Dialog (editor) {
|
||||
function getImageData(editor) {
|
||||
var elem = editor.selection.getNode();
|
||||
var imgDiv = editor.dom.getParent(elem, 'div.image');
|
||||
var img = editor.dom.select('img', imgDiv)[0];
|
||||
if (imgDiv != null) {
|
||||
var imageData = {
|
||||
file: img.getAttribute('src'),
|
||||
width: img.getAttribute('width').slice(0, -2),
|
||||
height: img.getAttribute('height').slice(0, -2),
|
||||
alt: img.getAttribute('alt'),
|
||||
align: imgDiv.classList[1],
|
||||
fancy: imgDiv.childNodes[0].classList[0].slice(0, -1),
|
||||
title: imgDiv.childNodes[0].title,
|
||||
caption: imgDiv.childNodes[1].localName === 'span',
|
||||
parent: imgDiv
|
||||
};
|
||||
return imageData;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function open() {
|
||||
var imageData = getImageData(editor);
|
||||
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';
|
||||
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>';
|
||||
if (imageData != null) {
|
||||
editor.dom.replace(editor.dom.createFragment(img_div), imageData.parent);
|
||||
} else {
|
||||
editor.insertContent(img_div);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
if (imageData != null) {
|
||||
win.find('#file').value(imageData.file).fire('change');
|
||||
win.find('#alternate').value(imageData.alt).fire('change');
|
||||
win.find('#width').value(imageData.width).fire('change');
|
||||
win.find('#height').value(imageData.height).fire('change');
|
||||
if (imageData.align !== undefined) {
|
||||
win.find('#alignment').value(imageData.align).fire('change');
|
||||
}
|
||||
if (imageData.fancy !== undefined) {
|
||||
win.find('#fancybox').value(imageData.fancy).fire('change');
|
||||
}
|
||||
win.find('#title').value(imageData.title).fire('change');
|
||||
win.find('#caption').value(imageData.caption).fire('change');
|
||||
}
|
||||
}
|
||||
return { open: open };
|
||||
}
|
||||
|
||||
global.add('ccmcmsimages', function (editor) {
|
||||
editor.addButton('ccm-cms-images-button', {
|
||||
icon: 'image',
|
||||
tooltip: 'Insert/Edit image',
|
||||
onclick: Dialog(editor).open,
|
||||
stateSelector: 'image'
|
||||
});
|
||||
editor.addMenuItem('ccm-cms-images-menu', {
|
||||
icon: 'image',
|
||||
text: 'Insert/Edit Images',
|
||||
onclick: Dialog(editor).open,
|
||||
stateSelector: 'image',
|
||||
context: 'insert',
|
||||
prependToContext: true
|
||||
});
|
||||
});
|
||||
function Plugin () {
|
||||
}
|
||||
|
||||
return Plugin;
|
||||
|
||||
}());
|
||||
})();
|
||||
|
|
@ -0,0 +1 @@
|
|||
!function(){"use strict";function t(C){return{open:function(){var e,t,i,n,u=(t=(e=C).selection.getNode(),i=e.dom.getParent(t,"div.image"),n=e.dom.select("img",i)[0],null!=i?{file:n.getAttribute("src"),width:n.getAttribute("width").slice(0,-2),height:n.getAttribute("height").slice(0,-2),alt:n.getAttribute("alt"),align:i.classList[1],fancy:i.childNodes[0].classList[0].slice(0,-1),title:i.childNodes[0].title,caption:"span"===i.childNodes[1].localName,parent:i}:null),m="",a=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),l=new tinymce.ui.TextBox({name:"file",label:"File:",disabled:!0});a.add(l);var c=new tinymce.ui.Button({name:"browse_images",text:"Browse Images",onclick:function(){var e=window.location.href,t=e.lastIndexOf("/"),i=e.slice(0,t+1)+"image_select.jsp";window.open(i,"_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 l.text(e.src),b.find("#file").value(e.src).fire("change"),b.find("#width").value(e.width).fire("change"),b.find("#height").value(e.height).fire("change"),m=e.name,!0}}});a.add(c);var o=new tinymce.ui.TextBox({name:"alternate",label:"Alternate:"}),d=new tinymce.ui.TextBox({name:"title",label:"Title:"}),r=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),s=new tinymce.ui.Label({text:"Alignment:"}),g=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(s),r.add(g);var f=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),h=new tinymce.ui.Label({text:"Fancy Box:"}),w=new tinymce.ui.ListBox({name:"fancybox",values:[{text:"None",value:""},{text:"Zoom",value:"imageZoom"},{text:"Gallery",value:"imageGallery"}]});f.add(h),f.add(w);var v=new tinymce.ui.Checkbox({label:"Caption:",name:"caption"}),x=new tinymce.ui.Container({label:"Dimension",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),y=new tinymce.ui.TextBox({name:"width",label:"Width"}),p=new tinymce.ui.TextBox({name:"height",label:"Height"});x.add(y),x.add({type:"label",text:"X"}),x.add(p);var b=C.windowManager.open({title:"Insert/Modify Image",width:800,height:600,body:[a,o,d,r,f,v,x],onsubmit:function(){var e=b.find("#file").value(),t=b.find("#alternate").value(),i=b.find("#width").value(),n=b.find("#height").value(),a=b.find("#title").value(),l=b.find("#alignment").value(),c=b.find("#fancybox").value();if(null!=e){var o="<a class="+c+'" href="'+e+'" title="'+a+'" data-mce-href="'+e+'"> <img src='+e+' alt="'+t+'" name="'+m+'" width="'+i+'px" height="'+n+'px" /></a>',d="";b.find("#caption").value()&&(d='<span class="caption" style="width: '+i+'px;" data-mce-style="width: '+i+'px;">'+m+"</span>");var r='<div class="image '+l+'">'+o+d+"</div>";null!=u?C.dom.replace(C.dom.createFragment(r),u.parent):C.insertContent(r)}}});null!=u&&(b.find("#file").value(u.file).fire("change"),b.find("#alternate").value(u.alt).fire("change"),b.find("#width").value(u.width).fire("change"),b.find("#height").value(u.height).fire("change"),u.align!==undefined&&b.find("#alignment").value(u.align).fire("change"),u.fancy!==undefined&&b.find("#fancybox").value(u.fancy).fire("change"),b.find("#title").value(u.title).fire("change"),b.find("#caption").value(u.caption).fire("change"))}}}tinymce.util.Tools.resolve("tinymce.PluginManager").add("ccmcmsimages",function(e){e.addButton("ccm-cms-images-button",{icon:"image",tooltip:"Insert/Edit image",onclick:t(e).open,stateSelector:"image"}),e.addMenuItem("ccm-cms-images-menu",{icon:"image",text:"Insert/Edit Images",onclick:t(e).open,stateSelector:"image",context:"insert",prependToContext:!0})})}();
|
||||
Loading…
Reference in New Issue