ignati [dot] com

23.03

Wordpress Hack: Automatic List on Quicktags

Posted in Wordpress by admin

This hack is useful when you making many ordered/unordered list from writing panel (via quicktags) on wordpress admin. Just block all text that you want to be a list and click ol/ul button, then javascript will search every line and insert list tags (li) and also insert ordered/unordered list tag (ol/ul) automatically. It’s mean just one click to making a list.

Why? Sometimes i feel sick when using default quicktags (cause i don’t like to use RTE), i need to block every line one by one and click “li” button then close it with ol/ul tag. Because that i need a solution for this and after searching many website, i almost give up until i found a small codes by Henrik Gustafsson. The code structure is similar to wordpress quicktags so i try to implement it to quicktags code. With trial and error now i’m success to integrate it with the default quicktags. I’ve try it with many browser like Firefox, Opera and IE without any problem so here is the hack in just 2 steps.

1. Copy this code and paste it on the bottom of quicktags.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

function edInsertListTag(myField, i) {
	//IE support
	if (document.selection) {
		myField.focus();
	    sel = document.selection.createRange();
		if (sel.text.length > 0) {
            // Create an array from selected text
            var selarray=sel.text;
            selarray = selarray.split("\n");
            // Create the list with start tag, list items and end tag
            var liststr = edButtons[i].tagStart + "\n";
            for (j=0; j<selarray.length; j++) {
                // Remove unwanted line break in IE
                    selarray[j] = selarray[j].replace("\r","");
                // Dont create list items for empty rows
                if (!(selarray[j] == "")) { 
                    liststr = liststr + "\t<li>" + selarray[j] + "</li>\n";
                }
            }
            sel.text = liststr + edButtons[i].tagEnd;
    	}
		else {
			if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
				sel.text = edButtons[i].tagStart;
				edAddTag(i);
			}
			else {
				sel.text = edButtons[i].tagEnd;
				edRemoveTag(i);
			}
		}
		myField.focus();
	}
	//MOZILLA/NETSCAPE support
	else if (myField.selectionStart || myField.selectionStart == '0') {
		var startPos = myField.selectionStart;
		var endPos = myField.selectionEnd;
		var cursorPos = startPos;
		var scrollTop = myField.scrollTop;
 
		if (startPos != endPos) {
            var beforestr = myField.value.substring(0, startPos);
            var selection = myField.value.substring(startPos, endPos);
            var afterstr = myField.value.substring(endPos, myField.value.length);
            // Create array with list items
            var selarray=selection.split("\n");
            var j=0;
            // Insert UL or OL and LI tags
            var liststr = edButtons[i].tagStart + "\n";
            for (j=0; j<selarray.length; j++) {
                // Don't create list items of empty rows
                if (!(selarray[j] == "")) {
                    liststr = liststr + "\t<li>" + selarray[j] + "</li>\n";
                }
            }
            myField.value = beforestr + liststr + edButtons[i].tagEnd +afterstr;
        	cursorPos += liststr.length + edButtons[i].tagEnd.length;
		}
		else {
			if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
				myField.value = myField.value.substring(0, startPos) 
				              + edButtons[i].tagStart
				              + myField.value.substring(endPos, myField.value.length);
				edAddTag(i);
				cursorPos = startPos + edButtons[i].tagStart.length;
			}
			else {
				myField.value = myField.value.substring(0, startPos) 
				              + edButtons[i].tagEnd
				              + myField.value.substring(endPos, myField.value.length);
				edRemoveTag(i);
				cursorPos = startPos + edButtons[i].tagEnd.length;
			}
		}
		myField.focus();
		myField.selectionStart = cursorPos;
		myField.selectionEnd = cursorPos;
		myField.scrollTop = scrollTop;
	}
	else {
		if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
			myField.value += edButtons[i].tagStart;
			edAddTag(i);
		}
		else {
			myField.value += edButtons[i].tagEnd;
			edRemoveTag(i);
		}
		myField.focus();
	}
}

2. Find this code on quicktags.js

1
2
3

	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 + '" />');
	}

after that, add this code

1
2
3
4
5
6

	else if (button.id == 'ed_ul') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertListTag(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_ol') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertListTag(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}

So easy right..? But if you don’t want to edit by yourself, just download my Wordpress Quicktags with Automatic List Included.

Just a small note!

  1. You can find quicktags.js on your wp-includes/js directory.
  2. I’ve try this with MovableType (v3) when i’m trying to use that engine a year ago and it works like a charm. So i guess this hack will works perfectly to Drupal quicktags or others quicktags.

If you like this post then please consider to subscribe my feed. You can also have new post directly to your inbox if you prefer subscribe by email.

Related posts:

Comments »

No comments yet.

Leave a comment?

Name (required):
E-mail (required - never shown publicly):
URI:
Your Comment (smaller size | larger size):