| |
|
|
| | Хотел попробовать создать свой wysiwyg редактор, но столкнулся с проблемой.
Вот скрины, если будет не понятно:
http://img.monopages.com/1d12d42558018980b5170fb565b5c728/full.png
http://img.monopages.com/a21f482beba16bf1be648f3769f726ca/full.png
Работает так, есть textarea, где вводится текст. Каждую 1 мс скрипт проверяет введенное и разбивает, то что я ввел на массив. Если находит какой-то bb код, то сразу заменяет на html.
Проблема в том, что как я и сказал раньше, то все что я ввожу превращается в массив, а каждый элемент после ПРОБЕЛА - это и есть новый элемент массива. И когда я ввожу:
лалалала [bb-kod] лалалал [/bb-kod] лалалал - оно работает.
Выводит такой результат - "лалалала лалалал лалалал", а когда я ввожу так:
лалалала [bb-kod]лалалал[/bb-kod] лалалал, то оно эту часть [bb-kod]лалалал[/bb-kod] берет как один элемент, и поэтому выводит так "[bb-kod]лалалал[/bb-kod]" вместе в bb кодом.
* [bb-kod] использую, потому как у вас в форме эти теги работают.
Что можно сделать? как исправить?
Вот в общем код, попробуйте, все работает:
<?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
textarea {
width: 300px;
height: 75px;
resize: none;
}
</style>
<script>
setInterval(function() {
var str, arr, elem, cont;
// получаем значение формы
str = document.getElementById("input_text").value;
// разбиваем значение TEXTAREA на массив
arr = str.split(" ");
// если находим BB коды, заменяем их на HTML
for(i=0; i<arr.length; i++) {
if(arr[i]=="") arr[i]="<strong>";
if(arr[i]=="") arr[i]="</strong>";
if(arr[i]=="") arr[i]="<em>";
if(arr[i]=="") arr[i]="</em>";
}
// блок, где выводится результат
elem = document.getElementById('result');
// после каждого елемента в массиве ставим пробел
cont = arr.join(" ");
// вставляем в блок готовый текст
elem.innerHTML = cont;
}, 1);
</script>
</head>
<body>
<form method="post">
<textarea id="input_text"></textarea>
</form>
<div id="result"></div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Belkin
(11.02.2012 в 03:08)
| | | Что-то это совсем не визивиг...
Визивиг - это когда в поле форматирования стили тут же применяются. Например вот. Пример конечно очень сырой, но если захотите - доработаете до совершенства. | |
| |
|
|
| |
|
|
| |
для: deimand
(11.02.2012 в 03:20)
| | | Я понимаю это конечно )
Не судите так серьезно пожалуйста. Я понимаю, что такое wysiwyg.
Просто параллельно со всем я начал пробовать делать что-то на js и вот за начало решил сделать что-то наподобие wysiwyg редактора своими методами :) | |
| |
|
|
| |
|
|
| |
для: Belkin
(11.02.2012 в 03:26)
| | | Механизм обычных bb кодов можно подсмотреть в исходном коде на этом сайте, нажав на кнопку ответить. Сделать предпросмотр тоже не проблема, можно например использовать ajax. Современный и легковесный механизм создания визивига я вам показал, хотя ваши картинки указывают на первый вариант. Что собственно еще не понятно? Или я чего то не так понял? | |
| |
|
|
| |
|
|
| |
для: deimand
(11.02.2012 в 03:31)
| | | Понятно то все, но есть проблема.
Как я сказал, то все что мы вводим - заносится в массив и каждый элемент - это что-то после пробела, то есть мы ввели "Привет, меня зовут Игорь!", присваивается так:
arr[0] = 'Привет,';
arr[1] = 'меня';
arr[2] = 'зовут ';
arr[3] = 'Игорь!';
если мы введем "Привет, [b.] меня [/b.] зовут Игорь!", присваивается так:
arr[0] = 'Привет,';
arr[1] = ' [b.]';
arr[2] = 'меня';
arr[3] = ' [/b.]';
arr[4] = 'зовут ';
arr[5] = 'Игорь!';
и текст выделится правильно, потому что цикл for проверяет все, что мы ввели по элементам и в случае нахождения BB кода, он заменяет его. К примеру нашел [b.] заменил на <strong>, нашел [/b] заменил на </strong> и так же с [i.] идет замена на <em>..
а тут, если мы введем "Привет, [b.]меня[/b.] зовут Игорь!", присваивается так:
arr[0] = 'Привет,';
arr[1] = [b.]'меня[/b.]';
arr[2] = 'зовут ';
arr[3] = 'Игорь!';
и эти BB теги становятся частью элемента со словом "меня" и цикл for не может их найти и просто выводит их как слово, а хотелось бы, чтобы как во 2м варианте - как КОД, то есть <strong>.
В этом и проблема. | |
| |
|
|
| |
|
|
| |
для: deimand
(11.02.2012 в 03:31)
| | | Вроде бы понял, по примеру как на софттим, может не совсем, но что-то попробую.
Спасибо за ответ. | |
| |
|
|
| |
|
|
| |
для: deimand
(11.02.2012 в 03:20)
| | | - | |
| |
|
|
