Редагування текстових елементів., HTML, XML, DHTML, Інтернет-технології, статті

У версію 5.5, всенародно улюбленого браузера ;), ввели дуже цікава властивість contentEditable. Використовуючи цю властивість до будь-якого елементу HTML-Документа, ви можете його (елемент) Редагувати прямо у вікні браузера (elementID.contentEditable=true). А найголовніше те, що після внесення змін, можна відключити редагування і насолоджуватися результатом не перезавантажуючи сам документ (elementID.contentEditable=false). Тепер Internet Explorer можна використовувати як простенький WYSIWYG-Редактор.

Приклад використання редагування елемента:

<html><head><title> Редагуємо DIV 
</head>
<body bgcolor=white text=black>
<div contentEditable=true> Цей текст редагований.
 </div>
</body></html>

Також, ви можете створити кнопку яка буде перемикати режими редагування (включити / відключити). У цьому вам допоможе властивість isContentEditable, Яке повертає true якщо об’єкт можна редагувати, абоfalse якщо не можна.

Додамо в наш приклад кнопку (включити / відключити):

<html><head><title> Редагуємо DIV 
<script language=jscript>
function onOff(){
 sButton.value = 
 (eDiv2.isContentEditable) ? "Включити редагування" : "Відключити редагування";
 eDiv2.contentEditable =
  (eDiv2.isContentEditable)
   ? false
   : true;
}
</script>
</head>
<body bgcolor=white text=black>
<div id=eDiv2
 contentEditable=false> Цей текст редагований. 
<p><button id=sButton
 onClick=onOff(); style=width:240px;> включити редагування 
</body></html>

Але це не все! Для зміни накреслення редагованого тексту, ви можете використовувати клавіатурні скорочення. Не повний список представлений в таблиці:

Не повний список клавіатурних скорочень.
Ctrl + B напівжирний (тег STRONG).
Ctrl + I курсив (тег EM).
Ctrl + U підкреслений (тег U).
Ctrl + K створити посилання (тег А).
ENTER параграф (тег P)
Shift + ENTER переклад рядка (тег BR)
Ctrl + Alt + C його величність copyright ©

Картинки можна втавлять по copy -> paste

 

А тепер, можете увійти на будь-який сайт в інтернеті (до одного – пожартувати, до ворога – нашкодити), і в адресному рядку вашого браузера (як я помітив на початку, це має бути IE5.5 і вище) написати наступну сходинку, і натиснути ENTER:

javascript:void(document.body.contentEditable = true);

Після цього «переробляєте» сторіночку так як вам заманеться, а готову «роботу» виводимо на принтер.

Для подальших редизайном можна створити JS-закладку состаящий з однієї наступній рядки:

javascript:void(document.body.contentEditable = (document.body.isContentEditable) ? false : true);

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*