Визуальный редактор

EnterNity · December 30, 2012

Недавно наткнулся на статью, где говорится о создании визуального редактора через JS, так вот, изменение текста поддавалось тегами bold и italic.

мне нужно сделать чуть больше кнопок, к примеру выравнивание выделенного мною текста по центру, слева, справа и т.д., все необходимое. К примеру вывод строк с помощью тегов li.

Вот его текст кода:

<form name="myform" action="#" method="post">
  <p>
    <input type="hidden" id="content" name="content" value="" />
  </p>
  <script type="text/javascript">
    // Вывод кнопок редактирования
    document.write("<input type='button' value='B' onclick='setBold()' />");
    document.write("<input type='button' value='I' onclick='setItal()' />");
    document.write("<br />");
    document.write("<iframe scrolling='no' frameborder='no' src='#' id='frameId' name='frameId'></iframe>"); // Добавляем iframe
    /* В зависимости от браузера получаем доступ к созданному фрейму */
    var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
    var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
    var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
    var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
    /* Создаём код пустой HTML-страницы */
    iHTML = "<html><head></head><body style='background-color: yellow;'></body></html>";
    iDoc.open(); // Открываем фрейм
    iDoc.write(iHTML); // Добавляем написанный код в фрейм
    iDoc.close(); // Закрываем фрейм
    iDoc.designMode = "on"; // Включаем режим редактирования фрейма
    /* Функции для задания внешнего вида выделенного текста
    Полный набор возможных команд: http://javascript.itsoft.ru/execcom/execCommands.html */
    function setBold() {
      iWin.focus();
      iWin.document.execCommand("bold", null, "");
    }
    function setItal() {
      iWin.focus();
      iWin.document.execCommand("italic", null, "");
    }
    /* Сохранение HTML-кода в поле hidden, чтобы потом можно было передать полученный HTML-код в скрипт-обработчик */
    document.getElementById("content").value = iDoc.body.innerHTML; 
  </script>
  <p>
    <input type="submit" value="Отправить" />
  </p>
</form>

Меня интересует строки кода

iWin.document.execCommand("bold", null, "");
iWin.document.execCommand("italic", null, "");

это ведь встроенные переменные скажем так, который JS определяет что с ними делать, я хочу узнать список других способов... выравнивание текста и т.д. подскажите где эту информацию взять и т.д., хочу создать свой визуальный редактор... Спасибо за внимание!

freeneutron · December 30, 2012

Тебе нужно следующее

Edited December 30, 2012 by freeneutron

DenKiri · December 31, 2012

Вчера всё работало: написал контент.

Сегодня включаю визуальный редактор - поле ввода контента неактивно и пустое Включил HTML - всё на месте Переключил на визуалку - опять пустое неактивное поле ввода; все кнопки при этом работают, нажимаются. Что делать???

P.S. Во всех остальных статьях визуалка работает без проблем.......

freeneutron · December 31, 2012

Самый верный способ - это заново пройти путь преобразования рабочего примера в то, что у тебя не работает. Еще, если тестируешь на Мазиле или Опере, то надо не забывать вычищать кэш браузера перед загрузкой новой версии страницы.

EnterNity · January 1, 2013

О, вижу тут пользуетс этим кодом, вчера понаделал кнопок, теперь вот доделываю дизайн для сайта( но не получается блин вытащить инфу из таблицы(( жесть(

freeneutron · January 1, 2013

Понятия не имею, что за код такой. Просто пишу то, что в голову приходит :lol: . Вообще найти гуру, который по чистой случайности освоил туже библиотеку, что интересует на данный момент вас, довольно проблематично, если эта библиотека - не JQuery.

Edited January 1, 2013 by freeneutron

Николя223 · January 1, 2013

вот отсюда попробуйте вытащить... в самом низу впримере встраивают цвет и т.д... можно по аналогии и выравнивание сделать

http://2007.fastcoder.ru/articles/?aid=204

Edited January 1, 2013 by Николя223

EnterNity · January 2, 2013

вот отсюда попробуйте вытащить... в самом низу впримере встраивают цвет и т.д... можно по аналогии и выравнивание сделать
http://2007.fastcoder.ru/articles/?aid=204

О спасибо большое =))))

Sign In

Визуальный редактор

Question

EnterNity

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

freeneutron

Link to comment

Share on other sites

DenKiri

Link to comment

Share on other sites

freeneutron

Link to comment

Share on other sites

EnterNity

Link to comment

Share on other sites

freeneutron

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

EnterNity

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information