+ Ответить в теме
Показано с 1 по 3 из 3

Тема: Как заставить <TEXTAREA> обрабатывать html код.

  1. #1
    Новичок oboroten на пути к лучшему Аватар для oboroten
    Регистрация
    23.01.2010
    Сообщений
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Как заставить <TEXTAREA> обрабатывать html код.

    Здравствуйте уважаемые форумчане!

    Я пишу полностью свою биллинг панель и столкнулся с данной проблемой:
    • Решил сделать свой ББ редактор.
    • Сам редактор написал легко и не каких проблем не возникло.

    А проблема возникла в следующем:

    • Необходимо сделать так чтобы текст введённый в TEXTAREA отображался как на обычной странице в уже обработанном виде.
    • Так как реализовано на данном сайте
    • использование чужих WYSIWYG не предлагать, так как это полностью именная разработка и не хочу чужие продукты размещать на данном сайте.
    Как я понимаю это реализуется на js и/или ajax.

    За ранее всем признателен!

  2. #2
    Новичок oboroten на пути к лучшему Аватар для oboroten
    Регистрация
    23.01.2010
    Сообщений
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Всё ответ на данную проблему найден, может кому нибудь тоже пригодится:

    <html>
    <head>
    <title>Простой ВИСИВИГ (WYSIWYG)</title>
    <style type="text/css">
    body {margin:10px;}
    iframe {
    width:500px; height:300px;
    border:1px solid #000;
    margin-bottom:5px;
    }
    input {margin-right:5px; padding:3px;}
    .bold {font-weight:bold;}
    .ital {font-style:italic;}
    .under {text-decoration:underline;}
    </style>
    </head>
    <body>
    <h1>Простейший визуальный редактор</h1>
    <script type="text/javascript">
    // ***********************
    // ШАГ 1: вывод iframe и получение доступа к нему
    // ***********************
    // Выводим в HTML-поток iframe
    document.write("<iframe scrolling='no' frameborder='no' src='#' id='frameId' name='frameId'></iframe><br/>");
    // Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE
    var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
    // Получаем доступ к объектам window & document для ифрейма
    var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
    var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
    var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
    // ***********************
    // ШАГ 2: Добавим на пустую страницу ифрейма произвольный HTML-код
    // ***********************
    // Формируем HTML-код
    iHTML = "<html><head>\n";
    iHTML += "<style>\n";
    iHTML += "body, div, p, td {font-size:12px; font-family:tahoma; margin:0px; padding:0px;}";
    iHTML += "body {margin:5px;}";
    iHTML += "</style>\n";
    iHTML += "<body><u>Содержимое</u> с <b>HTML</b>-<i>разметкой</i></body>";
    iHTML += "</html>";
    // Добавляем его с помощью методов объекта document
    iDoc.open();
    iDoc.write(iHTML);
    iDoc.close();
    // ***********************
    // ШАГ 3: Инициализация свойства designMode объекта document
    // ***********************
    if (!iDoc.designMode) alert("Визуальный режим редактирования не поддерживается Вашим браузером");
    else iDoc.designMode = (isGecko) ? "on" : "On";
    // ***********************
    // ШАГ 4: Простейшие элементы редактирования: жирность, курсив, подчеркивание
    // ***********************
    // Выведем HTML-код этих элементов
    document.write("<input type='button' value='Ж' onclick='setBold()' class='bold' />");
    document.write("<input type='button' value='К' onclick='setItal()' class='ital' />");
    document.write("<input type='button' value='Ч' onclick='setUnder()' class='under' />");
    // Запишем код функции, для выставления форматирования
    // Используется метод execCommand объекта document
    function setBold() {
    iWin.focus();
    iWin.document.execCommand("bold", null, "");
    }
    function setItal() {
    iWin.focus();
    iWin.document.execCommand("italic", null, "");
    }
    function setUnder() {
    iWin.focus();
    iWin.document.execCommand("underline", null, "");
    }
    </script>
    </body>
    </html>

  3. #3
    Новичок Zit на пути к лучшему Аватар для Zit
    Регистрация
    18.11.2016
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Кто подскажет начинающему программеру. Как данные этого скрипта отправить методом POST

+ Ответить в теме

Похожие темы

  1. Ответов: 6
    Последнее сообщение: 17.09.2009, 08:04
  2. На чём лучше обрабатывать фото .gif ?
    от NoNaMe_909 в разделе Растровая графика
    Ответов: 5
    Последнее сообщение: 02.12.2008, 14:17
  3. параметр WRAP для html тэга textarea
    от romankrv в разделе JavaScript
    Ответов: 3
    Последнее сообщение: 01.12.2008, 11:22
  4. HTML-код кнопки сайта в textarea
    от WarioZ в разделе HTML
    Ответов: 6
    Последнее сообщение: 04.10.2008, 20:09
  5. Выезжающий код в <textarea...></textarea>
    от LoL в разделе JavaScript
    Ответов: 3
    Последнее сообщение: 04.10.2008, 10:32

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения