Вход Регистрация

Самый простой wysiwyg текстовый редактор на javascript (код)

Как сделать простой (даже может самый простейший) WYSIWYG текстовый редактор, в котором набираемый текст отображается в том виде, в котором он будет после сохранения. Смысл такого редактора заключается в том, что бы дать сразу представление об отображаемом вводимом тексте, как это сделано в Ворде.

В Интернете существует множество готовых подобных WYSIWYG редакторов, однако они имеют очень "тяжелый" вес и сложность. Для комментариев, например, или для форм, требования к которым предъявляются жесткие, текстовый редактор должен иметь максимальную. Легкость и простоту.
Тем не менее, простой текстовый редактор найти значительно сложней.

Здесь я хочу представить максимально простой WYSIWYG текстовый редактор написанный на javascript. Именно javascript дает нам хорошие возможности в написании кода такого редактора.

Код (вся страница) самого простого текстового редактора WYSIWYG написанного на javascript

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>WYSIWYG текстовый редактор</title>
 <script type="text/javascript">
  function Init()
    {document.getElementById("iframe_redactor").contentWindow.document.designMode = "On";}
  function doStyle(style)
    {document.getElementById("iframe_redactor").contentWindow.document.execCommand(style, false, null);}
  function doURL()
    {var mylink = prompt("Enter a URL:", "http://");
  if ((mylink != null) && (mylink != "")) {
     document.getElementById("iframe_redactor").contentWindow.document.execCommand("CreateLink",false,mylink);
  }
 }
 </script>

 </head>
   <body onLoad="Init();">
   <button onClick="doStyle('bold');">Жирный</button>
   <button onClick="doStyle('italic');">Курсив</button>
   <button onClick="doStyle('underline');">Подчеркнутый</button>
   <button onClick="doStyle('justifyleft');">Выровнять слева</button><br />
   <button onClick="doStyle('justifycenter');">Выравнять по центру</button>
   <button onClick="doStyle('justifyright');">Выровнять справа</button>
   <button onClick="doURL();">Ссылка</button><br />
   WYSIWYG текстовый редактор:<br /><iframe id="iframe_redactor" ></iframe>

 </body>
 </html>

Для захвата содержимого в iframe текста можно использовать такой код:

 var myIFrame = document.getElementById("iframe_redactor"),
     content = myIFrame.contentWindow.document.body.innerHTML;

где content – будет содержание в iframe с айди iframe_redactor

Вот такой оказался очень простым в реализации WYSIWYG редактор, который легко подстроить под свой дизайн и добавить по необходимости разные свойства и кнопки.

Категория статьи: Веб-программирование | Просмотров: 11176 | Добавлена: 26.11.2012

Почему Вы еще не прокомментировали?
Оставьте свой комментарий! Весь Интернет уже заждался!

Ваше Имя

Муж. Жен. Как Вас величать?

Антиспам защита

– Напишите название этого сайта по-русски
(если Вы не в курсе, сайт называется "РапидАп")

Текст комментария

Вывод комментарий:

Константин говорит:

> Что бы передать данные в базу данных SQL используйте передачу методом GET или POST файлу PHP, который и будет обрабатывать полученные данные. Алексей, а можно подробнее, как передать методом POST в требуемый php-файл, с js у меня совсем тяжко.. Спасибо.

Ответ:

Содержание HTML файла. JavaScript можно положить в отдельный файл.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>WYSIWYG текстовый редактор</title>
<script type="text/javascript">

function Init()
{document.getElementById("iframe_redactor").contentWindow.document.designMode = "On";}
function doStyle(style)
{document.getElementById("iframe_redactor").contentWindow.document.execCommand(style, false, null);}
function doURL()
{var mylink = prompt("Enter a URL:", "http://");
if ((mylink != null) && (mylink != "")) {
  document.getElementById("iframe_redactor").contentWindow.document.execCommand("CreateLink",false,mylink);
  }
}

 function getXMLHTTPRequest()
{
        var req = false;
        try {
        req = new XMLHttpRequest();
        } catch(err) {
        try {
        req = new ActiveXObject("MsXML2.XMLHTTP");
        } catch(err) {
        try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(err) {
        req = false;
        }
        }
        }
  return req;
}

function addTextToBase ()
{ 
  var myIFrame = document.getElementById("iframe_redactor"), content = myIFrame.contentWindow.document.body.innerHTML;
  var myReq = getXMLHTTPRequest();
  content = encodeURIComponent(content);
  var params = "text="+content;
  document.getElementById('showmsg').innerHTML = '';
  function setstate()
  {
  if ((myReq.readyState == 4)&&(myReq.status == 200)) {
  var resvalue = myReq.responseText;
  if (resvalue == 'ok') {
  document.getElementById('showmsg').innerHTML = '<font color="#009933">Спасибо, добавлено!<font>';
  } else {
  document.getElementById('showmsg').innerHTML = '<font color="#FF0000">'+resvalue+'<font>';
  }
  }
  } 
  myReq.open("POST", "script.php", true);
  myReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  myReq.setRequestHeader("Content-lenght", params.length);
  myReq.setRequestHeader("Connection", "close");
  myReq.onreadystatechange = setstate;
  myReq.send(params);
}
</script>

</head>
<body onLoad="Init();">
<button onClick="doStyle('bold');">Жирный</button>
<button onClick="doStyle('italic');">Курсив</button>
<button onClick="doStyle('underline');">Подчеркнутый</button>
<button onClick="doStyle('justifyleft');">Выровнять слева</button><br />
<button onClick="doStyle('justifycenter');">Выравнять по центру</button>
<button onClick="doStyle('justifyright');">Выровнять справа</button>
<button onClick="doURL();">Ссылка</button><br />
  WYSIWYG текстовый редактор:<br /><iframe id="iframe_redactor" ></iframe>
<button onClick="addTextToBase ()">Кнопка добавить</button>
<p id="showmsg" ></p>

</body>
</html>

Содержание PHP файла script.php в строке:

myReq.open("POST", "script.php", true);

Не забудьте указать правильный путь к файлу

<?php
if (isset($_POST['text'])) {
        $text = iconv("UTF-8", "CP1251", $_POST['text']);
     if (strlen($text) < 20) echo "Мало текста!";
  elseif (!preg_match('/[А-Яа-я]/',$text)) echo "А по-русски?";
          elseif (preg_match('/https?:/',$text)) echo "Обнаружена ссылка!";
               else {
                    /* Добавить в MySQL базу и прочая обработка текста */
                     echo "ok";
                      }
}
?>

Вадим говорит:

спасибо! очень лаконично!!!))

kserks говорит:

Спасибо, как раз искал как можно проще. ТАк же мне нравится как отображаются у вас комментарии, как раз искал, что нибудь что бы было минималистично и красиво.

Алексей говорит:

Что бы передать данные в базу данных SQL используйте передачу методом GET или POST файлу PHP, который и будет обрабатывать полученные данные.

касым говорит:

А как передать данные в базу данных?

Принц Кирилл говорит:

Отлично! Очень дооооооооолго искал!

Княгиня Ольга говорит:

именно так и есть: Спасибо за такой простой и работающий код редактора, это как раз то, что я искал целый день. Хотелось найти очень, очень простой редактор, где все понятно и который я смог бы отредактировать под свои нужды

Принц Костя говорит:

Спасибо очень полезный пост!

Программист говорит:

Спасибо за такой простой и работающий код редактора, это как раз то, что я искал целый день. Хотелось найти очень, очень простой редактор, где все понятно и который я смог бы отредактировать под свои нужды

Https://dentberg.ru/uslugi/implantologiya/

Установка импланта зуба на https://dentberg.ru/uslugi/implantologiya/.

dentberg.ru
Группа компаний ИНТЕГРУС

Создание локальной сети в офисе с нуля или при модернизации Группа компаний ИНТЕГРУС Петербург

integrus.ru