Онлайн HTML редактор очень популярен в настоящее время. С помощью него легко вносить небольшие изменения и корректировки в HTML коды. Мой любимый скрипт онлайн HTML редактора — это TryIt Editor.
Вашему вниманию, я представляю скрипт Онлайн HTML редактор для сайта для размещения внутри сайта, с помощью которого можно продемонстрировать пользователю HTML или CSS наглядно прямо на странице. Это очень удобно для вебмастеров, где в статье нужно не просто дать код, но и предоставить возможность пользователю самому внести определенные изменения.
Выглядит это так:
Установить окно HTML редактора на сайт очень просто.
JavaScript
Между тегами <head> </head> страницы, где будет установлен редактор, вставляем следующий код вставляем скрипт
1 2 3 4 5 6 7 |
<script> function update() { var x = document.getElementById('mycode').value; document.getElementById("display").contentDocument.body.innerHTML = x; } </script> |
HTML
На саму страничку, где будет отображаться окно онлайн HTML редактора вставляем код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea class="htmleditor_input" id="mycode"> <!DOCTYPE html> ВВЕДИТЕ (СКОПИРУЙТЕ) КОД В ЭТО ОКНО </textarea> </div> <div id="htmleditor_result"> <input onclick="update();" type="button" value="Показать результат"> <iframe class="htmleditor_output" id="display"></iframe> </div> </div> |
CSS
И, наконец, в CSS стили сайта добавить следующие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.htmleditor_input, .htmleditor_output { border:1px solid #c3c3c3; width:100%; height:450px; background-color:#ffffff; color:#000000; } #htmleditor { background-color: #f1fcff; height:500px; width:800px; border:solid #c3c3c3 1px; } .htmleditor_headerText { color:#005d68; font-family:verdana; font-size:90%; top:8px; padding-bottom: 7px; } #htmleditor_source { padding-left: 7px; width:48%; float: left; } #htmleditor_result { padding-right: 7px; width:48%; float: right; } |
Два и более онлайн HTML редакторов на одной странице
Если на одной странице сайта Вам необходимо разместить два и более окошек онлайн HTML редакторов, тогда необходимо сделать следующее:
- Продублировать (в зависимости от количества) Javascript между тегами <head> </head> ;
- В скрипте каждом поменять имена следующих переменных: function update, mycode, display. Например на function update1, mycode1, display1 и так далее в зависимости сколько раз окно онлайн редактора будет повторятся на странице.
- Аналогично поменять на такие же названия указанные переменные и в html коде самого окна.
Таким образом, сколько окон онлайн редакторов на странице — столько и Javasvript между тегами <head> </head> и все переменные должны назваться по разному.
Очень надеюсь, что этот скрипт будет полезным для вас.
Здравствуйте.
А как сохранять отредактированный код?
В данном варианте никак. Это самый простой HTML редактор