refactored the quicktag code and fixed a few bugs

git-svn-id: http://svn.automattic.com/wordpress/trunk@451 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
alex_t_king 2003-10-13 07:36:00 +00:00
parent 71209520da
commit bf762272d8
1 changed files with 194 additions and 177 deletions

View File

@ -2,21 +2,161 @@
// by Alex King // by Alex King
// http://www.alexking.org/ // http://www.alexking.org/
function edButton() { var edButtons = new Array();
this.id = ''; // used to name the toolbar button var edLinks = new Array();
this.display = ''; // label on button
this.tagStart = ''; // open tag
this.tagEnd = ''; // close tag
this.open = 0; // set to -1 if tag does not need to be closed
this.access = ''; // access key
}
var edOpenTags = new Array(); var edOpenTags = new Array();
function edButton(id, display, tagStart, tagEnd, access, open) {
this.id = id; // used to name the toolbar button
this.display = display; // label on button
this.tagStart = tagStart; // open tag
this.tagEnd = tagEnd; // close tag
this.access = access; // access key
this.open = open; // set to -1 if tag does not need to be closed
}
/*
** TODO: Make it so ins and del have proper datetime attributes, formatted as so: **
1999-02-22T16:03:30-08:00
** Here's my start **
var now = new Date();
var datetime = now.getFullYear() + '-' +
*/
edButtons[edButtons.length] = new edButton('ed_strong'
,'B'
,'<strong>'
,'</strong>'
,'b'
);
edButtons[edButtons.length] = new edButton('ed_em'
,'i'
,'<em>'
,'</em>'
,'i'
);
edButtons[edButtons.length] = new edButton('ed_del'
,'del'
,'<del>'
,'</del>'
,'d'
);
edButtons[edButtons.length] = new edButton('ed_ins'
,'ins'
,'<ins>'
,'</ins>'
,'d'
);
edButtons[edButtons.length] = new edButton('ed_link'
,'link'
,''
,'</a>'
,'a'
); // special case
edButtons[edButtons.length] = new edButton('ed_img'
,'img'
,''
,''
,'m'
,-1
); // special case
edButtons[edButtons.length] = new edButton('ed_ul'
,'ul'
,'<ul>'
,'</ul>'
,'u'
);
edButtons[edButtons.length] = new edButton('ed_ol'
,'ol'
,'<ol>'
,'</ol>'
,'o'
);
edButtons[edButtons.length] = new edButton('ed_li'
,'li'
,'<li>'
,'</li>'
,'l'
);
edButtons[edButtons.length] = new edButton('ed_block'
,'b-quote'
,'<blockquote>'
,'</blockquote>'
,'q'
);
edButtons[edButtons.length] = new edButton('ed_pre'
,'pre'
,'<pre>'
,'</pre>'
);
edButtons[edButtons.length] = new edButton('ed_more'
,'more'
,'<!--more-->'
,''
,'t'
,-1
);
edButtons[edButtons.length] = new edButton('ed_next'
,'n-page'
,'<!--nextpage-->'
,''
,'p'
,-1
);
function edLink() {
this.display = '';
this.URL = '';
this.newWin = 0;
}
edLinks[edLinks.length] = new edLink('WordPress'
,'http://wordpress.org/'
);
edLinks[edLinks.length] = new edLink('alexking.org'
,'http://www.alexking.org/'
);
function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
}
else if (button.id == 'ed_link') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
}
function edShowLinks() {
var tempStr = '<select onchange="edQuickLink(this.options[this.selectedIndex].value, this);"><option value="-1" selected>(Quick Links)</option>';
for (i = 0; i < edLinks.length; i++) {
tempStr += '<option value="' + i + '">' + edLinks[i].display + '</option>';
}
tempStr += '</select>';
document.write(tempStr);
}
function edAddTag(button) { function edAddTag(button) {
if (eval('ed' + button + '.tagEnd') != '') { if (edButtons[button].tagEnd != '') {
edOpenTags[edOpenTags.length] = button; edOpenTags[edOpenTags.length] = button;
document.getElementById(eval('ed' + button + '.id')).value = '/' + document.getElementById(eval('ed' + button + '.id')).value; document.getElementById(edButtons[button].id).value = '/' + document.getElementById(edButtons[button].id).value;
} }
} }
@ -25,7 +165,7 @@ function edRemoveTag(button) {
for (i = 0; i < edOpenTags.length; i++) { for (i = 0; i < edOpenTags.length; i++) {
if (edOpenTags[i] == button) { if (edOpenTags[i] == button) {
edOpenTags.splice(i, 1); edOpenTags.splice(i, 1);
document.getElementById(eval('ed' + button + '.id')).value = document.getElementById(eval('ed' + button + '.id')).value.replace('/', ''); document.getElementById(edButtons[button].id).value = document.getElementById(edButtons[button].id).value.replace('/', '');
} }
} }
} }
@ -52,158 +192,22 @@ function edCloseAllTags() {
} }
} }
/*
** TODO: Make it so ins and del have proper datetime attributes, formatted as so: **
1999-02-22T16:03:30-08:00
** Here's my start **
var now = new Date();
var datetime = now.getFullYear() + '-' +
*/
var ed0 = new edButton();
ed0.id = 'ed_strong';
ed0.display = 'B';
ed0.tagStart = '<strong>';
ed0.tagEnd = '</strong>';
ed0.access = 'b';
var ed1 = new edButton();
ed1.id = 'ed_em';
ed1.display = 'i';
ed1.tagStart = '<em>';
ed1.tagEnd = '</em>';
ed1.access = 'i';
var ed2 = new edButton();
ed2.id = 'ed_del';
ed2.display = 'del';
ed2.tagStart = '<del>';
ed2.tagEnd = '</del>';
ed2.access = 'd';
var ed3 = new edButton();
ed3.id = 'ed_ins';
ed3.display = 'ins';
ed3.tagStart = '<ins>';
ed3.tagEnd = '</ins>';
ed3.access = 'n';
var ed4 = new edButton();
ed4.id = 'ed_link';
ed4.display = 'link';
ed4.tagStart = ''; // special case
ed4.tagEnd = '</a>';
ed4.access = 'a';
var ed5 = new edButton();
ed5.id = 'ed_img';
ed5.display = 'img';
ed5.tagStart = ''; // special case
ed5.tagEnd = '';
ed5.open = -1;
ed5.access = 'm';
var ed6 = new edButton();
ed6.id = 'ed_ul';
ed6.display = 'ul';
ed6.tagStart = '<ul>\n';
ed6.tagEnd = '</ul>';
ed6.access = 'u';
var ed7 = new edButton();
ed7.id = 'ed_ol';
ed7.display = 'ol';
ed7.tagStart = '<ol>\n';
ed7.tagEnd = '</ol>';
ed7.access = 'o';
var ed8 = new edButton();
ed8.id = 'ed_li';
ed8.display = 'li';
ed8.tagStart = '\t<li>';
ed8.tagEnd = '</li>\n';
ed8.access = 'l';
var ed9 = new edButton();
ed9.id = 'ed_block';
ed9.display = 'b-quote';
ed9.tagStart = '<blockquote>';
ed9.tagEnd = '</blockquote>';
ed9.access = 'q';
var ed10 = new edButton();
ed10.id = 'ed_pre';
ed10.display = 'pre';
ed10.tagStart = '<pre>';
ed10.tagEnd = '</pre>';
ed10.access = '';
var ed11 = new edButton();
ed11.id = 'ed_more';
ed11.display = 'more';
ed11.tagStart = '<!--more-->';
ed11.tagEnd = '';
ed11.access = 't';
var ed12 = new edButton();
ed12.id = 'ed_next';
ed12.display = 'n-page';
ed12.tagStart = '<!--nextpage-->';
ed12.tagEnd = '';
ed12.access = 'p';
var edButtonCount = 13;
function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
}
else if (button.id == 'ed_link') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
}
function edLink() {
this.display = '';
this.URL = '';
this.newWin = 0;
}
var edLink0 = new edLink;
edLink0.display = 'WordPress';
edLink0.URL = 'http://wordpress.org/';
var edLink1 = new edLink;
edLink1.display = 'alexking.org';
edLink1.URL = 'http://www.alexking.org/';
var edLinkCount = 2;
function edShowLinks() {
var tempStr = '<select onchange="edQuickLink(this.options[this.selectedIndex].value, this);"><option value="-1" selected>(Quick Links)</option>';
for (i = 0; i < edLinkCount; i++) {
tempStr += '<option value="' + i + '">' + eval('edLink' + i + '.display') + '</option>';
}
tempStr += '</select>';
document.write(tempStr);
}
function edQuickLink(i, thisSelect) { function edQuickLink(i, thisSelect) {
if (i > -1) { if (i > -1) {
var newWin = ''; var newWin = '';
if (eval('edLink' + i + '.newWin') == 1) { if (edLinks[i].newWin == 1) {
newWin = ' target="_blank"'; newWin = ' target="_blank"';
} }
var tempStr = '<a href="' + eval('edLink' + i + '.URL') + '"' + newWin + '>' + eval('edLink' + i + '.display') + '</a>'; var tempStr = '<a href="' + edLinks[i].URL + '"' + newWin + '>'
+ edLinks[i].display
+ '</a>';
thisSelect.selectedIndex = 0;
edInsertContent(edCanvas, tempStr); edInsertContent(edCanvas, tempStr);
} }
else {
thisSelect.selectedIndex = 0; thisSelect.selectedIndex = 0;
} }
}
function edSpell(myField) { function edSpell(myField) {
var word = ''; var word = '';
@ -225,14 +229,14 @@ function edSpell(myField) {
word = prompt('Enter a word to look up:', ''); word = prompt('Enter a word to look up:', '');
} }
if (word != '') { if (word != '') {
window.open('http://dictionary.reference.com/search?q=' + word); window.open('http://dictionary.reference.com/search?q=' + escape(word));
} }
} }
function edToolbar() { function edToolbar() {
document.write('<div id="ed_toolbar">'); document.write('<div id="ed_toolbar">');
for (i = 0; i < edButtonCount; i++) { for (i = 0; i < edButtons.length; i++) {
edShowButton(eval('ed' + i), i); edShowButton(edButtons[i], i);
} }
document.write('<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="Dictionary lookup" value="Dict." />'); document.write('<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="Dictionary lookup" value="Dict." />');
document.write('<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="Close all open tags" value="Close Tags" />'); document.write('<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="Close all open tags" value="Close Tags" />');
@ -248,15 +252,15 @@ function edInsertTag(myField, i) {
myField.focus(); myField.focus();
sel = document.selection.createRange(); sel = document.selection.createRange();
if (sel.text.length > 0) { if (sel.text.length > 0) {
sel.text = eval('ed' + i + '.tagStart') + sel.text + eval('ed' + i + '.tagEnd'); sel.text = edButtons[i].tagStart + sel.text + edButtons[i].tagEnd;
} }
else { else {
if (!edCheckOpenTags(i) || eval('ed' + i + '.tagEnd') == '') { if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
sel.text = eval('ed' + i + '.tagStart'); sel.text = edButtons[i].tagStart;
edAddTag(i); edAddTag(i);
} }
else { else {
sel.text = eval('ed' + i + '.tagEnd'); sel.text = edButtons[i].tagEnd;
edRemoveTag(i); edRemoveTag(i);
} }
} }
@ -269,26 +273,28 @@ function edInsertTag(myField, i) {
var cursorPos; var cursorPos;
if (startPos != endPos) { if (startPos != endPos) {
myField.value = myField.value.substring(0, startPos) myField.value = myField.value.substring(0, startPos)
+ eval('ed' + i + '.tagStart') + edButtons[i].tagStart
+ myField.value.substring(startPos, endPos) + myField.value.substring(startPos, endPos)
+ eval('ed' + i + '.tagEnd') + edButtons[i].tagEnd
+ myField.value.substring(endPos, myField.value.length); + myField.value.substring(endPos, myField.value.length);
cursorPos = endPos + eval('ed' + i + '.tagStart').length + eval('ed' + i + '.tagEnd').length; cursorPos = endPos
+ edButtons[i].tagStart.length
+ edButtons[i].length;
} }
else { else {
if (!edCheckOpenTags(i) || eval('ed' + i + '.tagEnd') == '') { if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
myField.value = myField.value.substring(0, startPos) myField.value = myField.value.substring(0, startPos)
+ eval('ed' + i + '.tagStart') + edButtons[i].tagStart
+ myField.value.substring(endPos, myField.value.length); + myField.value.substring(endPos, myField.value.length);
edAddTag(i); edAddTag(i);
cursorPos = startPos + eval('ed' + i + '.tagStart').length; cursorPos = startPos + edButtons[i].tagStart.length;
} }
else { else {
myField.value = myField.value.substring(0, startPos) myField.value = myField.value.substring(0, startPos)
+ eval('ed' + i + '.tagEnd') + edButtons[i].tagEnd
+ myField.value.substring(endPos, myField.value.length); + myField.value.substring(endPos, myField.value.length);
edRemoveTag(i); edRemoveTag(i);
cursorPos = startPos + eval('ed' + i + '.tagEnd').length; cursorPos = startPos + edButtons[i].tagEnd.length;
} }
} }
myField.focus(); myField.focus();
@ -296,12 +302,12 @@ function edInsertTag(myField, i) {
myField.selectionEnd = cursorPos; myField.selectionEnd = cursorPos;
} }
else { else {
if (!edCheckOpenTags(i) || eval('ed' + i + '.tagEnd') == '') { if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
myField.value += eval('ed' + i + '.tagStart'); myField.value += edButtons[i].tagStart;
edAddTag(i); edAddTag(i);
} }
else { else {
myField.value += eval('ed' + i + '.tagEnd'); myField.value += edButtons[i].tagEnd;
edRemoveTag(i); edRemoveTag(i);
} }
myField.focus(); myField.focus();
@ -332,14 +338,25 @@ function edInsertContent(myField, myValue) {
} }
} }
function edInsertLink(myField, i) { function edInsertLink(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = 'http://';
}
if (!edCheckOpenTags(i)) { if (!edCheckOpenTags(i)) {
eval('ed' + i + '.tagStart = \'<a href="\' + prompt(\'Enter the URL\', \'http://\') + \'">\''); edButtons[i].tagStart = '<a href="'
+ prompt('Enter the URL'
,defaultValue
)
+ '" target="_blank">';
} }
edInsertTag(myField, i); edInsertTag(myField, i);
} }
function edInsertImage(myField) { function edInsertImage(myField) {
var myValue = '<img src="' + prompt('Enter the URL of the image', 'http://') + '" alt="' + prompt('Enter a description of the image', '') + '" />'; var myValue = '<img src="'
+ prompt('Enter the URL of the image', 'http://')
+ '" alt="'
+ prompt('Enter a description of the image', '')
+ '" />';
edInsertContent(myField, myValue); edInsertContent(myField, myValue);
} }