upgrading to TinyMCE 3

This commit is contained in:
Graham Knop 2008-03-27 22:12:33 +00:00
parent d245e8ef48
commit cc75819ca9
2274 changed files with 25785 additions and 107069 deletions

View file

@ -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;
}

View file

@ -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

View 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>

View file

@ -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);

View file

@ -0,0 +1,3 @@
tinyMCE.addI18n('en.wginsertimage',{
desc : 'Insert WebGUI Image',
});

View file

@ -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:'
});

View file

@ -0,0 +1,10 @@
select.macro {
width: 100%;
}
.panel_wrapper div.current {
height: 48px;
}
table.macro {
width: 100%;
}

View file

@ -0,0 +1,38 @@
(function() {
tinymce.PluginManager.requireLangPack('wgmacro');
tinymce.create('tinymce.plugins.WGMacroPlugin', {
init : function(ed, url) {
ed.addCommand('wgInsertMacro', function() {
ed.windowManager.open({
file : url + '/macro.htm',
width : 400 + ed.getLang('wgmacro.delta_width', 0),
height : 125 + ed.getLang('wgmacro.delta_height', 0),
inline : 1
}, {
plugin_url : url,
});
});
ed.addButton('wgmacro', {
title : 'wgmacro.desc',
cmd : 'wgInsertMacro',
image : url + '/img/macro.gif'
});
},
getInfo : function() {
return {
longname : 'WebGUI Macro Inserter',
author : 'Plain Black',
authorurl : 'http://www.plainblack.com/',
infourl : 'http://www.webgui.org/',
version : "1.0"
};
}
});
// Register plugin
tinymce.PluginManager.add('wgmacro', tinymce.plugins.WGMacroPlugin);
})();

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 B

View file

@ -0,0 +1,27 @@
var WGMacroDialog = {
init : function(ed) {
},
update : function(form) {
var ed = tinyMCEPopup.editor;
var inputs = form.elements;
for (var i = 0; i <= inputs.length; i++) {
var input = inputs[i];
if (input.name != 'macrolist') {
continue;
}
if (input.value.length > 0) {
ed.execCommand("mceInsertContent", false, input.value);
tinyMCEPopup.close();
return;
}
}
tinyMCEPopup.close();
return;
}
};
tinyMCEPopup.requireLangPack();
tinyMCEPopup.onInit.add(WGMacroDialog.init, WGMacroDialog);

View file

@ -0,0 +1,3 @@
tinyMCE.addI18n('en.wgmacro',{
desc : 'Insert WebGUI Macro'
});

View file

@ -0,0 +1,3 @@
tinyMCE.addI18n('en.wgmacro',{
desc : 'Insert WebGUI Macro'
});

View file

@ -0,0 +1,105 @@
<!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>{#wgmacro.desc}</title>
<script type="text/javascript" src="../../../tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
<script type="text/javascript" src="js/macro.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/macro.css" rel="stylesheet" type="text/css" />
<base target="_self" />
</head>
<body>
<form onsubmit="WGMacroDialog.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;">{#wgmacro.desc}</a></span></li>
</ul>
</div>
<div class="panel_wrapper">
<div id="general_panel" class="panel current">
<table border="0" cellpadding="4" cellspacing="0" class="macro">
<tr>
<td>
<select class="macro" name="macrolist" onchange="WGMacroDialog.update(this.form)">
<option value=''>Assets...</option>
<option value='^AssetProxy(url);'>Asset Proxy</option>
<option value='^RandomAssetProxy(url);'>Random Asset Proxy</option>
<option value='^FileUrl(assetUrl);'>File URL</option>
<option value='^Page(property name);'>Asset Property</option>
</select>
</td>
<td>
<select class="macro" name="macrolist" onchange="WGMacroDialog.update(this.form)">
<option value=''>Navigation...</option>
<option value='^AssetProxy(crumbtrail);'>Crumb Trail</option>
<option value='^AssetProxy(flexmenu);'>FlexMenu</option>
<option value='^AssetProxy(dtree);'>Dynamic Tree</option>
<option value='^AssetProxy(coolmenu);'>Cool Menu (Horizontal)</option>
<option value='^AssetProxy(currentmenuvertical);'>Current Menu (Vertical)</option>
<option value='^AssetProxy(currentmenuhorizontal);'>Current Menu (Horizontal)</option>
<option value='^AssetProxy(previousmenuvertical);'>Previous Menu (Vertical)</option>
<option value='^AssetProxy(previousmenuhorizontal);'>Previous Menu (Horizontal)</option>
<option value='^AssetProxy(previousdropmenu);'>Previous Dropdown Menu</option>
<option value='^AssetProxy(specificmenuvertical);'>Specific SubMenu (Vertical)</option>
<option value='^AssetProxy(specificmenuhorizontal);'>Specific SubMenu (Horizontal)</option>
<option value='^AssetProxy(specificdropmenu);'>Specific Dropdown Menu</option>
<option value='^AssetProxy(synopsis);'>Synopsis Menu</option>
<option value='^AssetProxy(toplevelmenuvertical);'>Top Level Menu (Vertical)</option>
<option value='^AssetProxy(topLevelmenuhorizontal);'>Top Level Menu (Horizontal)</option>
<option value='^AssetProxy(topdropmenu);'>Top Dropdown Menu</option>
<option value='^AssetProxy(roottab);'>Root Tabs Menu</option>
<option value='^AssetProxy(rootmenu);'>Root Menu (Horizontal)</option>
<option value='^H;'>Home Link</option>
<option value='^/;'>System URL</option>
<option value='^PageUrl;'>Current Page URL</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="macro" name="macrolist" onchange="WGMacroDialog.update(this.form)">
<option value=''>User...</option>
<option value='^L;'>Login Form</option>
<option value='^a("Account Info");'>My Account Link</option>
<option value='^CanEditText("You can edit this page.");'>Can Edit Page Message</option>
<option value='^AdminText("You are in admin mode!");'>Admin Mode Message</option>
<option value='^GroupAdd("Newsletter","Click here to join our newsletter.");'>Join Group</option>
<option value='^GroupDelete("Newsletter","Click here to unsubscribe from our newsletter.");'>Leave Group</option>
<option value='^GroupText("Visitors","You need an account to do anything cool on this site!");'>Group Message</option>
<option value='^EditableToggle;'>Page Editable Toggle</option>
<option value='^AdminToggle;'>Admin Toggle</option>
<option value='^LoginToggle;'>Login Toggle</option>
<option value='^@;'>Username</option>
<option value='^#;'>User ID</option>
</select>
</td>
<td>
<select class="macro" name="macrolist" onchange="WGMacroDialog.update(this.form)">
<option value=''>Style...</option>
<option value='^Spacer("10","100");'>Spacer</option>
<option value='^c;'>Company Name</option>
<option value='^u;'>Company URL</option>
<option value='^e;'>Company Email Address</option>
<option value='^LastModified;'>Last Modified Date</option>
<option value='^PageTitle;'>Page Title</option>
<option value='^r;'>Make Page Printable</option>
<option value='^RootTitle;'>Root Title</option>
<option value='^Extras;'>Extras Folder</option>
<option value='^AdminBar;'>Admin Bar</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<div class="mceActionPanel">
<div style="float: right">
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</div>
</form>
</body>
</html>

View file

@ -0,0 +1,46 @@
.panel_wrapper div.current {
height: 423px;
}
.panel_wrapper div.current input, .panel_wrapper div.current select {
width: 100%;
}
fieldset.pages {
height: 368px;
}
iframe.pages {
border-style: none;
width: 100%;
height: 100%;
}
.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;
}

View file

@ -0,0 +1,40 @@
(function() {
tinymce.PluginManager.requireLangPack('wgpagetree');
tinymce.create('tinymce.plugins.WGPageTreePlugin', {
init : function(ed, url) {
var page_url = document.location.protocol + "//" + document.location.hostname + (document.location.port ? ":" + document.location.port : '') + getWebguiProperty('pageURL');
ed.addCommand('wgPageTree', function() {
ed.windowManager.open({
file : url + '/pagetree.htm',
width : 400 + ed.getLang('wgpagetree.delta_width', 0),
height : 500 + ed.getLang('wgpagetree.delta_height', 0),
inline : 1
}, {
plugin_url : url,
page_url : page_url
});
});
ed.addButton('wgpagetree', {
title : 'wgpagetree.desc',
cmd : 'wgPageTree',
image : url + '/img/pagetree.gif'
});
},
getInfo : function() {
return {
longname : 'WebGUI Page Tree',
author : 'Plain Black',
authorurl : 'http://www.plainblack.com/',
infourl : 'http://www.webgui.org/',
version : "1.0"
};
}
});
// Register plugin
tinymce.PluginManager.add('wgpagetree', tinymce.plugins.WGPageTreePlugin);
})();

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 B

View file

@ -0,0 +1,59 @@
var WGPageTreeDialog = {
init : function(ed) {
var iframe = document.getElementById('page_selecter');
iframe.src = tinyMCEPopup.getWindowArg('page_url') + '?op=formHelper;class=HTMLArea;sub=pageTree';
},
setUrl : function(url) {
document.getElementById('link_url').value = url;
},
update : function(form) {
if (form.link_url.value == '') {
alert('No URL entered!');
return;
}
var ed = tinyMCEPopup.editor;
tinyMCEPopup.execCommand("mceBeginUndoLevel");
var elm = ed.dom.getParent(elm, "A");
// Create new anchor elements
if (elm == null) {
tinyMCEPopup.execCommand("CreateLink", false, "#mce_temp_url#", {skip_undo : 1});
elementArray = tinymce.grep(ed.dom.select("a"), function(n) {return ed.dom.getAttrib(n, 'href') == '#mce_temp_url#';});
for (i=0; i<elementArray.length; i++) {
elm = elementArray[i];
// Move cursor to end
try {
tinyMCEPopup.editor.selection.collapse(false);
} catch (ex) {
// Ignore
}
setAttribs(form, elm);
}
}
else {
setAttribs(form, elm);
}
tinyMCEPopup.execCommand("mceEndUndoLevel");
tinyMCEPopup.close();
}
}
function setAttribs(form, elm) {
var href = '^/(' + form.link_url.value + ');';
elm.href = href;
if (form.link_target.value == '_self') {
elm.target = '';
}
else {
elm.target = form.link_target.value;
}
}
tinyMCEPopup.requireLangPack();
tinyMCEPopup.onInit.add(WGPageTreeDialog.init, WGPageTreeDialog);

View file

@ -0,0 +1,3 @@
tinyMCE.addI18n('en.wgpagetree',{
desc : 'Link to a page in the WebGUI asset tree',
});

View file

@ -0,0 +1,9 @@
tinyMCE.addI18n('en.wgpagetree',{
desc : 'Insert A Link',
linkprops : 'Link Properties',
linkurl : 'URL',
linktarget : 'Target',
samewindow : 'Open link in same window.',
newwindow : 'Open link in new window.',
pages : 'Pages'
});

View file

@ -0,0 +1,54 @@
<!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>{#wgpagetree.desc}</title>
<script type="text/javascript" src="../../../tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
<script type="text/javascript" src="js/pagetree.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/pagetree.css" rel="stylesheet" type="text/css" />
<base target="_self" />
</head>
<body>
<form onsubmit="WGPageTreeDialog.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;">{#wgpagetree.desc}</a></span></li>
</ul>
</div>
<div class="panel_wrapper">
<div id="general_panel" class="panel current">
<table width="100%">
<tr>
<td><label for="link_url">{#wgpagetree.linkurl}</label></td>
<td><input type="text" name="link_url" value="" id="link_url" /></td>
</tr>
<tr>
<td><label for="link_target">{#wgpagetree.linktarget}</label></td>
<td>
<select type="text" name="link_target" id="link_target">
<option value="_self">{#wgpagetree.samewindow}</option>
<option value="_blank">{#wgpagetree.newwindow}</option>
</select>
</td>
</tr>
</table>
<fieldset class="pages">
<legend>{#wgpagetree.pages}</legend>
<iframe class="pages" id="page_selecter"></iframe>
</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>