Modyfikacja WordPress Quicktags

Wzięło mnie na poprawianie edytora z WP. Generalnie używam wersji z podglądem HTML. Jest to wygodniejsze, bo wstawiam kod źródłowy. Jak na razie nie ma żadnego fajnego edytora webowego, który wspomagał by jakoś rozsądnie tą operację.
Niestety jednak ostatnimi czasy do ciężkiej cholery doprowadzało mnie ręczne wklepywanie tagów p i pre by wstawić kod. Postanowiłem dodać odpowiednią funkcjonalność do edytora.

Modyfikacja quicktags.js

Ściągamy naszego bloga z serwera, odpalamy lokalnie jako test i dodajemy go jako projekt do Eclipse. Używam dodatku Aptana Studio mam zatem bardzo dobry edytor JS. Otwieramy plik wp-includes/js/quicktags.js i zamieniamy go na poniższy:

Listing 1. Nowa wersja quicktags.js

var edButtons = new Array(), edLinks = new Array(), edOpenTags = new Array(), now = new Date(), datetime, currentListing;
function edButton(f, e, c, b, a, d) {
	this.id = f;
	this.display = e;
	this.tagStart = c;
	this.tagEnd = b;
	this.access = a;
	this.open = d
}
function zeroise(b, a) {
	var c = b.toString();
	if (b ",
		"", "b");
edButtons[edButtons.length] = new edButton("ed_em", "i", "<em>", "</em>", "i");
edButtons[edButtons.length] = new edButton("ed_link", "link", "", "", "a");
edButtons[edButtons.length] = new edButton("ed_block", "b-quote",
		"\n\n<blockquote>", "</blockquote>\n\n", "q");
edButtons[edButtons.length] = new edButton("ed_del", "del",
		'<del datetime="' + datetime + '">', "</del>", "d");
edButtons[edButtons.length] = new edButton("ed_ins", "ins",
		'<ins datetime="' + datetime + '">', "</ins>", "s");
edButtons[edButtons.length] = new edButton("ed_img", "img", "", "", "m", -1);
edButtons[edButtons.length] = new edButton("ed_ul", "ul", "

\n”, “ \n\n”, “u”); edButtons[edButtons.length] = new edButton(“ed_ol”, “ol”, “\n”, “ \n\n”, “o”); edButtons[edButtons.length] = new edButton(“ed_li”, “li”, “\t10. “, “ \n”, “l”); edButtons[edButtons.length] = new edButton(“ed_code”, “code”, “", "”, “c”); edButtons[edButtons.length] = new edButton(“ed_more”, “more”, “<!–more–>”, “”, “t”, -1); edButtons[edButtons.length] = new edButton(“ed_listing”, “listing”, “”, “

”, “l”); edButtons[edButtons.length] = new edButton(“ed_samp”, “samp”, “", "”, “”); 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(b, a) { if (b.id == “ed_img”) { document .write(‘</input>’) } else if (b.id == “ed_link”) { document.write(‘</input>’) } else if(b.id == “ed_listing”){ document.write(‘</input>’) } else { document.write(‘</input>’) } } function edInsertListing(d, c){ currentListing = d.value.split(“<p class=\“listing\“>”).length; var selectedText = (d.value).substring(d.selectionStart, d.selectionEnd); var newText=”\n<p class=\“listing\“>Listing “+currentListing+”. </p>” + “\n<pre name=\“code\” class=\“java\“>\n”+selectedText+”\n</pre>” if(selectedText.length>0){ d.value = d.value.replace(selectedText, newText); } else{ d.value = d.value + newText; } } function edShowLinks() { var a = ‘' + quicktagsL10n.quickLinks + "”, b; for (b = 0; b ‘ + edLinks[b].display + “” } a += “”; document.write(a) } function edAddTag(a) { if (edButtons[a].tagEnd != “”) { edOpenTags[edOpenTags.length] = a; document.getElementById(edButtons[a].id).value = “/” + document.getElementById(edButtons[a].id).value } } function edRemoveTag(b) { for ( var a = 0; a 0) { return true } else { return false } } function edCloseAllTags() { var a = edOpenTags.length, b; for (b = 0; b -1) { var b = “”, a; if (edLinks[c].newWin == 1) { b = ‘ target=”_blank”’ } a = ‘” + edLinks[c].display + “”; d.selectedIndex = 0; edInsertContent(edCanvas, a) } else { d.selectedIndex = 0 } } function edSpell(c) { var e = “”, d, b, a; if (document.selection) { c.focus(); d = document.selection.createRange(); if (d.text.length > 0) { e = d.text } } else { if (c.selectionStart || c.selectionStart == “0”) { b = c.selectionStart; a = c.selectionEnd; if (b != a) { e = c.value.substring(b, a) } } } if (e == “”) { e = prompt(quicktagsL10n.wordLookup, “”) } if (e !== null && /^\w[\w ]*$/.test(e)) { window.open(“http://www.answers.com/” + escape(e)) } } function edToolbar() { document.write(‘<div id="ed_toolbar">’); for ( var a = 0; a ‘); document .write(‘</input>’); document.write(“</div>”) } function edInsertTag(d, c) { if (document.selection) { d.focus(); var e = document.selection.createRange(); if (e.text.length > 0) { e.text = edButtons[c].tagStart + e.text + edButtons[c].tagEnd } else { if (!edCheckOpenTags(c) || edButtons[c].tagEnd == “”) { e.text = edButtons[c].tagStart; edAddTag(c) } else { e.text = edButtons[c].tagEnd; edRemoveTag(c) } } d.focus() } else { if (d.selectionStart || d.selectionStart == “0”) { var b = d.selectionStart, a = d.selectionEnd, g = a, f = d.scrollTop; if (b != a) { d.value = d.value.substring(0, b) + edButtons[c].tagStart + d.value.substring(b, a) + edButtons[c].tagEnd + d.value.substring(a, d.value.length); g += edButtons[c].tagStart.length + edButtons[c].tagEnd.length } else { if (!edCheckOpenTags(c) || edButtons[c].tagEnd == “”) { d.value = d.value.substring(0, b) + edButtons[c].tagStart + d.value.substring(a, d.value.length); edAddTag(c); g = b + edButtons[c].tagStart.length } else { d.value = d.value.substring(0, b) + edButtons[c].tagEnd + d.value.substring(a, d.value.length); edRemoveTag(c); g = b + edButtons[c].tagEnd.length } } d.focus(); d.selectionStart = g; d.selectionEnd = g; d.scrollTop = f } else { if (!edCheckOpenTags(c) || edButtons[c].tagEnd == “”) { d.value += edButtons[c].tagStart; edAddTag(c) } else { d.value += edButtons[c].tagEnd; edRemoveTag(c) } d.focus() } } } function edInsertContent(d, c) { var e, b, a, f; if (document.selection) { d.focus(); e = document.selection.createRange(); e.text = c; d.focus() } else { if (d.selectionStart || d.selectionStart == “0”) { b = d.selectionStart; a = d.selectionEnd; f = d.scrollTop; d.value = d.value.substring(0, b) + c + d.value.substring(a, d.value.length); d.focus(); d.selectionStart = b + c.length; d.selectionEnd = b + c.length; d.scrollTop = f } else { d.value += c; d.focus() } } } function edInsertLink(d, c, b) { if (!b) { b = “http://” } if (!edCheckOpenTags(c)) { var a = prompt(quicktagsL10n.enterURL, b); if (a) { edButtons[c].tagStart = ‘’; edInsertTag(d, c) } } else { edInsertTag(d, c) } } function edInsertImage(b) { var a = prompt(quicktagsL10n.enterImageURL, “http://”); if (a) { a = ‘’; edInsertContent(j.Canvas, i) } }; j.Buttons[j.Buttons.length] = new edButton(a + “_strong”, “b”, “”, “”, “b”); j.Buttons[j.Buttons.length] = new edButton(a + “_em”, “i”, “”, “”, “i”); j.Buttons[j.Buttons.length] = new edButton(a + “_link”, “link”, “”, “”, “a”); j.Buttons[j.Buttons.length] = new edButton(a + “_block”, “b-quote”, “\n\n> “, “

\n\n”, “q”); j.Buttons[j.Buttons.length] = new edButton(a + “_del”, “del”, ‘’, “”, “d”); j.Buttons[j.Buttons.length] = new edButton(a + “_ins”, “ins”, ‘’, “”, “s”); j.Buttons[j.Buttons.length] = new edButton(a + “_img”, “img”, “”, “”, “m”, -1); j.Buttons[j.Buttons.length] = new edButton(a + “_ul”, “ul”, “\n”, “ \n\n”, “u”); j.Buttons[j.Buttons.length] = new edButton(a + “_ol”, “ol”, “\n”, “ \n\n”, “o”); j.Buttons[j.Buttons.length] = new edButton(a + “_li”, “li”, “\t47. “, “ \n”, “l”); j.Buttons[j.Buttons.length] = new edButton(a + “_code”, “code”, “", "”, “c”); j.Buttons[j.Buttons.length] = new edButton(a + “_more”, “more”, “<!–more–>”, “”, “t”, -1); j.Buttons[j.Buttons.length] = new edButton(a + “_listing”, “listing”, “<p class=\“listing\“>”, “</p>”, “l”); j.Buttons[j.Buttons.length] = new edButton(a + “_samp”, “samp”, “", "”, “”); e = document.createElement(“div”); e.id = a + “_qtags”; h = ‘<div id="' + a + '_toolbar">’; for (g = 0; g ‘; h += ‘</input></div>’; e.innerHTML = h; k.parentNode.insertBefore(e, k) }; Kod się posypał, ale olać to 😉 Generalnie sprawdź czy nie ma gdzie &gt; i &lt;, bo jakoś słabo się to interpretuje w syntaxhighlighterze.

Dodatkowe style

Modyfikujemy plik ze stylami CSS dla aktualnej skórki bloga.

Listing 2. Nowe wpisy w pliku css

.post pre {
	font-size: 0.8em;
	text-align: left;
	padding: 0.6em 0 0.8em 0.6em;
	margin: 0.3em 0 0.3em 0;
	background: #222;
	color: #fff;
	border-left: #ccc solid 2px;
	border-right: #ccc solid 2px;
	line-height: 1em;
	overflow-x: auto;
	font-family: Courier;
}
p.listing {
	background-color: #3D4648 !important;
	color: #979B94;
	margin: 0 0 0 0.5em;
	padding: 0.1em 0 0.1em 0.5em;
	width: 300px;
}
#sidebar p.listing {
	width: 80%;
	margin: 0;
}
#sidebar .syntaxhighlighter{
	margin: 0 1em 0 0;
}

Wszystko 😀