使用jQuery编写一个UBB编辑器

最近因为工作需要，需要一个UBB的在线网页编辑器，从网上找了一些，效果都不太理想，而且对FIREFOX的支持性不是太好，于是决定自己写个算了，支持IE&FIREFOX，功能我只是根据我自己需要写了一些，代码倒不是太复杂，也算是拿过来顺便对jQuery练练手，欢迎有兴趣的朋友一起探讨。

代码如下：

// -----------------------------------------------
2

// jQuery版UBB编辑器(ie&ff)
3

// by 孙红军(andyran#gmail.com)
4

// 2007/5/10 19:13
5

// -----------------------------------------------
6

$(function() {
8

$(\'#ubb_bold\').click(function() { insertUBB(\'b\'); });
10

$(\'#ubb_italic\').click(function() { insertUBB(\'i\'); });
11

$(\'#ubb_underline\').click(function() { insertUBB(\'u\'); });
12

$(\'#ubb_alignleft\').click(function() { insertUBB(\'align=left\'); });
13

$(\'#ubb_aligncenter\').click(function() { insertUBB(\'align=center\'); });
14

$(\'#ubb_alignright\').click(function() { insertUBB(\'align=right\'); });
15

$(\'#ubb_quote\').click(function() { insertUBB(\'QUOTE\'); });
16

$(\'#ubb_font\').change(function() { insertUBB(\'font=\'+$(this).val()); });
17

$(\'#ubb_size\').change(function() { insertUBB(\'size=\'+$(this).val()); });
18

$(\'#ubb_color\').change(function() { insertUBB(\'color=\'+$(this).val()); });
19

$(\'#ubb_url\').click(function() {
21

var p1 = prompt("显示链接的文本.\n如果为空，那么将只显示超级链接地址","");
22

if (p1 != null) {
23

var p2 = prompt("http:// 超级链接","http://");
24

if (p2 != \'\' && p2 != \'http://\') {
25

if (p1 != \'\') {
26

$(\'#Content\').parseHtml(\'[url=\'+p2+\']\'+p1+\'[/url]\');
27

}
28

else {
29

$(\'#Content\').parseHtml(\'[url]\'+p2+\'[/url]\');
30

}
31

}
32

}
33

});
34

$(\'#ubb_mail\').click(function() {
36

var p1 = prompt("显示链接的文本.\n如果为空，那么将只显示你的 Email 地址","");
37

if (p1 != null) {
38

var p2 = prompt("email 电子邮件地址","xxx@domain.com");
39

if (p2 != \'\') {
40

if (p1 != \'\') {
41

$(\'#Content\').parseHtml(\'[email=\'+p2+\']\'+p1+\'[/email]\');
42

}
43

else {
44

$(\'#Content\').parseHtml(\'[email]\'+p2+\'[/email]\');
45

}
46

}
47

}
48

});
49

$(\'#ubb_img\').click(function() {
52

var p = prompt(\'请先将图片上传到您的图库中，然后将图片地址拷下粘贴在此：\', \'http://\');
53

if (p == null || $.trim(p) == \'\' || p.toLowerCase() == \'http://\')
54

return;
55

$(\'#Content\').parseHtml(\'[IMG]\' + p + \'[/IMG]\');
56

});
57

$(\'#ubb_flash\').click(function() {
59

var p = prompt("flash 动画文件的地址","http://");
60

if (p == null || $.trim(p) == \'\' || p.toLowerCase() == \'http://\')
61

return;
62

$(\'#Content\').parseHtml(\'[flash=420,300]\' + p + \'[/flash]\');
63

});
64

$(\'#ubb_mov\').click(function() {
66

var p = prompt("视频文件的地址","http://");
67

if (p == null || $.trim(p) == \'\' || p.toLowerCase() == \'http://\')
68

return;
69

$(\'#Content\').parseHtml(\'[mp=380,330]\' + p + \'[/mp]\');
70

});
71

$(\'body\').append($(face));
73

$(\'#ubb_face\').click(function() {
76

$(face).show();
77

});
78

});
80

var insertUBB = function (html) {
82

var val = $(\'#Content\').selection();
83

if (val == \'\') {
84

alert(\'请选择文字\');
85

return false;
86

}
87

else {
88

var end = html;
89

if (html.indexOf(\'=\') >= 0)
90

end = html.substring(0,html.indexOf(\'=\'));
91

$(\'#Content\').parseHtml(\'[\'+html+\']\' + val + \'[/\'+end+\']\');
92

}
93

}
94

function insertFace(id) {
96

$(\'#Content\').parseHtml(\'[face src=face\'+id+\'.gif][/face]\');
97

$(face).hide();
98

}
99

100

var face = document.createElement(\'div\');
101

$(face)
102

.attr(\'id\', \'ubb_face_img\')
103

.css( {
104

display : \'none\',
105

position: \'absolute\',
106

visibility: \'visible\',
107

top: \'90px\',
108

left: \'470px\',
109

border: \'1px solid #666\'
110

});
111

112

for (var i=0 ; i < 30 ; i++) {
113

img = \'<img onclick="insertFace(\'+i+\')" border="0" src="face/face\' + i + \'.gif">\';
114

if (i%6 == 5)
115

$(face).append(img+\'<br />\');
116

else
117

$(face).append(img);
118

}
119

120

121

$.fn.extend({
122

selection: function() {
123

var txt = \'\';
124

var doc = this.get(0).document;
125

if (doc) {
126

var sel = doc.selection.createRange();
127

if (sel.text.length > 0)
128

txt = sel.text;
129

}
130

else if (this.get(0).selectionStart || this.get(0).selectionStart == \'0\') {
131

var s = this.get(0).selectionStart;
132

var e = this.get(0).selectionEnd;
133

if (s != e) {
134

txt = this.get(0).value.substring(s, e);
135

}
136

}
137

return $.trim(txt);
138

},
139

parseHtml: function(t) {
140

var doc = this.get(0).document;
141

if (doc) {
142

this.get(0).focus();
143

doc.selection.createRange().collapse;
144

this.get(0).document.selection.createRange().text = t;
145

}
146

else if (this.get(0).selectionStart || this.get(0).selectionStart == \'0\') {
147

var s = this.get(0).selectionStart;
148

var e = this.get(0).selectionEnd;
149

var val = this.get(0).value;
150

var start = val.substring(0,s);
151

var end = val.substring(e);
152

this.get(0).value = start + t + end;
153

}
154

}
155

})
156

完整代码下载请点这里，注意需要自己改下jquery链接，这个包里不包含jquery的代码