Иногда бывает необходимо в текстовом поле браузера набирать тексты содержащие несложное форматирование (например, форум). Приведенный ниже редактор используется на Новгородском сервере новостей
) для добавления и редактирования текста новости.
Я бы не рекомендовал использовать этот редактор в контент-менеджерах, для них есть более мощные редакторы, такие как HTML WordPad, RTE и tinyMCE.
1. <HTML>
2. <HEAD>
3. <SCRIPT langauge="JavaScript">
4. <!--
5. var oldmsg;
6. var replace_count;
7. var span;
8. var error_span;
9.
10. function storeCaret (textEl) {
11. if (textEl.createTextRange)
12. textEl.caretPos = document.selection.createRange().duplicate();
13. }
14.
15. function insertAtCaret (textEl, text) {
16. if (textEl.createTextRange && textEl.caretPos) {
17. var caretPos=textEl.caretPos;
18. caretPos.text=caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
19. }
20. else
21. textEl.value = text;
22. }
23.
24. function insertIMAGE1(src) {
25. insertAtCaret(document.editform.msg,"[img]http://"+src+"[/img]")
26. }
27.
28. function insertIMAGE() {
29. wnd=window.open("images.htm",'imagewindow', 'width=700,height=500', 'True');
30. }
31.
32. function insertLINK1(str) {
33. var txt_range_obj = document.selection.createRange();
34. if (txt_range_obj.parentElement().tagName!="TEXTAREA")
35. alert("Для этой операции необходимо выделить участок текста.");
36. else
37. txt_range_obj.text="[url=http://"+str+"[href]"+txt_range_obj.text+"]"+str+"[href]"+txt_range_obj.text+"[/url]";
38. }
39.
40. function insertLINK() {
41. var txt_range_obj = document.selection.createRange();
42. if (txt_range_obj.parentElement().tagName!="TEXTAREA")
43. alert("Для этой операции необходимо выделить участок текста.");
44. else {
45. wnd=window.open("",'linkwindow', 'width=300,height=50', 'True');
46. wnd.document.write("<HTML><HEAD><TITLE>Введите URL</TITLE></HEAD><BODY bgcolor=#C0C0C0>");
47. wnd.document.write("<form action=#><center>");
48. wnd.document.write("");
49. wnd.document.write("<input type=text name=url size=40 value='http://'><br><br>");
50. wnd.document.write("<input type=button onClick='window.opener.insertLINK1(document.forms[0].elements[0].value);window.close();’ value=’Ok’ style=’width:80px;’> ");
51. wnd.document.write("<input type=button onClick='window.close();' value='Отмена' style='width:80px;'>");
52. wnd.document.write("</center></form>");
53. wnd.document.write("</BODY></HTML>");
54. }
55. }
56.
57. function insert(str1,str2) {
58. var txt_range_obj = document.selection.createRange();
59. if (txt_range_obj.parentElement().tagName!="TEXTAREA")
60. alert("Для этой операции необходимо выделить участок текста.");
61. else
62. txt_range_obj.text=str1+txt_range_obj.text+str2;
63. }
64.
65. function str_replace(substr,newsubstr,str) {
66. replace_count=0;
67. while (str.indexOf(substr)>=0) {
68. str=str.replace(substr,newsubstr);
69. replace_count++;
70. }
71. return(str);
72. }
73.
74. function Init() {
75.
76. oldmsg="";
77. d=document.all;
78.
79. var num=0;
80. for (i=0;i<d.length;i++) {
81. if (d[i].tagName=="SPAN") {
82. if (num==0) {error_span=d[i];num=1;}
83. else span=d[i]
84. }
85. }
86.
87. window.setTimeout("pview();",1000);
88. }
89.
90. function pview() {
91. var cnt_b,cnt_u,cnt_i,cnt_right,cnt_left,
92. cnt_center,cnt_big,cnt_small,cnt_justify;
93. var unt_b,unt_u,unt_i,unt_right,unt_left,
94. unt_center,unt_big,unt_small,cnt_justify;
95.
96. // Замена символов #########################################################
97. var msg=document.editform.msg.value;
98.
99. if (oldmsg==msg) {window.setTimeout("pview();",1000);return;}
100. else {oldmsg=msg;}
101.
102. msg=str_replace("<","<",msg);
103. msg=str_replace(">",">",msg);
104. msg=str_replace("\n","<br>",msg);
105. msg=str_replace("(c)","©",msg);
106.
107. // Заменяем теги ###########################################################
108. msg=str_replace("[b]", "<b>",msg);cnt_b=replace_count;
109. msg=str_replace("[/b]", "</b>",msg);unt_b=replace_count;
110. msg=str_replace("[u]", "<u>",msg);cnt_u=replace_count;
111. msg=str_replace("[/u]", "</u>",msg);unt_u=replace_count;
112. msg=str_replace("[i]", "<i>",msg);cnt_i=replace_count;
113. msg=str_replace("[/i]", "</i>",msg);unt_i=replace_count;
114. msg=str_replace("[left]", "<div align=left>",msg);cnt_left=replace_count;
115. msg=str_replace("[/left]", "</div>",msg);unt_left=replace_count;
116. msg=str_replace("[right]", "<div align=right>",msg);cnt_right=replace_count;
117. msg=str_replace("[/right]", "</div>",msg);unt_right=replace_count;
118. msg=str_replace("[center]", "<div align=center>",msg);cnt_center=replace_count;
119. msg=str_replace("[/center]", "</div>",msg);unt_center=replace_count;
120. msg=str_replace("[justify]", "<div align=justify>",msg);cnt_justify=replace_count;
121. msg=str_replace("[/justify]", "</div>",msg);unt_justify=replace_count;
122. msg=str_replace("[small]", "<small>",msg);cnt_small=replace_count;
123. msg=str_replace("[/small]", "</small>",msg);unt_small=replace_count;
124. msg=str_replace("[big]", "<big>",msg);cnt_big=replace_count;
125. msg=str_replace("[/big]", "</big>",msg);unt_big=replace_count;
126. msg=str_replace("[red]", "<br> ",msg);
127. msg=str_replace("[hr]", "<hr>",msg);
128.
129. // Заменяем img ############################################################
130. if (msg.length!=0) {
131. while (msg.indexOf("[img]http://")>=0 && msg.indexOf("[/img]")>msg.indexOf("[img]http://")) {
132. str1=msg.substring(0,msg.indexOf("[img]"));
133. str2=msg.substring(msg.indexOf("[/img]")+6,msg.length);
134. substring=msg.substring(msg.indexOf("[img]http://")+5,msg.indexOf("[/img]"));
135. msg=str1+"<img src='"+substring+"' alt='"+substring+"'>"+str2;
136. }
137. }
138.
139. // Заменяем url ############################################################
140. if (msg.length!=0) {
141. while (msg.indexOf("[url=http://")>=0 && msg.indexOf("[href]")>msg.indexOf("[url]") && msg.indexOf("]")>=0 && msg.indexOf("[href]")>msg.indexOf("[url]") && msg.indexOf("[/url]")>msg.indexOf("[href]")) {
142. str1=msg.substring(0,msg.indexOf("[url=http://"));
143. str2=msg.substring(msg.indexOf("[url]")+5,msg.indexOf("[href]"));
144. str3=msg.substring(msg.indexOf("[href]")+6,msg.indexOf("]"));
143. str2=msg.substring(msg.indexOf("[url]")+5,msg.indexOf("[href]"));
144. str3=msg.substring(msg.indexOf("[href]")+6,msg.indexOf("[/url]"));
145. str4=msg.substring(msg.indexOf("[/url]")+6,msg.length);
146. msg=str1+"<a target=_blank href='"+str2+"'>"+str3+"</a>"+str4;
147. }
148.
149. while (msg.indexOf("[url=http://")>=0 && msg.indexOf("]")>=0 && msg.indexOf("[/url]")>msg.indexOf("[url=http://")) {
150. str1=msg.substring(0,msg.indexOf("[url]"));
151. str2=msg.substring(msg.indexOf("]")) {
150. str1=msg.substring(0,msg.indexOf("[url]"));
151. str2=msg.substring(msg.indexOf("[/url]")+6,msg.length);
152. substring=msg.substring(msg.indexOf("[url=http://")+5,msg.indexOf("]")+5,msg.indexOf("[/url]"));
153. msg=str1+"<a target=_blank href='"+substring+"'>"+substring+"</a>"+str2;
154. }
155. }
156.
157. // Выводим ошибки ##########################################################
158. error="";
159. if (cnt_b!=unt_b) error+="<LI>Количество тегов [b] ("+cnt_b+") не соответствует количеству тегов [/b] ("+unt_b+")";
160. if (cnt_u!=unt_u) error+="<LI>Количество тегов [u] ("+cnt_u+") не соответствует количеству тегов [/u] ("+unt_u+")";
161. if (cnt_i!=unt_i) error+="<LI>Количество тегов [i] ("+cnt_i+") не соответствует количеству тегов [/i] ("+unt_i+")";
162. if (cnt_right!=unt_right) error+="<LI>Количество тегов [right] ("+cnt_right+") не соответствует количеству тегов [/right] ("+unt_right+")";
163. if (cnt_left!=unt_left) error+="<LI>Количество тегов [left] ("+cnt_left+") не соответствует количеству тегов [/left] ("+unt_left+")";
164. if (cnt_center!=unt_center) error+="<LI>Количество тегов [center] ("+cnt_center+") не соответствует количеству тегов [/center] ("+unt_center+")";
165. if (cnt_justify!=unt_justify) error+="<LI>Количество тегов [justify] ("+cnt_justify+") не соответствует количеству тегов [/justify] ("+unt_justify+")";
166. if (cnt_small!=unt_small) error+="<LI>Количество тегов [small] ("+cnt_small+") не соответствует количеству тегов [/small] ("+unt_small+")";
167. if (cnt_big!=unt_big) error+="<LI>Количество тегов [big] ("+cnt_big+") не соответствует количеству тегов [/big] ("+unt_big+")";
168.
169. if (error!="")
170. error_span.innerHTML="<font color=red><b>В тексте найдены слудующие ошибки: </b>"+error+"</font>";
171. else
172. error_span.innerHTML="";
173.
174. span.innerHTML=msg;
175. window.setTimeout("pview();",1000);
176. }
177. // -->
178. </SCRIPT>
179. </HEAD>
180. <BODY onLoad="Init();">
181. <table width=620 bgcolor=#C0C0C0><form name=editform action=add.php method=post><tr><td>
182. <textarea name=msg cols=60 rows=10 onClick="storeCaret(this);pview();" ONSELECT="storeCaret(this);" ONKEYUP="storeCaret(this);"></textarea>
183. </td><td valign=top>
184. <table border=0 cellspacing=0><tr>
185. <td><a href="javascript:insert('[left]‘,’[/left]‘);"><img src=/services/meditor/ico2.gif border=0 width=24 height=24 alt="Выровнять по левому краю"></a></td>
186. <td><a href="javascript:insert('[center]‘,’[/center]‘);"><img src=/services/meditor/ico1.gif border=0 width=24 height=24 alt="Выровнять по центру"></a></td>
187. <td><a href="javascript:insert('[right]‘,’[/right]‘);"><img src=/services/meditor/ico8.gif border=0 width=24 height=24 alt="Выровнять по правому краю"></a></td>
188. <td><a href="javascript:insert('[justify]‘,’[/justify]‘);"><img src=/services/meditor/ico9.gif border=0 width=24 height=24 alt="Выровнять по ширине"></a></td>
189. </tr><tr>
190. <td><a href="javascript:insert('[big]‘,’[/big]‘);"><img src=/services/meditor/ico3.gif border=0 width=24 height=24 alt="Увеличить шрифт"></a></td>
191. <td><a href="javascript:insert('[small]‘,’[/small]‘);"><img src=/services/meditor/ico4.gif border=0 width=24 height=24 alt="Уменьшить шрифт"></a></td>
192. <td><a href="javascript:insertIMAGE();"><img src=/services/meditor/ico11.gif border=0 width=24 height=24 alt="Вставить изображение"></a></td>
193. <td><a href="javascript:insertLINK();"><img src=/services/meditor/ico12.gif border=0 width=24 height=24 alt="Вставить ссылку"></a></td>
194. </tr><tr>
195. <td><a href="javascript:insert('[b]‘,’[/b]‘);"><img src=/services/meditor/ico5.gif border=0 width=24 height=24 alt="Жирный"></a></td>
196. <td><a href="javascript:insert('[i]‘,’[/i]‘);"><img src=/services/meditor/ico6.gif border=0 width=24 height=24 alt="Курсивный"></a></td>
197. <td><a href="javascript:insert('[u]‘,’[/u]‘);"><img src=/services/meditor/ico7.gif border=0 width=24 height=24 alt="Подчеркнутый"></a></td>
198. <td><a href="javascript:insert('[red]‘,”);"><img src=/services/meditor/ico10.gif border=0 width=24 height=24 alt="Красная строка"></a></td>
199. </tr></table>
200.
201. </td></tr></form></table><br>
202. <!-- В этом SPANе выводятся ошибки -->
203. <SPAN></SPAN>
204. <table width=620 border=1 cellspacing=0 cellpadding=3>
205. <tr><td bgcolor=#C0C0C0>Предосмотр:</td></tr>
206. <tr><td valign=top bgcolor=#F0F0F0>
207. <!-- В этом SPANе выводится предосмотр -->
208. <SPAN>
209. </SPAN>
210. </td></tr></table>
images.htm
1. <HTML>
2. <HEAD>
3. <TITLE>Библиотека изображений</TITLE>
4. </HEAD>
5. <BODY>
6. <a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico1.gif');window.close();"><img src=/services/meditor/ico1.gif border=0></a>
7. <a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico2.gif');window.close();"><img src=/services/meditor/ico2.gif border=0></a>
8. <a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico3.gif');window.close();"><img src=/services/meditor/ico3.gif border=0></a>
9. <a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico4.gif');window.close();"><img src=/services/meditor/ico4.gif border=0></a>
10. <a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico5.gif');window.close();"><img src=/services/meditor/ico5.gif border=0></a>
11. <a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico6.gif');window.close();"><img src=/services/meditor/ico6.gif border=0></a>
12. <a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico7.gif');window.close();"><img src=/services/meditor/ico7.gif border=0></a>
13. <a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico8.gif');window.close();"><img src=/services/meditor/ico8.gif border=0></a>
14. </BODY>
