Pull to refresh

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

JavaScript
Эта статья покажет, как в современных браузерах можно сделать подсветку текста в поле редактирования (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:contentEditabletextareabolditalicunderlinecolorjavascriptiframeweb 2.0визуальный редакторdesignModeWYSIWYG
Hubs: JavaScript
Total votes 64: ↑55 and ↓9+46
Views18K

Popular right now