А поможете модернизировать скрипт HTML-editor-а?

[angella]

О чем речь: Знаете на некоторых сайтах/форумах разрешают оформлять в своем профиле раздел "Обо мне" с помощью html-кодов. Но при этом нельзя сделать предпросмотр - нужно сначала написать код, потом нажать сохранить и только тогда увидеть оформленный вариант. Разумеется всем хочется красивый профиль, но не все секут в html и в итоге пользователи мучаются с оформлением.

Ну и вооот, есть такой сайт HTML-editor в реальном времени - _http://htmledit.squarefree.com/
Он всем хорош, кроме того, что загружает результат в никак не оформленный iframe.
То есть в предпросмотре в этом HTML-editor-е порой пользователь видит совсем не то, что увидит потом в графе "Обо мне" потому что такие разделы как правило уже имеют свой css стиль. Например само окно с фиксированной шириной, а текст в нем по умолчанию по центру и шрифт такой же на на всем остальном сайте. И когда пользователь будет вставлять свой код, то он будет выглядеть иначе.

К чему все велось: Можно ли поставить себе на сайт такой же скрипт HTML-editor-а в реальном времени (или результат по кнопке), но чтобы результат кода был виден не в пустом безразмерном iframe, а в окне с заранее подготовленным стилем?

[Admin]

Можно даже гораздо проще:

Код:

<style type="text/css">
#input, #output { width: 100%; height: 70px; background: #def; border: none; margin: 0px; padding: 0px; }
</style>

<textarea id="input" onKeyUp="document.getElementById('output').innerHTML=this.value">
<h3>Добро пожаловать в HTML редактор!</h3>
<p>Например, абзац</p>
<a href="">А может быть и ссылка</a></textarea>

<br><br>

<div id="output"></div>

[angella]

Ну надо же

Спасибо большое!

[angella]

(30.08.2016 23:47:23)Admin писал(а):  Можно даже гораздо проще:

Код:

<style type="text/css">
#input, #output { width: 100%; height: 70px; background: #def; border: none; margin: 0px; padding: 0px; }
</style>

<textarea id="input" onKeyUp="document.getElementById('output').innerHTML=this.value">
<h3>Добро пожаловать в HTML редактор!</h3>
<p>Например, абзац</p>
<a href="">А может быть и ссылка</a></textarea>

<br><br>

<div id="output"></div>

Ещё кое-что хочу спросить. К этой штуке можно ли подключить "подсветку кода" типа вот этой _http://sauron.org.ua/post/1141 ? Я пробовала эту сделать, но когда подсветка стоит на input в output уже ничего не идет, предпросмотр не работает.

[Admin]

Скиньте в архиве код, который у Вас получился, посмотрю, что можно сделать.