wiki.js: toolbar tag inserter for wiki edit.
Status: Beta
Brought to you by:
mixuone
Menu
▾
▴
This is an implementation for a "toolbar" when editing wiki pages. In the form of a new file called wiki.js that goes into the mxwiki-res directory:
WIKI.JS:
<!-- hide
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var is_gecko = ((clientPC.indexOf('gecko')!=-1) && (clientPC.indexOf('spoofer')==-1)
&& (clientPC.indexOf('khtml') == -1) && (clientPC.indexOf('netscape/7.0')==-1));
// drawTagMenu
// Used to draw the html for the tag menu buttons.
function drawTagMenu()
{
alert(clientPC);
document.write("<a class='toolbar' href='javascript:insertTags(\"[b]\",\"[/b]\",\"bold text\")'>[Bold]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"[i]\",\"[/i]\",\"italic text\")'>[Italic]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"[u]\",\"[/u]\",\"underline text\")'>[Underline]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"[::\",\"]\",\"title\")'>[Title]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"* \",\"\",\"bullet list\")'>[*]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"# \",\"\",\"number list\")'>[1.]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"=\",\"=\",\"header 1\")'>[h1]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"==\",\"==\",\"header 2\")'>[h2]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"===\",\"===\",\"header 3\")'>[h3]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"====\",\"====\",\"header 4\")'>[h4]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"[\",\"]\",\"http://www.google.com Googe\")'>[xLink]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"[[\",\"]]\",\"Help\")'>[iLink]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"----\",\"\",\"\")'>[Rule]</a>");
document.write("<a class='toolbar' href='javascript:insertTags(\"[pre]\",\"[/pre]\",\"preformatted text\")'>[Pre]</a>");
}
// insertTags
// Apply tagOpen/tagClose to selection in textarea,
// use sampleText instead of selection if there is none
// copied and adapted from wikipedia in which
// they copied and adapted from phpBB.
function insertTags(tagOpen, tagClose, sampleText)
{
var txtarea = document.editform.text;
// IE
if(document.selection && !is_gecko)
{
var theSelection = document.selection.createRange().text;
if(!theSelection) { theSelection=sampleText;}
txtarea.focus();
if(theSelection.charAt(theSelection.length - 1) == " ")
{ // exclude ending space char, if any
theSelection = theSelection.substring(0, theSelection.length - 1);
document.selection.createRange().text = tagOpen + theSelection + tagClose + " ";
}
else
{
document.selection.createRange().text = tagOpen + theSelection + tagClose;
}
// Mozilla
}
else if(txtarea.selectionStart || txtarea.selectionStart == '0')
{
var startPos = txtarea.selectionStart;
var endPos = txtarea.selectionEnd;
var scrollTop=txtarea.scrollTop;
var myText = (txtarea.value).substring(startPos, endPos);
if(!myText) { myText=sampleText;}
if(myText.charAt(myText.length - 1) == " ")
{ // exclude ending space char, if any
subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " ";
}
else
{
subst = tagOpen + myText + tagClose;
}
txtarea.value = txtarea.value.substring(0, startPos) + subst +
txtarea.value.substring(endPos, txtarea.value.length);
txtarea.focus();
var cPos=startPos+(tagOpen.length+myText.length+tagClose.length);
txtarea.selectionStart=cPos;
txtarea.selectionEnd=cPos;
txtarea.scrollTop=scrollTop;
}
// reposition cursor if possible
if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
}
// end hide -->
In print_PageHeader(): a change to this line to include the wiki.js:
print qq~<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>$SiteName - $title</title><link type="text/css" rel="stylesheet" href="$ResourcesURL/wiki.css"><script language='JavaScript' src='$ResourcesURL/wiki.js'></script></head><body>
In print_EditPage_Normal() and UserProfileEdit(), I had to add a NAME to the form in each: name='editform'
and in print_EditPage_Normal() I added the javascript call to drawTagMenu().
sub print_UserProfileEdit(){
# this is not a stand-alone page, it is a part of EditPage
# -> EditPage is the normal wiki page text editor
print "<h1>$txt{'31'}</h1>";
my $username = shift;
&db_load_UserData($username);
my $homepage = &db_get_UserData($username, 'userprofile/homepage');
my $MSNid = &db_get_UserData($username, 'userprofile/MSN-id');
my $ICQid = &db_get_UserData($username, 'userprofile/ICQ-id');
my $YIMid = &db_get_UserData($username, 'userprofile/YIM-id');
my $AIMid = &db_get_UserData($username, 'userprofile/AIM-id');
my $Skypeid = &db_get_UserData($username, 'userprofile/Skype-id');
my $Jabberid = &db_get_UserData($username, 'userprofile/Jabber-id');
my $usertitle = &db_get_UserData($username, 'userprofile/user-title');
my $birthdate = &db_get_UserData($username, 'userprofile/birth-date');
my ($byear, $bmonth, $bday) = split(/\//, $birthdate);
# my $regdate = scalar gmtime &db_get_UserData($username, 'userprofile/registration-date');
my $email = &db_get_UserData($username, 'userprofile/email');
my $location = &db_get_UserData($username, 'userprofile/location');
my $avatar = &db_get_UserData($username, 'userprofile/avatar-URL');
my $userlevel = &db_get_UserData($username, 'userprofile/user-level');
my $gender = &db_get_UserData($username, 'userprofile/gender');
my $genders2 = (($gender eq 'M')? ' selected' : '');
my $genders3 = (($gender eq 'F')? ' selected' : '');
my $hideemail = &db_get_UserData($username, 'userprofile/options/hide-email');
my $hideemail1 = (($hideemail eq 'Y')? ' checked' : '');
my $IfAdminUserLevelEdit;
if (&is_Admin($AuthUser)) {
$IfAdminUserLevelEdit = qq~<tr><td>$txt{'19'}:</td><td><input type="text" name="userlevel" size="3" maxsize="3" value="$userlevel"></td></tr>~;
} else {
$IfAdminUserLevelEdit = qq~<tr><td>$txt{'19'}:</td><td>$userlevel</td></tr>~;
}
# rws added name="editform" to form.
print qq~<form name="editform" method="post" action="$WikiURL?action=useredit2&page=$UserNameSpace:$username" enctype="application/x-www-form-urlencoded">
<table>
<tr><td>$txt{'24'}:</td><td><input type="text" size="40" name="hpage" value="$homepage"></td></tr>
<tr><td>$txt{'35'}:</td><td><input type="password" name="nupwd1">$txt{'37'}</td></tr>
<tr><td>$txt{'36'}:</td><td><input type="password" name="nupwd2"></td></tr>
$IfAdminUserLevelEdit
<tr><td>$txt{'18'}:</td><td><input type="text" name="usertitle" size="40" value="$usertitle"></td></tr>
<tr><td>$txt{'20'}:</td><td>
<select name="gender" size="1">
<option value=" "></option>
<option value="M"$genders2>$txt{'38'}</option>
<option value="F"$genders3>$txt{'39'}</option>
</select>
</td></tr>
<tr><td>$txt{'21'}:</td><td>$txt{'40'}<input type="text" name="byear" size="4" maxsize="4" value="$byear"> $txt{'41'}<input name="bmonth" type="text" size="2" maxsize="2" value="$bmonth"> $txt{'42'}<input name="bday" type="text" size="2" maxsize="2" value="$bday"></td></tr>
<tr><td>$txt{'25'}:</td><td><input type="text" name="location" value="$location" size="40"></td></tr>
<tr><td>$txt{'23'}:</td><td><input type="text" name="email" value="$email" size="40"></td></tr>
<tr><td>$txt{'32'}</td><td><input type="checkbox" name="hideemail" value="Yes"$hideemail1></td></tr>
<tr><td>$txt{'33'}:</td><td><input type="text" name="avatar" value="$avatar" size="40"></td></tr>
<tr><td>$field{'1'}</td><td><input type="text" name="msn" value="$MSNid" size="40"></td></tr>
<tr><td>$field{'2'}</td><td><input type="text" name="icq" value="$ICQid" size="40"></td></tr>
<tr><td>$field{'3'}</td><td><input type="text" name="yim" value="$YIMid" size="40"></td></tr>
<tr><td>$field{'4'}</td><td><input type="text" name="aim" value="$AIMid" size="40"></td></tr>
<tr><td>$field{'5'}</td><td><input type="text" name="skype" value="$Skypeid" size="40"></td></tr>
<tr><td>$field{'6'}</td><td><input type="text" name="jabber" value="$Jabberid" size="40"></td></tr>
</table>
<h2>$txt{'34'}</h2>
~;
}
sub print_EditPage_Normal(){
my $pagename = shift;
my $ns = shift;
my $name = shift;
my $pagetext = $txt{'3'};
if (($ns eq $UserNameSpace)&&($AuthUser ne $name)) {
# Fatal: Can't edit userpage of others.
print $txt{'43'};
} else {
if (&db_PageExists($pagename)) {
&db_load_PageData($pagename);
}
if (&can_edit($AuthUser, $pagename)) {
if (($AuthUser eq $name)&&($ns eq $UserNameSpace)) {
&print_UserProfileEdit($name);
} else {
my $temp1 = sprintf($txt{'1'},$pagename);
# rws added name="editform" to form.
print qq~<h1>$temp1</h1>
<form name="editform" method="post" action="$WikiURL?action=edit2&page=$pagename" enctype="application/x-www-form-urlencoded">~;
if ($name ne $MainPage){
my $parentsuggestion = &get_ParentPageSuggestion($pagename);
print qq~<p>$txt{'79'} <input type="text" name="parentpage" value="$parentsuggestion" size="20"></p>~;
}
}
$pagetext = &db_get_PageData($pagename, 'article/content');
print qq~
<p>
<script language="javascript">drawTagMenu();</script><!--rws added--><br>
<input type="hidden" name="title" value="$pagename" /> <textarea name="text" rows="25" cols="78">$pagetext</textarea></p>~;
print qq~<p>$txt{'44'}: <input type="text" name="editsummary" size="60" /></p>~;
if ($AuthUser ne '') {
print qq~<p>$txt{'17'}: <input type="hidden" name="username" value="$AuthUser" size="20" /><i>$AuthUser (<a href="$WikiURL?action=logout">$txt{'6'}</a>)</i></p>~;
if ((!(&db_PageExists($pagename)))&&($ns ne $UserNameSpace)){
print qq~<p><input type="checkbox" name="soleauthor" value="yes"> $txt{'92'}~;
# print licence selector
} else {
if(&db_get_PageData($pagename, 'article/type') eq 'complete_original_work'){
if(!(&is_Admin($AuthUser))){
print $txt{'94'};
} else {
print qq~<input type="hidden" name="nosoleauthor" value="y"><input type="checkbox" name="soleauthor" value="yes" checked> $txt{'95'}~;
}
} else {
if((!(&is_Admin($AuthUser)))||($ns eq $UserNameSpace)){
# print "Collaborative work./ user page";
# no need to print anything.
} else {
print qq~<input type="hidden" name="nosoleauthor" value="y"><input type="checkbox" name="soleauthor" value="yes"> $txt{'96'}~;
}
}
}
} else {
print qq~<p>$txt{'17'}: <input type="text" name="username" value="" size="20" maxlength="50" /></p>~;
}
print qq~<p><input type="submit" name="save" value="$txt{'45'}" accesskey="s" /> <input type="submit" name="preview" value="$txt{'46'}" /></p>
</form>~;
} else {print $txt{'47'};}
}
}
once again I messed up the post. In wiki.js:
Comment out or delete the alert(clientPC); line.
If you added the email tag (in another post), you can add:
document.write("<a class='toolbar' href='javascript:insertTags(\"[mailto:\",\"]\",\"joe.jones@nowhere.com Joe\")'>[eLink]</a>");
to the drawTagMenu javascript function.
ALSO: I only have IE and firefox. There was a rather complex implementation for "all other browsers" but since I couldn't test it I left it out.