Categories: Юзабилити

Онлайн HTML редактор для сайта

Онлайн HTML редактор очень популярен в настоящее время. С помощью него легко вносить небольшие изменения и корректировки в HTML коды. Мой любимый скрипт онлайн HTML редактора – это TryIt Editor.

Вашему вниманию, я представляю скрипт Онлайн HTML редактор для сайта для размещения внутри сайта, с помощью которого можно продемонстрировать пользователю HTML или CSS наглядно прямо на странице. Это очень удобно для вебмастеров, где в статье нужно не просто дать код, но и предоставить возможность пользователю самому внести определенные изменения.

Выглядит это так:

HTML редактор онлайн

Установить окно HTML редактора на сайт очень просто.

JavaScript

Между тегами <head> </head> страницы, где будет установлен редактор, вставляем следующий код вставляем скрипт

<script> 
function update() 
{ 
  var x = document.getElementById('mycode').value; 
  document.getElementById("display").contentDocument.body.innerHTML = x;
} 
</script>

HTML

На саму страничку, где будет отображаться окно онлайн HTML редактора вставляем код: 

<textarea class="htmleditor_input" id="mycode"> 
<!DOCTYPE html> 

ВВЕДИТЕ (СКОПИРУЙТЕ) КОД В ЭТО ОКНО 

</textarea> 
</div> 

<div id="htmleditor_result"> 
<input >

CSS 


И, наконец, в CSS стили сайта добавить следующие стили:
 
.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> и все переменные должны назваться по разному.
    •  
 
Больше статей:  Скрипт скачивающий базу участников выставки Elcom Exhibitors Database
Очень надеюсь, что этот скрипт будет полезным для вас.

View Comments

  • Здравствуйте.
    А как сохранять отредактированный код?

    • В данном варианте никак. Это самый простой HTML редактор

Leave a Comment
Share
Tags: Editor html Online онлайн редактора сайта скрипт
% дней назад

Recent Posts

  • Excel

Как правильно открыть CSV с многострочными ячейками в Excel

Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More

% дней назад
  • Python

Загрузка проекта на Github и Автодеплой на сервер

Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More

% дней назад
  • Python
  • Полезная минутка

Миграция базы данных в проектах Python

Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More

% дней назад
  • Python

Команды Git – Шпаргалка по основным командам Git

Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More

% дней назад
  • Python

Установка PostgreSQL на сервер Ubuntu и подключение через pgAdmin

Установка PostgreSQL на сервер Read More

% дней назад
  • Полезная минутка

Как создать PrimaryKey для таблицы в PostgreSQL

Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More

% дней назад