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

KPEHDEL

Дата 8.2.2011, 15:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 138
Регистрация: 31.3.2010

Репутация: нет
Всего: нет

Как заставить <TEXTAREA> обрабатывать html код. Здравствуйте уважаемые форумчане!

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

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

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

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

The_Aleksey

Дата 8.2.2011, 16:01 (ссылка)

(нет голосов)

Загрузка ...

<?php

Профиль
Группа: Участник
Сообщений: 112
Регистрация: 10.10.2007
Где: Москва

Репутация: 5
Всего: 6

В таких редакторах не textarea а iframe, в котором включается designMode, чтобы в нем можно было писать. Посмотрите пример ниже, может поможет (код не мой)

Код


<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>

skyboy

Дата 8.2.2011, 16:15 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 75
Всего: 260

Цитата(KPEHDEL @ 8.2.2011, 14:47

)

ак как реализовано на данном сайте

на винграде?
как бы тут никаким WYSIWYG не пахнет.
не понимаю, что ты хочешь получить - пасрес BB-кодов на стороне сервера или WYSIWYG-редактор на клиенте.

IgorIV

Дата 8.2.2011, 20:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 642
Регистрация: 7.9.2009

Репутация: 2
Всего: 8

Когда пишешь сообщение, то оно без перезагрузки страницы появляется тут же, в общем списке постов. Крендель хочет так же. Просто название темы вообще нипричём.
Я тоже не сразу въехал.

KPEHDEL, или я не прав?

bars80080

Дата 8.2.2011, 20:42 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 71
Всего: 315

ага, это ж надо так непонятно задать вопрос

Цитата(KPEHDEL @ 8.2.2011, 14:47

)

Как я понимаю это реализуется на js и/или ajax.

да, и посему задавать вопрос надо в разделе javascript

принцип такой:
написал сообщение
нажал кнопку - вызвался js-обработчик, который пакует написанное сообщение в ajax-запрос

сервер принимает запрос с сообщение, вставляет его и возвращает некоторые данные, либо просто флаг, что всё ОК, либо целиком сообщение в хтмл-виде

колбэк (js-функция) в браузере принимает ответ и вставляет его в нужное место на странице.

KPEHDEL

Дата 9.2.2011, 14:24 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 138
Регистрация: 31.3.2010

Репутация: нет
Всего: нет

Цитата(The_Aleksey @ 8.2.2011, 16:01)

Код


<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>

Спасибо огромное! Именно это мне было и необходимо.

bars80080

Дата 9.2.2011, 15:08 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 71
Всего: 315

нет, IgorIV, мы так и не поняли о чём речь

Muerto

Дата 9.2.2011, 20:39 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: 3
Всего: 4

bars80080, Никогда не пытался строить свой wysiwyg но почему собственно банально, через js нельзя
innerHTML или Jquery .html использовать с данными в форме? не сработает? smile

--------------------

bars80080

Дата 9.2.2011, 21:07 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 71
Всего: 315

Цитата(Muerto @ 9.2.2011, 19:39

)

Никогда не пытался строить свой wysiwyg но почему собственно банально, через js нельзя
innerHTML или Jquery .html использовать с данными в форме? не сработает?

что не сработает? все wysiwyg-редакторы на js

Muerto

Дата 10.2.2011, 01:34 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: 3
Всего: 4

bars80080, ну вы тут описывайте какие то "очень сложные" методы для wysiwyg , а по простому какк я сказал никак? без iframe? smile

--------------------

KPEHDEL

Дата 10.2.2011, 06:41 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 138
Регистрация: 31.3.2010

Репутация: нет
Всего: нет

Muerto, а не можете показать пример кода на Jquery и/или на innerHTML?

Muerto

Дата 10.2.2011, 10:47 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: 3
Всего: 4

Вот готовый и рабочий wysiwyg за пол минуты

Код


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function(){
    $('#test').keyup(function() {
        $('#test2').html($('#test').val());
    });
});
</script>
    <textarea id="test" style="width:100%;height:400px;"></textarea>
    <div id="test2"></div>

Конечно очень примитивно... но хотел узнать если такое работает, ответ - да рабтает smile

Добавлено @ 10:56
А если так, то это на все 100% ywsiwyg который весит меньше 1 kb smile

Код


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function(){
    $('#test2').hide();

    $('#test').blur(function() {
        $('#test').hide();
        $('#test2').html($('#test').val());
        $('#test2').show();
    });

    $('#test2').click(function() {
        $('#test2').hide();
        $('#test').show();
        $('#test').focus();
    });

});
</script>
    <textarea id="test" style="width:100%;height:400px;"></textarea>
    <div id="test2" style="width:100%;height:400px;></div>

На этом пожалуй я игру закончу... но вы можете продолжать

Никаких извращений не нужно... хотя конечно если хочешь редактировать на живом html как во всех знаменитых wysiwyg, то такое не прокатит... но за такой размер, лучше не будет...
Может даже и воспользуюсь своим кодом оторый придумал на скорую руку smile

пару кнопочек... и то что нужно!

Очень удобно так делать , я вот сейчас форум строю на заказ, так как раз можно такое внедрить, если вдруг хочется на лету редактировать smile

Это сообщение отредактировал(а) Muerto - 10.2.2011, 10:57

--------------------

Muerto

Дата 10.2.2011, 17:51 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: 3
Всего: 4

Вот неплохой туториал http://www.devarticles.com/c/a/HTML/Buildi...ditor-Part-1/2/

А что за gecko кстати? какие браузеры на его основе сделаны?

нашел ответ

Various browser derivatives that use Gecko-Based Browsers are Mozilla Firefox, Flock, Netscape, SeaMonkey, Camino and K-Meleon. Gecko-Based Browsers have a cross-platform nature that means Gecko-Based Browsers works on a number of operating systems, including Microsoft Windows, GNU/Linux, BSDs and Mac OS X.

А то вот туториал выше не пахал, в мозиле

Это сообщение отредактировал(а) Muerto - 10.2.2011, 17:52

--------------------

Muerto

Дата 17.2.2011, 03:08 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: 3
Всего: 4

в коде котором вы привели, как можно получить данные с iframe что бы отправить через post, допустим если речь о форуме? добавление сообщения ?

--------------------

Muerto

Дата 17.2.2011, 15:59 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1207
Регистрация: 23.9.2006

Репутация: 3
Всего: 4

Мне вот ещё интересно а как вырубить DesignMode что бы был стандартный html код?

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| PHP: Общие вопросы \| Следующая тема »