В версию 5.5, всенародно любимого браузера ;), ввели очень
интересное свойство contentEditable. Используя это свойство
к любому элементу HTML-документа, вы можете его (элемент)
редактировать прямо в окне браузера (elementID.contentEditable=true).
А самое главное то, что после внесения изменений, можно отключить редактирование
и наслаждаться результатом не перезагружая сам документ (elementID.contentEditable=false).
Теперь Internet Explorer можно использовать как простенький WYSIWYG-редактор.
Пример использования редактирования элемента:
<html><head><title>
Редактируем DIV </title>
</head>
<body bgcolor=white text=black>
<div contentEditable=true>
Этот текст редактируемый.
</div>
</body></html>
Также, вы можете создать кнопку которая будет переключать режимы
редактирования (включить/отключить). В этом вам поможет свойство
isContentEditable, которое возвращает true если объект
можно редактировать, или false если нельзя.
Добавим в наш пример кнопку (включить/отключить):
<html><head><title>
Редактируем DIV </title>
<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>
Этот текст редактируемый.</div>
<p><button id=sButton
onClick=onOff(); style=width:240px;>
включить редактирование</button>
</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);
|
