Сегодняшний урок расскажет Вам как очень просто добавить JavaScript WYSIWYG редактор к любым текстовым полям.
За основу данного урока возьмем простой PHP + MySQL сайт, который идет в комплекте вместе с курсом Евгения.
Добавить полноценный JavaScript WYSIWYG редактор оказалось не так уж сложно. В данном примере я использовал TinyMCE.
Для начала давайте определимся куда эти поля нам необходимо добавлять. Нам необходима возможность редактора в следующих файлах:
- new_lesson.php (добавление нового урока)
- edit_lesson.php (редактирование урока)
- edit_text.php (редактирование текстов на страничках)
Прежде всего нам необходимо загрузить все исходники TinyMCE (Вам ничего качать не надо, в исходниках к этому уроку данные файлы уже имеются - они находятся в папке tinymce, которая в свою очередь находится в папке admin).
Далее открываем каждый файл и между тегами <head></head> вставляем следующий код:
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
elements : "elm1" // тут прописывается название элемента, который мы будем добавлять к текстовому полю.
});
</script>
Обязательно необходимо проверить путь к файлу tiny_mce.js. Как Вы видите мы обозвали элемент "elm1". Теперь когда мы его присвоим текстовому полю с помощью аттрибута id, редактор будет знать в каком месте ему необходимо загружаться. Это мы проделываем для того, чтоб не все поля становились WYSIWYG, а только необходимые.
Вот как это выглядит:
<p>
<label>Ведите краткое описание урока с тэгами абзацев
<textarea name="description" id="elm1" cols="40" rows="5"></textarea>
</label>
</p>
Проделываем такую операцию со всеми полями, в которых нам необходима функция WYSIWYG редактирования.
Данный пример показывает в действие самый простой набор инструментов для редактирования. В следующих уроках Вы узнаете как расширить возможности нашего редактора.
Надеюсь, урок был для Вас полезным. Всего наилучшего, уважаемые посетители!