l2k Oct 27 2008 at 17:34

Подсветка текста в «TextArea»

4 min

20K

Эта статья покажет, как в современных браузерах можно сделать подсветку текста в поле редактирования (WYSIWYG).
Пример можно посмотреть, в google.docs или на некоторых продвинутых форумах.

Уверен, многим это будет интересно.

Атрибут contentEditable и параметр designMode

Именно contentEditable или designMode и делает для нас всю основную «грязную» работу.

Если этот атрибут поставить в тег, то всё, что внутри тега, становится автоматически редактируемым.

<html><head></head><body>
  <div contentEditable="true"><b>C</b>ontent<u>!!!</u></div>
</body></html>

работающий пример

Этот атрибут не поддерживается сейчас некоторыми старыми браузерами (например, FireFox 2.0). Но есть более «глобальный» параметр страницы, который сейчас поддерживают все браузеры, который нам может помочь — designMode.

По этому я разберу именно его.

Особенности designMode

Это на самом деле это свойство document, которое позволяет редактировать HTML-контент. Отличием от contentEditable является глобальность. То есть он привязан ко всему документу, а не к конкретному тегу.

По этому, нам необходимо создать в нашей странице локальный document, который и будет полностью редактируемым. Для этого мы воспользуемся iframe.

<html><head>
<script language="javascript">
	<!--
/*Превращение iframe в область редактирования см. ниже (следующий JS код)*/
	//-->
</script></head>
<body>
	<iframe id="frm" ></iframe>
</body></html>

Чтобы превратить iframe в область редактирования нам необходимо:
1) Получить указатель на iframe document (contentDocument).
2) Оформить в нём html документ для работы.
3) Установить режим редактирования designMode.

Для этого я написал небольшую наглядную библиотечку.

  var NewTextArea={

    frame:{},

    document:{},

    window:{},

    init:function(frame){

      NewTextArea.frame=frames[frame]?frames[frame]:document.getElementById(frame);//IE, Opera - frames.document, другие - ById.document



      if (!NewTextArea.frame){

        alert("Ошибка ID");

        return -1;

      }

      

      //1) получить указатель

      NewTextArea.document=NewTextArea.frame.contentDocument || NewTextArea.frame.document;

      if (!NewTextArea.document){

        alert("Ошибка iframe");

        return -2;

      }

      

      NewTextArea.window=NewTextArea.frame.contentWindow || NewTextArea.frame.window;

      if (!NewTextArea.window){

        alert("window");

        return -2;

      }



      //2) Оформить iframe HTML документ

      var HTML = "<html><head></head><body>";
      HTML += "<u>Document</u> <b>HTML</b>";
      HTML += "</body></html>"

      

      NewTextArea.document.open();

      NewTextArea.document.write(HTML);

      NewTextArea.document.close();

      

      //3) Установить designMode

      if (NewTextArea.document.designMode){

        NewTextArea.document.designMode='on';

      }else{

        alert("Ошибка designMode");

        return -3;

      }

    }

  }



* This source code was highlighted with Source Code Highlighter.



Собственно, нам остаётся инициализировать сам iframe в секции onload.

...<body onload="NewTextArea.init('frm')">
	<iframe id="frm" ></iframe>
</body>
работающий пример



Вот и всё. Единственное замечание — этот скрипт не будет работать в IE локально — только с сервера. 



Разные вкусные доработки


Добавим клавиши, с помощью которых мы сможем делать B, I, U.

...<body onload="NewTextArea.init('frm')">
	<iframe id="frm" ></iframe>
	<input type="button" value="B" 
onclick="NewTextArea.window.focus();NewTextArea.document.execCommand('bold',null,'')" />

	<input type="button" value="I" 
onclick="NewTextArea.window.focus();NewTextArea.document.execCommand('italic',null,'')" />

	<input type="button" value="U" 
onclick="NewTextArea.window.focus();NewTextArea.document.execCommand('underline',null,'')" />

</body>
работающий пример



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



И ещё — добавим стили нашего текстового поля. Для этого необходимо доработать наш Javascript:

...
	var HTML = "<html><head><style>";
	HTML += "html,body{margin:0px;padding:0px;background:black;color:white;font-size:20px}";
	HTML += "p,div,span{margin:0px;padding:0px}";
	HTML += "</style></head><body>";
	HTML += "<u>Document</u> <b>HTML</b>";
	HTML += "</body></html>";			
...


Ещё можно сделать подгрузку стиля тексового поля из файла .css, вставив соответствующий тег <link ...> вместо <style>.




UPD: Кстати, только что нашел ещё одну хабра-статью на эту тему. Кому интересно, почитайте.

Tags:

Hubs:

JavaScript