<html>
<head>
- <title><!--~$title show {~-->~$host~ Admin: <!--~listings {~-->Pages Listing<!--~}~--><!--~form {~--><!--~id {~-->Add a new page<!--~}~--><!--~id unset {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
+ <title><!--~$title show {~-->~$host~ Admin: <!--~listings once_if {~-->Pages Listing<!--~}~--><!--~form {~--><!--~id {~-->Add a new page<!--~}~--><!--~id unset {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
<!--~$head {~-->
- <script type="text/javascript" src="code/ckeditor/ckeditor.js"></script>
+ <script src="inc/ckeditor/ckeditor.js"></script>
<style>
/* icon in cke buttons */
.cke_button_icon.cke_button__wfpl_images_icon {
- background-image: url(/code/ckeditor/plugins/icons.png?t=D5AC);
+ background-image: url(/inc/ckeditor/plugins/icons.png?t=D5AC);
background-position: 0 -1504px;
}
.cke_wfpl_images_dialog * {
.cke_wfpl_images_dialog * + p {
padding-top: 5px;
}
+ .cke_wfpl_images_dialog * a {
+ text-decoration: underline;
+ color: blue;
+ }
.cke_wfpl_images_dialog .cke_wfpl_thumbs {
height: 270px;
overflow-y: scroll;
border: 2px solid #444;
}
</style>
- <script type="text/javascript">
+ <script>
window.cke_wfpl_images = {
- images: {~wfpl_images {~
- "~id~": {
+ images: [~wfpl_images {~
+ {
thumb: "~image thumb_src jsdq~",
image: "~image image_src jsdq~",
image_width: "~image image_width~",
image_height: "~image image_height~",
sizes: "~sizes jsdq~",
caption: "~caption jsdq~"
- }
- ~ sep {~,~}~
- ~}~},
+ }~ sep {~,~}~~}~
+ ],
next_id: 0,
selected: [],
editors: []
var image;
var code, width, height, src, size, caption;
if (selected == null) {
- console.log("no selected picture"); // FIXME
+ CKEDITOR.dialog.getCurrent().hide();
return;
}
image = window.cke_wfpl_images.images[selected];
code += '</div>'
break;
}
- CKEDITOR.dialog.getCurrent().hide(); // FIXME
+ CKEDITOR.dialog.getCurrent().hide();
editor.insertElement(CKEDITOR.dom.element.createFromHtml(code));
}
CKEDITOR.plugins.add('wfpl_images', {
init: function (editor) {
var plugin_id = window.cke_wfpl_images.editors.length;
window.cke_wfpl_images.editors.push(editor);
- window.cke_wfpl_images.selected.push(null);
+ window.cke_wfpl_images.selected.push(window.cke_wfpl_images.images.length > 0 ? 0 : null);
editor.addCommand('wfpl_images', new CKEDITOR.dialogCommand('wfpl_images_dialog'));
editor.ui.addButton('wfpl_images', {
label: 'Insert Image',
command: 'wfpl_images',
- toolbar: 'insert' /* which section to put this button in */
+ toolbar: 'insert'
});
CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
- // CKEDITOR.dialog.definition
return {
title: 'Insert Image',
minWidth: 700,
minHeight: 350,
- onShow: function() {
- // FIXME unselect and remove hilight
- // window.cke_wfpl_images.selected[plugin_id] = null;
- },
contents: [
{
- id: 'tab1',
- label: '?not displayed',
expand: true,
padding: 0,
elements: [
type: 'html',
html: '<div class="cke_wfpl_images_dialog">'
+ '<h3>Step 1: Choose an image to insert:</h3>'
- + "<div class=\"cke_wfpl_thumbs\">~wfpl_images {~ <div class=\"cke_wfpl_thumb\" onclick=\"return window.cke_wfpl_images_thumb_click("+plugin_id+", this, ~id~)\" style=\"background-image: url(~image thumb_src attr jsdq~)\">~caption empty {~~name html jsdq~~}~~caption nonempty {~~caption html jsdq~~}~</div>~}~</div>"
- + "</div>"
- + '<p style="white-space: normal">If you\'d like to insert an image not shown above, you can <a style="color: blue; text-decoration: underline" href="admin_images?new=1" target="_blank">upload it here</a>. Sorry, it won\'t appear here until you reload this editor page (hit Save below, then "edit this page" again.)</p>'
+ + "<div class=\"cke_wfpl_thumbs\">~wfpl_images {~ <div class=\"~ first {~selected ~}~cke_wfpl_thumb\" onclick=\"return window.cke_wfpl_images_thumb_click("+plugin_id+", this, ~id~)\" style=\"background-image: url(~image thumb_src attr jsdq~)\">~caption empty {~~name html jsdq~~}~~caption nonempty {~~caption html jsdq~~}~</div>~}~</div>"
+ + '<p>If you\'d like to insert an image not shown above, you can <a href="admin_images?new=1" target="_blank">upload it here</a>. Sorry, it won\'t appear here until you reload this editor page (hit Save below, then "edit this page" again.)</p>'
+ + '</div>'
}
]
}
buttons: [
{
type: 'button',
- id: 'left',
label: 'Insert on Left',
className: 'cke_dialog_ui_button_ok',
onClick: function() {
},
{
type: 'button',
- id: 'center',
label: 'Insert Centered',
className: 'cke_dialog_ui_button_ok',
onClick: function() {
},
{
type: 'button',
- id: 'right',
label: 'Insert on Right',
className: 'cke_dialog_ui_button_ok',
onClick: function() {
},
{
type: 'button',
- id: 'full',
label: 'Insert BIG',
className: 'cke_dialog_ui_button_ok',
onClick: function() {
}
},
CKEDITOR.dialog.cancelButton
- ],
- onOk: function () {
- var image = this.getContentElement('tab1', 'image').getValue();
- if (image === null) {
- return;
- }
- editor.insertHtml('<img alt="" src="' + window.wfpl_images[image].image + '">');
- }
+ ]
};
});
}
function make_wysiwyg(name) {
CKEDITOR.replace(name, {
'contentsCss': 'style.css?m=~style.css mtime~',
+ bodyId: '~$basename~' + '-wysiwyg-' + name,
'allowedContent': true,
'stylesSet': [
{ name: 'Paragraph', element: 'p'},
<div class="caption">Title</div>
<div class="field_notes">(This appears at the top of the page, in the window title-bar (by the close button) and as the headline/link of search engine results.)</div>
- <div class="field"><input type="text" name="title" value="~title attr~"></div>
+ <div class="field"><input type="text" name="title" value="~title attr~" class="wide_field"></div>
<div class="caption">Filename</div>
<div class="field_notes">(<!--~editing {~-->Careful: if you change this, be sure to update all links to this page<!--~}~--><!--~editing unset {~-->Please use only a-z, 0-9 and _ (underscore) in your filename. Please, no capitals, punctuation or spaces.<!--~}~-->)</div>
<li>If you don't see an editor below (with buttons in it) then please try this page in <a href="http://getfirefox.com">Mozilla FireFox</a> or <a href="http://www.google.com/chrome/">Google Chrome</a>.</li>
<li>If you're pasting from Microsoft Word, please use the "paste from word" button (looks like a clipboard with a "W").</li>
<li>To make a link, type the text to be clicked, select it, click the "Link" button (looks like a short chain) and paste the web address (where the link should point to) into the "URL" field. Exception: If you're making a link to another page on this site, please remove the "http://~$host~/" from the beginning of the "URL" field and set the "Protocol" to <other>.</li>
+ <li>To insert an image: place the cursor at the beginning of a line and click the "insert image" button in the editor. Note that you will only be able to insert images that you have already uploaded on the <a href="admin_images" target="_blank">manage images</a> page.</li>
</ul>
</div>
- <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea><script type="text/javascript">make_wysiwyg('content');</script></div>
+ <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea><script>make_wysiwyg('content');</script></div>
<div class="caption">Description</div>
<div class="field_notes">(Hidden description of this page, primarily for search engines.)</div>
<!--~listings once_if {~-->
<p><a href="admin_pages?new=1">[Add a new page]</a></p>
- <table cellspacing="0" cellpadding="4" border="1" summary="">
+ <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
<tr><th>Title</th><th>Filename</th><th> </th></tr>
<!--~listings {~-->
<tr>
Got questions, comments, patches, etc.? Contact Jason Woofenden