Скрипт онлайн HTML редактора для сайта

В настоящее время в сети очень много онлайн HTML редакторов, с помощью которых легко вносить небольшие изменения и корректировки в HTML коды. Мой любимый скрипт онлайн HTML редактора — это TryIt Editor, которым я сама часто пользуюсь. Я даже отдельно вынесла его на своем сайте в Меню для вебмастеров.

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

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

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

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

JavaScript

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

HTML

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

CSS

И, наконец, в CSS стили сайта добавить следующие стили:

Два и более онлайн HTML редакторов на одной странице

Если на одной странице сайта Вам необходимо разместить два и более окошек онлайн HTML редакторов, тогда необходимо сделать следующее:

  • Продублировать (в зависимости от количества) Javascript между тегами <head> </head> ;
  • В скрипте каждом поменять имена следующих переменных: function update, mycode, display. Например на function update1, mycode1, display1 и так далее в зависимости сколько раз окно онлайн редактора будет повторятся на странице.
  • Аналогично поменять на такие же названия указанные переменные и в html коде самого окна.
    Таким образом, сколько окон онлайн редакторов на странице — столько и Javasvript между тегами <head> </head> и все переменные должны назваться по разному.

Очень надеюсь, что этот скрипт будет полезным для вас.


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

2 комментария

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *