text_editor.naml
<macro name="editor_toolbar" parameters="textarea_id, original_text, node_id">
<n.put_in_head.>
<n.editor_stylesheet/>
<n.editor_shared_scripts textarea_id="[n.textarea_id/]" node_id="[n.node_id/]"/>
<script type="text/javascript" src="/util/minmax.js"></script>
</n.put_in_head.>
<div class="toolbar rounded-top shaded-bg-color">
<table class="toobar">
<tr>
<n.editor_quote_button original_text="[n.original_text/]"/>
<n.editor_insert_image_button/>
<n.editor_bold_button/>
<n.editor_italic_button/>
<n.editor_link_button/>
<n.editor_smiley_button/>
<n.editor_subheaders_button/>
<n.editor_embed_button/>
<n.editor_more_options_button/>
</tr>
</table>
</div>
</macro>
<macro name="editor_shared_scripts" parameters="textarea_id, node_id">
<script type="text/javascript">
var textareaID = "<n.textarea_id/>";
var nodeId = "<n.hide_null.node_id/>";
<![CDATA[
Nabble.closeWindows = function() {
$('div.editor-dropdown').fadeOut('fast');
};
Nabble.insert = function(t) {
Nabble.insertTag(t);
Nabble.closeWindows();
};
Nabble.insertTag = function(tag) {
var textarea = Nabble.get(textareaID);
var s = this.getSelection(textarea);
if( s != "") {
this.setSelection( textarea, "<" + tag + ">" + s + "</" + tag + ">" );
} else {
this.setSelection( textarea, "<" + tag + "></" + tag + ">" );
}
textarea.focus();
};
Nabble.getSelection = function(textarea) {
if (document.selection) {
textarea.focus();
return document.selection.createRange().text;
} else if (textarea.selectionStart) {
return textarea.value.substr(textarea.selectionStart,textarea.selectionEnd-textarea.selectionStart);
} else if (textarea.selectionEnd) {
return textarea.value.substr(0,textarea.selectionEnd);
}
return '';
};
Nabble.setSelection = function(textarea,text) {
var hasStart = typeof (textarea.selectionStart) != 'undefined';
var hasEnd = typeof (textarea.selectionEnd) != 'undefined';
if (hasStart || hasEnd) {
var start = textarea.selectionStart? textarea.selectionStart : 0;
var t = textarea.value;
var s = start + text.length;
var scrollTop;
if (textarea.scrollTop)
scrollTop = textarea.scrollTop;
textarea.value = t.substr(0,start) + text + t.substr(textarea.selectionEnd);
if (typeof scrollTop != 'undefined')
textarea.scrollTop = scrollTop;
textarea.setSelectionRange(s,s);
return;
}
if( document.selection ) {
var r = document.selection.createRange();
if( r.parentElement()==textarea ) {
r.text = text;
r.select();
return;
}
}
textarea.value += text;
};
$(document).ready(function() {
var $buttons = $('td button.toolbar');
var h = $buttons.eq(0).outerHeight();
$buttons.each(function() {
$(this).height(h);
});
$(document).click(function(o){
var $btn = $(o.target).parents();
if ($btn.hasClass('has-dropdown'))
return;
Nabble.closeWindows();
});
});
]]>
</script>
</macro>
<macro name="editor_quote_button" parameters="original_text">
<n.if.not.is_empty.original_text>
<then>
<n.put_in_head.>
<script type="text/javascript">
Nabble.quoteOriginal = function(f) {
var $m = $("[name='message']");
$m.val($m.val() + $('#original').val());
$m.focus();
};
</script>
</n.put_in_head.>
<td class="nowrap">
<input type="hidden" id="original" name="original" value="[n.encode.original_text/]"/>
<button type="button" onclick="Nabble.quoteOriginal()" class="toolbar" title="[t]Quote the original message[/t]">
<img src="/images/quote.png" border="0" height="12" alt="Quote" style="vertical-align:middle"/>
<t>Quote</t>
</button>
<n.tooltip use_title="true"/>
</td>
</then>
</n.if.not.is_empty.original_text>
</macro>
<macro name="editor_insert_image_button">
<n.put_in_head.>
<script type="text/javascript">
<![CDATA[
Nabble.uploadImage = function() {
Nabble.closeWindows();
var $imgDiv = $('#image-upload');
var isOpen = $imgDiv.css("display") != 'none';
var alreadyLoaded = window.imageuploader && $('#image-upload-form', window.imageuploader.document).size() == 1;
if (isOpen)
return;
else if (alreadyLoaded)
$imgDiv.show();
else {
var f = '';
if ($.browser.msie)
f += '<br style="line-height:1px"/>';
f += "<iframe id='imageuploader' name='imageuploader' src='/forum/UploadImage.jtp?node=" + nodeId + "' width='20em' height='20em' frameBorder='0' scrolling='no' allowtransparency='true'>";
$imgDiv.html(f).show();
}
};
Nabble.uploadedImage = function(name,float,desc) {
var textarea = Nabble.get(textareaID);
var tag = '<nabble_img src="' + name + '" border="0"';
if (float == 'left')
tag += ' style="float:left; margin:.4em;"';
else if (float == 'right')
tag += ' style="float:right; margin:.4em;"';
else if (float == 'center')
tag += ' style="display: block; margin-left:auto; margin-right:auto;"';
if (desc)
tag += ' alt="' + desc + '"';
tag += '/>';
this.setSelection(textarea, tag);
textarea.focus();
Nabble.closeWindows();
};
]]>
</script>
</n.put_in_head.>
<td class="nowrap has-dropdown">
<div id="image-upload" class="editor-dropdown image-upload medium-border-color light-bg-color drop-shadow"></div>
<button type="button" onclick="Nabble.uploadImage()" class="toolbar image-upload" title="[t]Add an image to your post[/t]">
<img src="/images/image.png" border="0" height="12" alt="Picture" style="vertical-align:middle"/>
<t>Insert Image</t>
</button>
<n.tooltip use_title="true"/>
</td>
</macro>
<macro name="editor_bold_button">
<n.put_in_head.>
<script type="text/javascript">
Nabble.bold = function() {
var textarea = Nabble.get(textareaID);
var s = this.getSelection(textarea);
if( s != "" || (s=prompt("Enter text to make bold:","")) != null ) {
this.setSelection( textarea, "<b>" + s + "</b>" );
}
textarea.focus();
};
</script>
</n.put_in_head.>
<td class="nowrap">
<button type="button" onclick="Nabble.bold()" class="toolbar bold" style="height:1.65em" title="[t]Bold[/t]">
<img src="/images/bold.png"/>
</button>
<n.tooltip use_title="true"/>
</td>
</macro>
<macro name="editor_italic_button">
<n.put_in_head.>
<script type="text/javascript">
Nabble.italics = function() {
var textarea = Nabble.get(textareaID);
var s = this.getSelection(textarea);
if( s != "" || (s=prompt("Enter text to make italics:","")) != null ) {
this.setSelection( textarea, "<i>" + s + "</i>" );
}
textarea.focus();
};
</script>
</n.put_in_head.>
<td class="nowrap">
<button type="button" onclick="Nabble.italics()" class="toolbar" style="font-style:italic;height:1.65em" title="[t]Italic[/t]">
<img src="/images/italic.png"/>
</button>
<n.tooltip use_title="true"/>
</td>
</macro>
<macro name="editor_link_button">
<n.put_in_head.>
<script type="text/javascript">
<![CDATA[
Nabble.link = function() {
var textarea = Nabble.get(textareaID);
var url = prompt("Enter URL:","http://");
if (url != null) {
if (url.indexOf('http') != 0 && url.indexOf('ftp:') != 0)
url = 'http://' + url;
var text = this.getSelection(textarea);
if (text!="" || (text = prompt("Enter link text:",url)) != null) {
this.setSelection( textarea, "<a href=\"" + url + "\">" + text + "</a>" );
}
}
textarea.focus();
};
]]>
</script>
</n.put_in_head.>
<td class="nowrap">
<button type="button" onclick="Nabble.link()" class="toolbar" title="[t]Add a link to another page[/t]">
<img src="/images/link.png" width="13" height="12" alt="Link" style="vertical-align:middle"/> <t>Link</t>
</button>
<n.tooltip use_title="true"/>
</td>
</macro>
<macro name="editor_smiley_button">
<n.put_in_head.>
<script type="text/javascript">
var smileyTable = "<n.javascript_string_encode.compress.smiley_table/>";
<![CDATA[
Nabble.smiley = function(image) {
var textarea = Nabble.get(textareaID);
if (image.indexOf('http://')==0)
this.setSelection( textarea, "<img src=\""+image+"\"/>" );
else
this.setSelection( textarea, "<smiley image=\""+image+"\"/>" );
textarea.focus();
Nabble.closeWindows();
};
var smileysLoaded = false;
Nabble.openSmileys = function() {
Nabble.closeWindows();
var $smileys = $('#smiley-dropdown');
if (!smileysLoaded) {
$smileys.html(smileyTable);
smileysLoaded = true;
}
$smileys.show();
};
]]>
</script>
</n.put_in_head.>
<td class="has-dropdown">
<div id="smiley-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="margin-left:-15em"></div>
<button type="button" onclick="Nabble.openSmileys()" class="toolbar" title="[t]Add smileys and funny animations[/t]">
<img src="/images/icon_happy.png" border="0" style="vertical-align:middle"/>
<img src="/images/more.png" width="10" height="10"/>
</button>
<n.tooltip use_title="true"/>
</td>
</macro>
<macro name="editor_subheaders_button">
<n.put_in_head.>
<script type="text/javascript">
Nabble.headersDropdown = function() {
Nabble.closeWindows();
$('#headers-dropdown').show();
};
</script>
</n.put_in_head.>
<td class="has-dropdown">
<div id="headers-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="padding:.5em;width:25em;margin-left:-15em">
<h2><t>Adding Sub-Headers</t></h2>
<t>Use tags like <t.example1.bold text="<h2>...</h2>"/> or <t.example2.bold text="<h3>...</h3>"/> to create sub-headers.</t>
<div style="margin:.5em 0 1em;">
<t>Insert</t>
<button type="button" class="toolbar" onclick="Nabble.insert('h2')"><t>H2</t></button>
<button type="button" class="toolbar" onclick="Nabble.insert('h3')"><t>H3</t></button>
<button type="button" class="toolbar" onclick="Nabble.insert('h4')"><t>H4</t></button>
<button type="button" class="toolbar" onclick="Nabble.insert('h5')"><t>H5</t></button>
<button type="button" class="toolbar" onclick="Nabble.insert('h6')"><t>H6</t></button>
</div>
</div>
<button type="button" class="toolbar" onclick="Nabble.headersDropdown()">
<t>H2</t><img src="/images/more.png" width="10" height="10"/>
</button>
</td>
</macro>
<macro name="editor_embed_button">
<n.put_in_head.>
<script type="text/javascript">
Nabble.embedDropdown = function() {
Nabble.closeWindows();
$('#tips-dropdown').show();
};
</script>
</n.put_in_head.>
<td class="has-dropdown">
<div id="tips-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="padding:.5em;width:25em;margin-left:-15em">
<h2><t>Embedding Contents</t></h2>
<t>Use <t.tag_names.bold text="<nabble_embed>...</nabble_embed>"/> to embed widgets from other websites.</t>
<t>Currently Nabble supports</t>:
<ul style="margin:.3em">
<li><t>Videos from Youtube, Vimeo and LiveLeak.</t></li>
<li><t>Polls from Polldaddy.com (flash polls only)</t></li>
</ul>
<t>Just paste the code (provided by the sites above) within these tags and you are ready to post it.</t>
<div style="margin-top:.5em">
<t>Insert</t>
<button type="button" class="toolbar" onclick="Nabble.insert('nabble_embed')"><t>Embed Tags</t></button>
</div>
</div>
<button type="button" class="toolbar" onclick="Nabble.embedDropdown()">
<t>Embed</t><img src="/images/more.png" width="10" height="10"/>
</button>
</td>
</macro>
<macro name="editor_more_options_button">
<n.put_in_head.>
<script type="text/javascript">
<![CDATA[
Nabble.hideEmail = function() {
var textarea = Nabble.get(textareaID);
var s = this.getSelection(textarea);
if( s != "" || (s=prompt("Enter the email address to obfuscate/hide (e.g., show user@host.com as user@...):","")) != null ) {
this.setSelection( textarea, "<email>" + s + "</email>" );
}
textarea.focus();
}
Nabble.uploadFile = function() {
Nabble.closeWindows();
var $fileDiv = $('#file-upload');
var isOpen = $fileDiv.css("display") != 'none';
var alreadyLoaded = window.fileuploader && $('#file-upload-form', window.fileuploader.document).size() == 1;
if (isOpen)
return;
else if (alreadyLoaded)
$fileDiv.show();
else {
var f = '';
if ($.browser.msie)
f += '<br style="line-height:1px"/>';
f += "<iframe id='fileuploader' name='fileuploader' src='/forum/UploadFile.jtp?node=" + nodeId + "' width='380' height='100' frameBorder='0' scrolling='no' allowtransparency='true'>";
$fileDiv.html(f).show();
}
};
Nabble.uploadedFile = function(name) {
var textarea = Nabble.get(textareaID);
this.setSelection( textarea, '<nabble_a href="'+name+'">'+name+'</nabble_a>' );
textarea.focus();
Nabble.closeWindows();
};
]]>
</script>
</n.put_in_head.>
<td class="nowrap has-dropdown">
<div id="file-upload" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="margin-left:-5em"></div>
<span id="tb-dropdown" class="dropdown">
<button class="toolbar" title="[t]Click for more options[/t]" onclick="return false;"><t>More</t><img src="/images/more.png" width="10" height="10"/></button>
<n.tooltip use_title="true"/>
<table class="light-bg-color medium-border-color drop-shadow">
<tr><td title="[t]Upload a file[/t]"><a href="javascript:void Nabble.uploadFile();"><t>Upload a file</t></a></td></tr>
<tr><td title="[t]Hide email address (e.g., user@host.com to [n.lt/]hidden email[n.gt/] link)[/t]"><a href="javascript:void Nabble.hideEmail();"><t>Hide email</t></a></td></tr>
<tr><td title="[t]Add content that should not be encoded (e.g., code)[/t]"><a href="javascript:void Nabble.insert('raw');"><t>Raw text</t></a></td></tr>
</table>
</span>
<script type="text/javascript">
dropdownInit('tb-dropdown');
</script>
</td>
</macro>
<macro name="smiley_table">
<n.comment.>
You can edit the table below if you want to customize the list of smileys.
Use the 'smiley' command just like in the default cases, but you can print the
full URL of your smileys in the 'src' attribute. Example:
<n.smiley name="My Smiley" src="http://domain.com/image.gif"/>
</n.comment.>
<table style="text-align:center">
<tr>
<td><n.smiley name="Working" src="anim_working.gif"/></td>
<td><n.smiley name="Super" src="smiley_super.gif"/></td>
<td><n.smiley name="Whistling" src="smiley_whistling.gif"/></td>
<td><n.smiley name="Clapping" src="anim_claps.gif"/></td>
<td colspan="2"><n.smiley name="Handshake" src="anim_handshake.gif"/></td>
<td><n.smiley name="Jumping" src="anim_jump.gif"/></td>
<td colspan="2"><n.smiley name="Rules" src="anim_rules.gif"/></td>
<td><n.smiley name="Drunk" src="anim_drunk.gif"/></td>
</tr>
<tr>
<td><n.smiley name="What?" src="smiley_what.gif"/></td>
<td><n.smiley name="Confused" src="anim_confused.gif"/></td>
<td><n.smiley name="Uh?" src="smiley_uh.gif"/></td>
<td><n.smiley name="Crazy" src="anim_crazy.gif"/></td>
<td><n.smiley name="Angry" src="smiley_angry.gif"/></td>
<td><n.smiley name="Hurt" src="smiley_hurt.gif"/></td>
<td><n.smiley name="Pirate" src="smiley_pirate.gif"/></td>
<td><n.smiley name="Mustach" src="smiley_mustach.gif"/></td>
<td><n.smiley name="Ninja" src="smiley_ninja.gif"/></td>
<td><n.smiley name="Music" src="smiley_music.gif"/></td>
</tr>
<tr>
<td><n.smiley name="Unhappy" src="smiley_unhappy.gif"/></td>
<td><n.smiley name="Sad" src="smiley_sad.gif"/></td>
<td><n.smiley name="Cry" src="smiley_cry.gif"/></td>
<td><n.smiley name="Sleep" src="smiley_sleep.gif"/></td>
<td><n.smiley name="Argh" src="smiley_argh.gif"/></td>
<td><n.smiley name="Scared" src="smiley_scared.gif"/></td>
<td><n.smiley name="Oh No" src="smiley_oh_no.gif"/></td>
<td><n.smiley name="Oh" src="smiley_oh.gif"/></td>
<td><n.smiley name="Evil" src="smiley_evil.gif"/></td>
<td><n.smiley name="Teeth" src="smiley_teeth.gif"/></td>
</tr>
<tr>
<td><n.smiley name="Smile" src="smiley_beam.gif"/></td>
<td><n.smiley name="Happy" src="smiley_happy.gif"/></td>
<td><n.smiley name="Wink" src="smiley_wink.gif"/></td>
<td><n.smiley name="Thinking" src="smiley_thinking.gif"/></td>
<td><n.smiley name="Grin" src="smiley_grin.gif"/></td>
<td><n.smiley name="Good" src="smiley_good.gif"/></td>
<td><n.smiley name="Cool" src="smiley_cool.gif"/></td>
<td><n.smiley name="Blush" src="smiley_blush.gif"/></td>
<td><n.smiley name="Tongue" src="smiley_tongue.gif"/></td>
<td><n.smiley name="Blbl" src="anim_blbl.gif"/></td>
</tr>
</table>
</macro>
<macro name="smiley" parameters="name,src">
<a href="javascript:Nabble.smiley('[n.src/]')">
<n.if.starts_with text="[n.src/]" prefix="http://">
<then><img src="[n.src/]" alt="[n.name/]" border="0" /></then>
<else><img src="/images/smiley/[n.src/]" alt="[n.name/]" border="0" /></else>
</n.if.starts_with>
</a>
</macro>
<macro name="editor_stylesheet">
<style type="text/css">
div.editor-dropdown {
margin-top:1.8em;
position:absolute;
display:none;
z-index:1000;
border-width:1px;
border-style:solid;
}
.nabble div.toolbar {
min-width:30em;
max-width:55em;
width:100%;
padding:.1em;
}
table.toolbar {
border-spacing:0;
}
table.toolbar td {
padding:0;
}
button {
white-space:nowrap;
}
div > h2 {
margin:0;
padding:0;
}
</style>
</macro>