Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Мини HTML редактор на JScript

17 июня 2001 г.

Как смастерить на JavaScript или JScript нечто вроде мини HTML редактора?

Задача — смастерить на JavaScript или JScript нечто вроде мини HTML редактора. Поразмыслив, я остановился на JScript, так как только Internet Explorer 4+ имеет необходимые встроенные средства для работы с текстом на странице. Объекты selection (единственный дочерний объект у document) и TextRange позволяют производить с куском текста всевозможные манипуляции: удалять, вставлять, заменять, перемещать, искать текст на странице.

Итак, с вариантом скриптового языка разобрались. Теперь необходимо написать скрипт, который бы осуществлял нужное мне действие — обрамление выделенного в textarea текста HTML тегами. Вот, что у меня вышло:

/*
written by alexander shurkayev <alshur@ya.ru> | http://htmlcssjs.ru
*/

function fnWrapWithTags(txt, sTag, sClass){
    var sHTML = "<" + sTag;
    sHTML += (sClass) ? " class=\"" + sClass + "\"" : "";
    sHTML += (">" +txt + "</" + sTag + ">");
    return sHTML;
}

function fnEmphatic(){
    var txt = this.toString();
    var sTag = "em";
    return fnWrapWithTags(txt, sTag, "");
}

String.prototype.em = fnEmphatic;

function fnVeryEmphatic(){
    var txt = this.toString();
    var sTag = "strong";
    return fnWrapWithTags(txt, sTag, "");
}

String.prototype.strong = fnVeryEmphatic;

function fnCode(){
    var txt = this.toString();
    var sTag = "code";
    return fnWrapWithTags(txt, sTag, "");
}

String.prototype.code = fnCode;

function fnParagraph(){
    var txt = this.toString();
    var sTag = "p";
    return fnWrapWithTags(txt, sTag, "");
}

String.prototype.p = fnParagraph;

function fnHighlight(){
    var txt = this.toString();
    var sTag = "span";
    var sClass = "high";
    return fnWrapWithTags(txt, sTag, sClass);
}

String.prototype.highlight = fnHighlight;

function fnApplyTag(sTag){
    // Спасибо Александру Карповичу <alexandr@cybermail.net> за найденные баги
    if (!document.all && !document.all.item) return; // «Уходим, уходим, уходим», если это не IE4+
    var oSelTxt = document.selection.createRange();
    var sSelTxt = oSelTxt.text;
    if (sSelTxt) oSelTxt.text = eval("sSelTxt."+sTag+"()");
}

Последняя функция (fnApplyTag(sTag)) самая важная. Делает она следующее: считывает выделенный текст и обрамляет его тегами, которые задаются в аргументе (в данном случае это p, code, em, strong или span). И не имеет значения, в какой части документа текст выделен — обрамляться тегами будет любой текст на странице(!).

Пример вызова функции fnApplyTag(sTag):

<a href="javascript:fnApplyTag('code');">[CODE]</a>

Что касается использования в вышеприведённом скрипте свойства prototype у объекта String, то читайте об этом свойстве здесь.

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

LiveInternet