Простой текстовый редактор на JavaScript

Иногда бывает необходимо в текстовом поле браузера набирать тексты содержащие несложное форматирование (например, форум). Приведенный ниже редактор используется на Новгородском сервере новостей (http://news.novgorod.ru/) для добавления и редактирования текста новости.

Я бы не рекомендовал использовать этот редактор в контент-менеджерах, для них есть более мощные редакторы, такие как HTML WordPad, RTE и tinyMCE.

Скачать в архиве. Посмотреть рабочую версию.

editor.htm

<HTML>
<HEAD>
<SCRIPT langauge="JavaScript">
<!--
var oldmsg;
var replace_count;
var span;
var error_span;
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos=textEl.caretPos;
caretPos.text=caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
}
else
textEl.value = text;
}
function insertIMAGE1(src) {
insertAtCaret(document.editform.msg,"[img]"+src+"[/img]")
}
function insertIMAGE() {
wnd=window.open("images.htm",'imagewindow', 'width=700,height=500', 'True');
}
function insertLINK1(str) {
var txt_range_obj = document.selection.createRange();
if (txt_range_obj.parentElement().tagName!="TEXTAREA")
alert("Для этой операции необходимо выделить участок текста.");
else
txt_range_obj.text="[url]"+str+"[href]"+txt_range_obj.text+"[/url]";
}
function insertLINK() {
var txt_range_obj = document.selection.createRange();
if (txt_range_obj.parentElement().tagName!="TEXTAREA")
alert("Для этой операции необходимо выделить участок текста.");
else {
wnd=window.open("",'linkwindow', 'width=300,height=50', 'True');
wnd.document.write("<HTML><HEAD><TITLE>Введите URL</TITLE></HEAD><BODY bgcolor=#C0C0C0>");
wnd.document.write("<form action=#><center>");
wnd.document.write("");
wnd.document.write("<input type=text name=url size=40 value='http://'><br><br>");
wnd.document.write("<input type=button onClick='window.opener.insertLINK1(document.forms[0].elements[0].value);window.close();' value='Ok' style='width:80px;'> ");
wnd.document.write("<input type=button onClick='window.close();' value='Отмена' style='width:80px;'>");
wnd.document.write("</center></form>");
wnd.document.write("</BODY></HTML>");
}
}
function insert(str1,str2) {
var txt_range_obj = document.selection.createRange();
if (txt_range_obj.parentElement().tagName!="TEXTAREA")
alert("Для этой операции необходимо выделить участок текста.");
else
txt_range_obj.text=str1+txt_range_obj.text+str2;
}
function str_replace(substr,newsubstr,str) {
replace_count=0;
while (str.indexOf(substr)>=0) {
str=str.replace(substr,newsubstr);
replace_count++;
}
return(str);
}
function Init() {
oldmsg="";
d=document.all;
var num=0;
for (i=0;i<d.length;i++) {
if (d[i].tagName=="SPAN") {
if (num==0) {error_span=d[i];num=1;}
else span=d[i]
}
}
window.setTimeout("pview();",1000);
}
function pview() {
var cnt_b,cnt_u,cnt_i,cnt_right,cnt_left,
cnt_center,cnt_big,cnt_small,cnt_justify;
var unt_b,unt_u,unt_i,unt_right,unt_left,
unt_center,unt_big,unt_small,cnt_justify;
// Замена символов #########################################################
var msg=document.editform.msg.value;
if (oldmsg==msg) {window.setTimeout("pview();",1000);return;}
else {oldmsg=msg;}
msg=str_replace("<","<",msg);
msg=str_replace(">",">",msg);
msg=str_replace("\n","<br>",msg);
msg=str_replace("(c)","©",msg);
// Заменяем теги ###########################################################
msg=str_replace("[b]", "<b>",msg);cnt_b=replace_count;
msg=str_replace("[/b]", "</b>",msg);unt_b=replace_count;
msg=str_replace("[u]", "<u>",msg);cnt_u=replace_count;
msg=str_replace("[/u]", "</u>",msg);unt_u=replace_count;
msg=str_replace("[i]", "<i>",msg);cnt_i=replace_count;
msg=str_replace("[/i]", "</i>",msg);unt_i=replace_count;
msg=str_replace("[left]", "<div align=left>",msg);cnt_left=replace_count;
msg=str_replace("[/left]", "</div>",msg);unt_left=replace_count;
msg=str_replace("[right]", "<div align=right>",msg);cnt_right=replace_count;
msg=str_replace("[/right]", "</div>",msg);unt_right=replace_count;
msg=str_replace("[center]", "<div align=center>",msg);cnt_center=replace_count;
msg=str_replace("[/center]", "</div>",msg);unt_center=replace_count;
msg=str_replace("[justify]", "<div align=justify>",msg);cnt_justify=replace_count;
msg=str_replace("[/justify]", "</div>",msg);unt_justify=replace_count;
msg=str_replace("[small]", "<small>",msg);cnt_small=replace_count;
msg=str_replace("[/small]", "</small>",msg);unt_small=replace_count;
msg=str_replace("[big]", "<big>",msg);cnt_big=replace_count;
msg=str_replace("[/big]", "</big>",msg);unt_big=replace_count;
msg=str_replace("[red]", "<br>      ",msg);
msg=str_replace("[hr]", "<hr>",msg);
// Заменяем img ############################################################
if (msg.length!=0) {
while (msg.indexOf("[img]")>=0 && msg.indexOf("[/img]")>msg.indexOf("[img]")) {
str1=msg.substring(0,msg.indexOf("[img]"));
str2=msg.substring(msg.indexOf("[/img]")+6,msg.length);
substring=msg.substring(msg.indexOf("[img]")+5,msg.indexOf("[/img]"));
msg=str1+"<img src='"+substring+"' alt='"+substring+"'>"+str2;
}
}
// Заменяем url ############################################################
if (msg.length!=0) {
while (msg.indexOf("[url]")>=0 && msg.indexOf("[href]")>msg.indexOf("[url]") && msg.indexOf("[/url]")>msg.indexOf("[href]")) {
str1=msg.substring(0,msg.indexOf("[url]"));
str2=msg.substring(msg.indexOf("[url]")+5,msg.indexOf("[href]"));
str3=msg.substring(msg.indexOf("[href]")+6,msg.indexOf("[/url]"));
str4=msg.substring(msg.indexOf("[/url]")+6,msg.length);
msg=str1+"<a target=_blank href='"+str2+"'>"+str3+"</a>"+str4;
}
while (msg.indexOf("[url]")>=0 && msg.indexOf("[/url]")>msg.indexOf("[url]")) {
str1=msg.substring(0,msg.indexOf("[url]"));
str2=msg.substring(msg.indexOf("[/url]")+6,msg.length);
substring=msg.substring(msg.indexOf("[url]")+5,msg.indexOf("[/url]"));
msg=str1+"<a target=_blank href='"+substring+"'>"+substring+"</a>"+str2;
}
}
// Выводим ошибки ##########################################################
error="";
if (cnt_b!=unt_b) error+="<LI>Количество тегов [b] ("+cnt_b+") не соответствует количеству тегов [/b] ("+unt_b+")";
if (cnt_u!=unt_u) error+="<LI>Количество тегов [u] ("+cnt_u+") не соответствует количеству тегов [/u] ("+unt_u+")";
if (cnt_i!=unt_i) error+="<LI>Количество тегов [i] ("+cnt_i+") не соответствует количеству тегов [/i] ("+unt_i+")";
if (cnt_right!=unt_right) error+="<LI>Количество тегов [right] ("+cnt_right+") не соответствует количеству тегов [/right] ("+unt_right+")";
if (cnt_left!=unt_left) error+="<LI>Количество тегов [left] ("+cnt_left+") не соответствует количеству тегов [/left] ("+unt_left+")";
if (cnt_center!=unt_center) error+="<LI>Количество тегов [center] ("+cnt_center+") не соответствует количеству тегов [/center] ("+unt_center+")";
if (cnt_justify!=unt_justify) error+="<LI>Количество тегов [justify] ("+cnt_justify+") не соответствует количеству тегов [/justify] ("+unt_justify+")";
if (cnt_small!=unt_small) error+="<LI>Количество тегов [small] ("+cnt_small+") не соответствует количеству тегов [/small] ("+unt_small+")";
if (cnt_big!=unt_big) error+="<LI>Количество тегов [big] ("+cnt_big+") не соответствует количеству тегов [/big] ("+unt_big+")";
if (error!="")
error_span.innerHTML="<font color=red><b>В тексте найдены слудующие ошибки: </b>"+error+"</font>";
else
error_span.innerHTML="";
span.innerHTML=msg;
window.setTimeout("pview();",1000);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Init();">
<table width=620 bgcolor=#C0C0C0><form name=editform action=add.php method=post><tr><td>
<textarea name=msg cols=60 rows=10 onClick="storeCaret(this);pview();" ONSELECT="storeCaret(this);" ONKEYUP="storeCaret(this);"></textarea>
</td><td valign=top>
<table border=0 cellspacing=0><tr>
<td><a href="javascript:insert('[left]','[/left]');"><img src=/services/meditor/ico2.gif border=0 width=24 height=24 alt="Выровнять по левому краю"></a></td>
<td><a href="javascript:insert('[center]','[/center]');"><img src=/services/meditor/ico1.gif border=0 width=24 height=24 alt="Выровнять по центру"></a></td>
<td><a href="javascript:insert('[right]','[/right]');"><img src=/services/meditor/ico8.gif border=0 width=24 height=24 alt="Выровнять по правому краю"></a></td>
<td><a href="javascript:insert('[justify]','[/justify]');"><img src=/services/meditor/ico9.gif border=0 width=24 height=24 alt="Выровнять по ширине"></a></td>
</tr><tr>
<td><a href="javascript:insert('[big]','[/big]');"><img src=/services/meditor/ico3.gif border=0 width=24 height=24 alt="Увеличить шрифт"></a></td>
<td><a href="javascript:insert('[small]','[/small]');"><img src=/services/meditor/ico4.gif border=0 width=24 height=24 alt="Уменьшить шрифт"></a></td>
<td><a href="javascript:insertIMAGE();"><img src=/services/meditor/ico11.gif border=0 width=24 height=24 alt="Вставить изображение"></a></td>
<td><a href="javascript:insertLINK();"><img src=/services/meditor/ico12.gif border=0 width=24 height=24 alt="Вставить ссылку"></a></td>
</tr><tr>
<td><a href="javascript:insert('[b]','[/b]');"><img src=/services/meditor/ico5.gif border=0 width=24 height=24 alt="Жирный"></a></td>
<td><a href="javascript:insert('[i]','[/i]');"><img src=/services/meditor/ico6.gif border=0 width=24 height=24 alt="Курсивный"></a></td>
<td><a href="javascript:insert('[u]','[/u]');"><img src=/services/meditor/ico7.gif border=0 width=24 height=24 alt="Подчеркнутый"></a></td>
<td><a href="javascript:insert('[red]','');"><img src=/services/meditor/ico10.gif border=0 width=24 height=24 alt="Красная строка"></a></td>
</tr></table>
</td></tr></form></table><br>

<SPAN></SPAN>
<table width=620 border=1 cellspacing=0 cellpadding=3>
<tr><td bgcolor=#C0C0C0>Предосмотр:</td></tr>
<tr><td valign=top bgcolor=#F0F0F0>

<SPAN>
</SPAN>
</td></tr></table>

Download this code: editor.htm

images.htm

<HTML>
<HEAD>
<TITLE>Библиотека изображений</TITLE>
</HEAD>
<BODY>
<a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico1.gif');window.close();"><img src=/services/meditor/ico1.gif border=0></a>
<a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico2.gif');window.close();"><img src=/services/meditor/ico2.gif border=0></a>
<a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico3.gif');window.close();"><img src=/services/meditor/ico3.gif border=0></a>
<a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico4.gif');window.close();"><img src=/services/meditor/ico4.gif border=0></a>
<a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico5.gif');window.close();"><img src=/services/meditor/ico5.gif border=0></a>
<a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico6.gif');window.close();"><img src=/services/meditor/ico6.gif border=0></a>
<a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico7.gif');window.close();"><img src=/services/meditor/ico7.gif border=0></a>
<a href="javascript:window.opener.insertIMAGE1('/services/meditor/ico8.gif');window.close();"><img src=/services/meditor/ico8.gif border=0></a>
</BODY>

Download this code: images.htm

Простой текстовый редактор на JavaScript

Простой текстовый редактор на JavaScript

Простой текстовый редактор на JavaScript

editor.htm

images.htm

Подписаться

Комментарии