Как сделать визуальный редактор на JavaScript
Наверняка, Вы много раз сталкивались с визуальными редакторами, позволяющими достаточно удобно формировать внешний вид страниц, либо каких-то сообщений, например, на форуме. Причём не с BB-кодами, а сразу получая конкретный результат. Этих редакторов достаточно много в Интернете. Один из самых популярных - это TinyMCE, однако, я сторонник собственных скриптов и считаю, что для каждой задачи должно быть своё решение, а не универсальное. Поэтому в этой статье я расскажу, как создать визуальный редактор на JavaScript.
Сразу привожу достаточно хорошо прокомментированный код:
<form name="myform" action="#" method="post" onsubmit="return save()">
<p>
<input type="hidden" id="content" name="content" value="" />
</p>
<script type="text/javascript">
// Вывод кнопок редактирования
document.write("<input type='button' value='B' onclick='setBold()' />");
document.write("<input type='button' value='I' onclick='setItal()' />");
document.write("<br />");
document.write("<iframe scrolling='no' frameborder='no' src='#' id='frameId' name='frameId'></iframe>"); // Добавляем iframe
/* В зависимости от браузера получаем доступ к созданному фрейму */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
/* Создаём код пустой HTML-страницы */
iHTML = "<html><head></head><body style='background-color: yellow;'></body></html>";
iDoc.open(); // Открываем фрейм
iDoc.write(iHTML); // Добавляем написанный код в фрейм
iDoc.close(); // Закрываем фрейм
iDoc.designMode = "on"; // Включаем режим редактирования фрейма
/* Функции для задания внешнего вида выделенного текста
Полный набор возможных команд: http://javascript.itsoft.ru/execcom/execCommands.html */
function setBold() {
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
function setItal() {
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
function save() {
/* Сохранение HTML-кода в поле hidden, чтобы потом можно было передать полученный HTML-код в скрипт-обработчик */
document.getElementById("content").value = iDoc.body.innerHTML;
return true;
}
</script>
<p>
<input type="submit" value="Отправить" />
</p>
</form>
На первый взгляд, кажется, что код очень сложный. И так оно и есть, но если рассмотреть его по базовым элементам, то ничего сложного нет. Есть обычная форма и поле hidden, куда сохраняется получившийся в редакторе HTML-код. Сам редактор - это обычный фрейм, то есть обычная HTML-страница, в которой мы можем писать текст (designMode = "on"). А различные форматирования создаются с помощью метода execCommand(), который выполняет указанную в параметре команду. А уж создать новые кнопки и прикрепить к ним аналогичные обработчики, думаю, что не составит для Вас труда.
В этом скрипте нет ничего лишнего, только самое главное и основное, и его можно брать за основу для создания собственного визуального редактора на JavaScript, в котором не будет ничего лишнего, а только то, что нужно Вам.
-
Создано 11.07.2012 11:35:42
-
Михаил Русаков
Комментарии (25):
Спасибо Михаил, отличная штука, сам пользуюсь HTML Box. Но теперь, есть над чем поработать.
Ответить
Почему то у меня не получается получить данные в php. Я сделал следующее: 1. Создал файл data.php: <?php $strHeading = "<h1>Текст, " .$_POST["content"]. "</h1>"; ?> <html> <body> <? echo $strHeading; ?> </body> </html> 2. Потом в вашем html файле прописал следущее: <form name="myform" action="data.php" method="post"> Однако никаких записей в data.php не получил.
Ответить
Для того, чтобы отправлять, нужно написать в form onsubmit="return save()". В этой save() сделать сохранение (которое уже есть в статье) в hidden и вернуть true, тогда форма отправится с данными.
Ответить
Не получается с form onsubmit="return save()" Я поставил ее так <form name="myform" onsubmit="return save()" action="data.php" method="post"> Но все равно не работает!
Ответить
Вы функцию save() вообще написали?
Ответить
Извиняюсь не писал. Дело в том что я не разбираюсь в js. Мне просто очень понравилась ваша идея использовать вместо громоздких редакторов, простой код. Могли бы вы сюда скинуть полный код который позволял бы отправлять текст из формы этого урока, в базу данных или в другую страницу php. Сам я чайник в js.
Ответить
Дописал код в статье.
Ответить
Ура заработало! Респект вам.
Ответить
Скрипт хорошо работает! Спасибо вам за это. У меня только один вопрос. Если закачивать напрямую данные из этого редактора в Базу Данных, то не возникнут проблемы с безопасностью?
Ответить
Возникнут, особенно, если их потом ещё и выводить куда-нибудь на страницу. Поэтому надо пропускать через htmlspecialchars(), либо допускать только некоторые теги для использования.
Ответить
Здравствуйте! Сделал так: echo "<h1>" . $_POST[htmlspecialchars("content")] . "</h1>"; Правильно? И еще при выводе текста код выходит такой: <div>Строка1</div><div>Строка2</div> можно ли заменить <div> на <p>? То есть чтобы выходило так: <p>Строка1</p><p>Строка2</p> Заранее благодарю.
Ответить
Первая часть неправильная, надо $_POST пропускать через эту функцию, а не какую-то бессмысленную строку. Заменить можно, для этого есть str_replace().
Ответить
Спасибо за str_replace(). Можно ли вместо htmlspecialchars использовать strip_tags($mytext, '<p><i><b>')? И этим обезопасить сайт.
Ответить
Можно.
Ответить
Спасибо вам большое! Я поставил ссылку на ваш сайт здесь - tendey.kz/ru/.
Ответить
Редактор работает хорошо. Только не знаю, как сделать скрипт для изменении данных. То есть чтобы можно было изменять набранный текст, который сохранен в Базе Данных.
Ответить
Для обычных полей <input> я сделал через value='$peremennaya'. Но для визуального редактора это не подошло.
Ответить
iHTML = "<html><head></head><body style='background-color: yellow;'></body></html>"; - внутрь body добавляйте контент, который необходимо будет отправить.
Ответить
Здравствуйте Михаил! Пожалуйста помоги мне я уже весь нэт перевернул но все равно не получается. Я создал админ панель для моего html сайта управление меню и другое все сделал и работает но проблема заключается в добавлении новых страниц и редакции существующих. Как внедрить редактор для свободного редактирования и добавления страниц желательно TinyMCE потому что она в joomla работает супер но мне joomla не нужна. Если ты сделаешь по этому поводу видео курс то я буду тебе благодарен и обязательно поставлю твои материалы на мой сайт с сcылкой на автора.
Ответить
Я вам уже задавал подобный вопрос ещё давно но ответа не было к сожалению, очень прошу ответь мне.
Ответить
в ближайшее время такой курс не планируется. Но,если вы знаете php и js,внедрить визуальный редактор,используя документацию на офф.сайте редактора - труда не составит
Ответить
Спасибо, штука крутая, но можно сделать рядом с кнопками В и І галочки поставить нужно же пользователю знать включен или выключен параметр кусива или полужирного?
Ответить
Здраствуйте, я создал два html файла один пустой(art.htm) и другой с скриптом(edit.htm) так как я незнаю js я скопировал скрипт сайта и вставил в edit.htm и в action="art.htm" прописал art.htm и запустил но он несработал в других местах нечего неменял.
Ответить
Здраствуйте, я создал два html файла один пустой(art.htm) и другой с скриптом(edit.htm) так как я незнаю js я скопировал скрипт сайта и вставил в edit.htm и в action="art.htm" прописал art.htm и запустил но он несработал в других местах нечего неменял.
Ответить
Здравствуйте, а такой же визуальный редактор можно сделать с помощью jquery? Спасибо!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.