В прошлой статье я писал о том, где стоит работать фрилансеру, а вернее на кого. Сегодня же я решил, что у меня есть несколько самостоятельных работ, которые могут понадобиться начинающим программистам. Т.к. я сам являюсь новичком в этом деле, то мне иногда приходится рыскать по сети в поисках нужного скрипта, чтобы выполнить срочный заказ. Поэтому надеюсь, что данная статья окажется кому-нибудь полезной.
Ну, что же. Приступим!
Итак, сегодня мы с вами начнем писать простенький редактор для форума. Который будет выглядеть примерно так.
Для демонстрации работы этого редактора нам придется написать три страницы. Первая будет содержать непосредственно сам редактор и кнопку "Сохранить". Вторая страница будет сохранять все принятое в файл и выдавать ссылку на следующую страницу, которая будет показывать все в нужном виде.
Редактор
Создаем index.html, в заголовке пишем, все что нам необходимо. К примеру:
<html> <head> <title>Редактор на JavaScript</title> <link rel="stylesheet" type="text/css" href="./style.css" />
Здесь мы вставляем файл css, который отвечает за то, как наш редактор будет выглядеть. (Если кому интересно посмотреть листинг css-файла, пишите)
Дальше нам понадобится подключить библиотеку jQuery для удобства и эффектов.
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
После этого у нас будет находится сам скрипт редактора, но т.к. я (на самом деле, не я первый, не я последний) сначала пишу внешнюю сторону скрипта, а потом только код, то я позволю себе пока попустить этот блок и перейти дальше.
<script>
...
...
</script>
</head>
<body>
<div id="editor">
<div id="work_pan">
<ul class="buttons">
<li class="sel">
<select id="fontFamily">
<option value=""></option>
<option style="font-family:Arial;" value="Arial">Arial</option>
<option style="font-family:Arial Black;" value="Arial Blac">Arial Black</option>
<option style="sont-family:Arial Narrow;" value="Arial Narrow">Arial Narrow</option>
<option style="font-family: Book Antiqua;" value="Book Antiqua">Book Antiqua</option>
<option style="font-family:Century Gothic;" value="Century Gothic">Century Gothic</option>
<option style="font-family:Comic Sans MS;" value="Comic Sans MS">Comic Sans MS</option>
<option style="font-family:Courier New;" value="Courier New">Courier New</option>
<option style="font-family:Franklin Gothic Medium;" value="Franklin Gothic Medium">Franklin Gothic Medium</option>
<option style="font-family:Garamond;" value="Garamond">Garamond</option>
<option style="font-family:Georgia;" value="Georgia">Georgia</option>
<option style="font-family:Impact;" value="Impact">Impact</option>
<option style="font-family:Lucida Console;" value="Lucida Console">Lucida Console</option>
<option style="font-family:Lucida Sans Unicode;" value="Lucida Sans Unicode">Lucida Sans Unicode</option>
<option style="font-family:Microsoft Sans Serif;" value="Microsoft Sans Serif">Microsoft Sans Serif</option>
<option style="font-family:Palatino;" value="Palatino">Palatino</option>
<option style="font-family:Tahoma;" value="Tahoma">Tahoma</option>
<option style="font-family:Times New Roman;" value="Times New Roman">Times New Roman</option>
<option style="font-family:Trebuchet MS;" value="Trebuchet MS">Trebuchet MS</option>
<option style="font-family:Verdana;" value="Verdana">Verdana</option>
</select>
</li>
<li class="sel">
<select id="fontSize">
<option value=""></option>
<option style="font-size:8pt" value="1">1</option>
<option style="font-size:10pt;" value="2">2</option>
<option style="font-size:12pt;" value="3">3</option>
<option style="font-size:14pt;" value="4">4</option>
<option style="font-size:18pt;" value="5">5</option>
<option style="font-size:24pt;" value="6">6</option>
<option style="font-size:36pt;" value="7">7</option>
</select>
</li>
<li><a href="javascript:showColor('font_color');" id="font_color"><img alt="Цвет" src="images/buttons/font_color.png" /></a></li>
</ul>
Теперь попытаюсь это объяснить. Значит сам скрипт мы пока пропускаем, как уже было сказано выше. Теперь мы видим тело страницы. Давайте поместим наш редактор в DIV с ID="editor", чтобы к нему можно было легко обращаться. Потом всю рабочую область мы поместим в DIV с ID="work_pan". Здесь у нас будут находится меню и текстовое поле. Почему я все это помещаю еще в один DIV, станет ясно потом, когда мы доберемся до блока смайликов.
Дальше мы пишем первую полоску меню, где можно будет выбрать формат текста. Первые два элемента SELECT вполне понятны и объяснения не требуют. Третий элемент меню - это ссылка, нажатие на которую должно будет показать нам окошко для выбора цвета, поэтому мы сразу даем название будущей функции showColor().
Вторая полоска меню:
<ul class="buttons">
<li><a href="javascript:insTag('[b]','[/b]', true);"><img alt="Жирный" src="images/buttons/bold.png" /></a></li>
<li><a href="javascript:insTag('[i]','[/i]', true);"><img alt="Курсив" src="images/buttons/italic.png" /></a></li>
<li><a href="javascript:insTag('[u]','[/u]', true);"><img alt="Подчеркнутый" src="images/buttons/underline.png" /></a></li>
<li><a href="javascript:insTag('[s]','[/s]', true);"><img alt="Зачеркнутый" src="images/buttons/strike.png" /></a></li>
<li class="separator"></li>
<li><a href="javascript:insTag('[left]','[/left]', true);"><img alt="По левому краю" src="images/buttons/align_left.png" /></a></li>
<li><a href="javascript:insTag('[center]','[/center]', true);"><img alt="По центру" src="images/buttons/align_center.png" /></a></li>
<li><a href="javascript:insTag('[right]','[/right]', true);"><img alt="По правому краю" src="images/buttons/align_right.png" /></a></li>
<li><a href="javascript:insTag('[indent]','[/indent]', true);"><img alt="Увеличить отступ" src="images/buttons/indent.png" /></a></li>
<li class="separator"></li>
<li><a href="javascript:pre_ins2('link');" id="link"><img alt="Ссылка" src="images/buttons/link.png" /></a></li>
<li><a href="javascript:pre_ins('image');" id="image"><img alt="Изображение" src="images/buttons/picture.png" /></a></li>
<li><a href="javascript:pre_ins('video');" id="video"><img alt="Видео" src="images/buttons/video.png" /></a></li>
<li><a href="javascript:pre_ins2('email');" id="email"><img alt="E-mail" src="images/buttons/email.png" /></a></li>
<li><a href="javascript:pre_ins('media');" id="media"><img alt="Meida" src="images/buttons/media.png" /></a></li>
<li class="separator"></li>
<li><a href="javascript:insTag('[quote]','[/quote]', true);"><img alt="Цитата" src="images/buttons/quote.png" /></a></li>
<li><a href="javascript:insTag('[code]','[/code]',true);"><img alt="Код" src="images/buttons/code.png" /></a></li>
<li><a href="javascript:show_smiles();"><img alt="Смайлики" src="images/buttons/emoticons.png" /></a></li>
</ul>
Во второй полосе мы размещаем кнопки, которые будут добавлять жирность, курсив, подчеркивание, зачеркивание и т.д. Для функционирования всех этих кнопок нам понадобится всего 4pre функции:
- insTag()
- pre_ins()
- pre_ins2()
- show_smiles()
Итак, разберем эти функции.
insTag() нам нужна для того, чтобы вставлять тэги, кторые мы укажем как параметры. Т.е. к примеру, insTag('[b]','[/b]'). Причем, этой функции я решил добавить еще один параметр, который может принимать значения true, false или какая-нибудь строка, которая, будет вставляться между тегами. Если указан третий параметр и он равен true то курсор после вставки тегов, скрипт будет ставить между тегами. Если третий парамерт строка или не указан, то курсор после последнего вставленного символа. Хотя третий параметр можно было бы упростить.
pre_ins() - функция, которая выводит окошко с запросом URL некоего ресурса. Может принимать только один параметр - ID элемента. Это необходимо для того, чтобы окошко выводилось под кнопкой. А также у нас будет два объекта, которые будут содержать для каждого элемента определенные значения.
pre_ins2() - почти идентична предыдущей функции, за одним исключением - вызывает окошко не с один, а с двумя полями.
show_smiles() - последняя функция, которая не принимает никаких параметров, а только выводит блок со смайликами, по нажатию на которые в текстовое поле будут вставляться определенные теги.
Идем дальше.
<form action="save.php" method="post"> <textarea id="text" name="text" cols=50 rows=7></textarea><br /><br /> </form>
Как вы догадались, это само текстовое поле для ввода текста, куда мы все и будем вставлять.
</div>
Здесь у нас заканчивается DIV с ID="work_pan".
Дальше мы огранизовываем блок смайликов:
<div id="smiles">
<div id="smiles_header">
<a href="javascript:show_smiles();" class="close"></a><h3>Смайлики</h3>
</div>
<div id="smiles_content">
<ul class="smile">
<li><a href="javascript:insTag(' :sport_boxing: ','');"><img src="images/sport_boxing.gif" /></a></li>
<li><a href="javascript:insTag(' :new_russian: ','');"><img src="images/new_russian.gif" /></a></li>
<li><a href="javascript:insTag(' :alcoholic: ','');"><img src="images/alcoholic.gif" /></a></li>
<li><a href="javascript:insTag(' :brunette: ','');"><img src="images/brunette.gif" /></a></li>
</ul>
</div>
</div>
Здесь, я думаю, объяснения не требуются.
Теперь можно создать кнопку "Сохранить" и закончить нашу страницу.
</div> <button onclick="document.forms[0].submit();">Сохранить</button> </body> </html>
Конечно, кнопку сохранения можно было организовать иначе, но почему-то в тот момент, мне захотелось сделать именно так, а не иначе. Может в этом даже был какой-то смысл :)
На этом я с вами сегодня прощаюсь в силу того, что за окном уже глубокая ночь, а завтра, т.е. уже сегодня, надо рано вставать и ехать на работу. Продолжение будет обязательно. Скорее всего завтра вы его уже сможете прочитать.
Пока-пока. Хорошего настроения!
Комментариев нет:
Отправить комментарий