upgrading to TinyMCE 3
This commit is contained in:
Graham Knop
parent
d245e8ef48
commit
cc75819ca9
2274 changed files with 25785 additions and 107069 deletions
|
|
@ -0,0 +1,63 @@
|
|||
.panel_wrapper div.current {
|
||||
height: 475px;
|
||||
}
|
||||
.panel_wrapper div.current input, .panel_wrapper div.current select {
|
||||
width: 100%;
|
||||
}
|
||||
fieldset.image-manager {
|
||||
height: 316px;
|
||||
}
|
||||
iframe#image-manager {
|
||||
border-style: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
iframe#image-preview {
|
||||
width: 145px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
color: #888;
|
||||
}
|
||||
.nav {
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav a {
|
||||
color: #0f3ccc;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav a:hover {
|
||||
color: #000080;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.nav ul, .nav li {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav .selectLink {
|
||||
color: #cc7700;
|
||||
}
|
||||
.nav .crumb {
|
||||
color: orange;
|
||||
}
|
||||
.nav .crumbTrail {
|
||||
padding: 3px;
|
||||
background-color: #eeeeee;
|
||||
-moz-border-radius: 10px;
|
||||
}
|
||||
.nav .traverse {
|
||||
font-size: 15px;
|
||||
}
|
||||
div.preview {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.preview img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
(function() {
|
||||
tinymce.PluginManager.requireLangPack('wginsertimage');
|
||||
|
||||
tinymce.create('tinymce.plugins.WGInsertImagePlugin', {
|
||||
init : function(ed, url) {
|
||||
var page_url = document.location.protocol + "//" + document.location.hostname + (document.location.port ? ":" + document.location.port : '') + getWebguiProperty('pageURL');
|
||||
ed.addCommand('wgInsertImage', function() {
|
||||
ed.windowManager.open({
|
||||
file : url + '/insertimage.htm',
|
||||
width : 500 + ed.getLang('wgpagetree.delta_width', 0),
|
||||
height : 550 + ed.getLang('wgpagetree.delta_height', 0),
|
||||
inline : 1
|
||||
}, {
|
||||
plugin_url : url,
|
||||
page_url : page_url
|
||||
});
|
||||
});
|
||||
|
||||
ed.addButton('wginsertimage', {
|
||||
title : 'wginsertimage.desc',
|
||||
cmd : 'wgInsertImage',
|
||||
image : url + '/img/insertimage.gif'
|
||||
});
|
||||
},
|
||||
|
||||
getInfo : function() {
|
||||
return {
|
||||
longname : 'WebGUI Image Insert',
|
||||
author : 'Plain Black',
|
||||
authorurl : 'http://www.plainblack.com/',
|
||||
infourl : 'http://www.webgui.org/',
|
||||
version : "1.0"
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Register plugin
|
||||
tinymce.PluginManager.add('wginsertimage', tinymce.plugins.WGInsertImagePlugin);
|
||||
})();
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 148 B |
104
www/extras/tinymce-webgui/plugins/wginsertimage/insertimage.htm
Normal file
104
www/extras/tinymce-webgui/plugins/wginsertimage/insertimage.htm
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>{#wginsertimage.desc}</title>
|
||||
<script type="text/javascript" src="../../../tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
|
||||
<script type="text/javascript" src="js/insertimage.js"></script>
|
||||
<script type="text/javascript" src="../../../tinymce/jscripts/tiny_mce/utils/mctabs.js"></script>
|
||||
<script type="text/javascript" src="../../../tinymce/jscripts/tiny_mce/utils/form_utils.js"></script>
|
||||
<link href="css/insertimage.css" rel="stylesheet" type="text/css" />
|
||||
<base target="_self" />
|
||||
</head>
|
||||
<body>
|
||||
<form onsubmit="WGInsertImageDialog.update(this);return false;" action="#">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#wginsertimage.desc}</a></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="panel_wrapper">
|
||||
<div id="general_panel" class="panel current">
|
||||
<fieldset class="image-manager">
|
||||
<legend>{#wginsertimage.manager}</legend>
|
||||
<iframe id="image-manager"></iframe>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>{#wginsertimage.selectedproperties}</legend>
|
||||
<table class="image-properties">
|
||||
<tr>
|
||||
<td><label for="image-url">{#wginsertimage.imageurl}</label></td>
|
||||
<td><input id="image-url" type="text" name="imageurl" /></td>
|
||||
<td rowspan="3"><iframe id="image-preview"></iframe></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="image-alt">{#wginsertimage.imagealt}</label></td>
|
||||
<td><input id="image-alt" type="text" name="imagealt" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<fieldset>
|
||||
<legend>{#wginsertimage.imagelayout}</legend>
|
||||
<table class="image-layout">
|
||||
<tr>
|
||||
<td><label for="image-align">{#wginsertimage.imagealign}</label></td>
|
||||
<td>
|
||||
<select id="image-align" name="imagealign">
|
||||
<option value="" selected="selected">(none)</option>
|
||||
<option value="absbottom">absbottom</option>
|
||||
<option value="absmiddle">absmiddle</option>
|
||||
<option value="baseline">baseline</option>
|
||||
<option value="bottom">bottom</option>
|
||||
<option value="left">left</option>
|
||||
<option value="middle">middle</option>
|
||||
<option value="right">right</option>
|
||||
<option value="texttop">texttop</option>
|
||||
<option value="top">top</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="image-border">{#wginsertimage.imageborder}</label></td>
|
||||
<td><input id="image-border" type="text" name="imageborder" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
</td>
|
||||
<td>
|
||||
<fieldset>
|
||||
<legend>{#wginsertimage.imagespacing}</legend>
|
||||
<table class="image-spacing">
|
||||
<tr>
|
||||
<td><label for="image-hspace">{#wginsertimage.imagehspace}</label></td>
|
||||
<td><input id="image-hspace" type="text" name="imagehspace" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="image-vspace">{#wginsertimage.imagevspace}</label></td>
|
||||
<td><input id="image-vspace" type="text" name="imagevspace" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mceActionPanel">
|
||||
<div style="float: left">
|
||||
<input type="submit" id="insert" name="insert" value="{#insert}" />
|
||||
</div>
|
||||
<div style="float: right">
|
||||
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
var WGInsertImageDialog = {
|
||||
init : function(ed) {
|
||||
var iframe = document.getElementById('image-manager');
|
||||
iframe.src = tinyMCEPopup.getWindowArg('page_url') + '?op=formHelper;class=HTMLArea;sub=imageTree';
|
||||
},
|
||||
|
||||
setUrl : function(url, thumburl) {
|
||||
document.getElementById('image-url').value = url;
|
||||
var iframe = document.getElementById('image-preview');
|
||||
iframe.src = thumburl;
|
||||
},
|
||||
|
||||
update : function(form) {
|
||||
if(!form.imageurl.value) {
|
||||
alert("Image URL must be specified.");
|
||||
form.imageurl.focus();
|
||||
return;
|
||||
}
|
||||
if (form.imagehspace.value && !checkNumber(form.imagehspace.value)) {
|
||||
alert("Horizontal spacing must be a number between 0 and 999.");
|
||||
form.imagehspace.focus();
|
||||
return;
|
||||
}
|
||||
if (form.imagevspace.value && !checkNumber(form.imagevspace.value)) {
|
||||
alert("Vertical spacing must be a number between 0 and 999.");
|
||||
form.imagevspace.focus();
|
||||
return;
|
||||
}
|
||||
if(form.imageborder.value && !checkNumber(form.imageborder.value)) {
|
||||
alert("Border thickness must be a number between 0 and 999.");
|
||||
form.imageborder.focus();
|
||||
return;
|
||||
}
|
||||
if(form.imageurl.value.length > 2040) {
|
||||
form.imageurl.value = form.imageurl.value.substring(0,2040);
|
||||
}
|
||||
var img = "<img"
|
||||
+ " src=\"" + form.imageurl.value + '"'
|
||||
+ " alt=\"" + form.imagealt.value + '"';
|
||||
if (form.imagehspace.value != "") {
|
||||
img += ' hspace="' + parseInt(form.imagehspace.value) + '"';
|
||||
}
|
||||
if (form.imagevspace.value != "") {
|
||||
img += ' vspace="' + parseInt(form.imagevspace.value) + "'";
|
||||
}
|
||||
if (form.imageborder.value != "") {
|
||||
img += ' border="' + parseInt(form.imageborder.value) + "'";
|
||||
}
|
||||
if (form.imagealign.value != "") {
|
||||
img += ' align="' + form.imagealign.value + '"';
|
||||
}
|
||||
img += ' />';
|
||||
var ed = tinyMCEPopup.editor;
|
||||
ed.execCommand('mceInsertContent', false, img);
|
||||
tinyMCEPopup.close();
|
||||
}
|
||||
}
|
||||
|
||||
function checkNumber(num) {
|
||||
num = parseInt(num);
|
||||
if (isNaN(num) || num < 0 || num > 999) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
tinyMCEPopup.requireLangPack();
|
||||
tinyMCEPopup.onInit.add(WGInsertImageDialog.init, WGInsertImageDialog);
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
tinyMCE.addI18n('en.wginsertimage',{
|
||||
desc : 'Insert WebGUI Image',
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
tinyMCE.addI18n('en.wginsertimage',{
|
||||
desc : 'WebGUI Collateral - Insert Image',
|
||||
manager : 'WebGUI Collateral Image Manager',
|
||||
newwindow : 'Open link in new window.',
|
||||
selectedproperties : 'Selected Image',
|
||||
imageurl : 'Image URL:',
|
||||
imagealt : 'Alt Text:',
|
||||
imagelayout : 'Layout',
|
||||
imagealign : 'Alignment:',
|
||||
imageborder : 'Border:',
|
||||
imagespacing : 'Spacing',
|
||||
imagehspace : 'Horizontal:',
|
||||
imagevspace : 'Vertical:'
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue