Функция работает в IE6, FF1.07, NN8.1, Opera8.01, 9.01 (частично Opera 7.54, в том числе быстрая цитата). Все названные функции обычно требуются вместе, поэтому сделаны с общим корнем и разными входами. Добавлена функция insTagSel ("B+,I+") с сохранением выделения ранее выделенного участка, которая может быть полезна при каскадном выделении тегами.

Пример позволяет проверить работу вставки кодов как в textarea, так и в input. Переключение - чекбоксом. Адрес демонстрации - http://js2.ru/example/JsPrimeryCode-90.htm



Замечены 2 желательных улучшения (оба - для IE).
1)  Есть тонкое различие в несфокусированных полях ввода - в которых нет фокуса и в которых его нет, но есть по умолчанию. В первом случае позиция курсора принята в конце текста, а во втором она оказывается в начале. После перезапуска страницы это наблюдается во всех не-Gecko-браузерах, во время работы - только в IE, потому что он не сохраняет позицию курсора и выделения при потере фокуса. В начале работы курсор надо ставить в конец текста, если по умолчанию в поле есть текст. Для Оперы в скрипте сделана правка начальной позиции, для IE она не имеет смысла, если не выполнено запоминание позиции курсора.
2) IE, чтобы быть похожим на всех, требует программной поддержки сохранения позиций выделения при потере фокуса. Это поможет, например, выйти из поля ввода, выделить текст в другом месте и сделать быструю цитату. Сейчас с этой функцией легко справляются остальные бр-ры. В них можно сохранить выделение или положение курсора, возвращаясь в поле ввода комбинацией "правый клик;Esc".

Интересна необходимость применения setTimeout при установлении курсора в поле ввода (строки 26, 31).
20.08 - поправлена функция цитирования так, чтобы правильно понималось выделение в рабочем поле ввода (insField). FF не понимает выделение в других полях ввода (он этого никогда не умел).

Это сообщение отредактировал(а) 12345c - 3.3.2008, 12:39

Ссылки на другие похожие темы:
index.php?showtopic=35775 - функция (Sardar) вставки BB-кодов;
index.php?showtopic=94640 - другие 2 варианта;
index.php?showtopic=55935 - 3-й вариант (автор Black);
index.php?showtopic=75913 - 4-й;
index.php?showtopic=76915 - 5-й;
index.php?showtopic=71824 - ссылка;
index.php?showtopic=69531 - вставка смайлов
index.php?showtopic=54474 - вставка кода картинки (нет скрипта);
index.php?showtopic=30107 - ссылки на древние решения;
index.php?showtopic=24028 - для IE;
index.php?showtopic=18322 - для IE;

Добавлена в исходный код 1-го сообщения функция обращения к автору (кнопка "Автор!") - insTag('тег','имя_автора'), вставляет после курсора, но перед выделением. Такая кнопка нужна в форумах для быстрого копирования имени автора в поле. (Есть мысль, что её можно выполнять как выделение имени автора с последующим кликом по кнопке типа "Быстрая цитата" -  интуитивно понятно, но непривычно.)

В Гекко обнаружено, что на более сложной странице, чем демонстрационная, возникают сильные глюки поля ввода по причине резервного копирования текста в defaultValue. Пришлось отказаться и ввести переменную defa.

(Код скрипта в первом посте и в демо-примере исправлен.)

В Опере 9.01 открылся свежий баг, связанный с невыполнением "Back" в поле INPUT. Не исправлял. Посмотрим, что будет с ней в следующих версиях.

Не совсем корректно работает "Цитата", если выделение - в поле ввода. Функция цитирует выделение, вместо того, чтобы, интуитивно, обрамить выделение тегами. Не изменял, так как требует глубокой переработки функции (выделение сложной процедуры обнаружения места выделения), а цитирование не обязательно востребовано.

Остаётся пожеланием сделать поведение выделения в IE, как в FF/Опере - чтобы не терялось при потере фокуса.

Интересно, а что, если клик кнопки при внешнем выделении тоже будет что-то значить? Копирование выделенного в поле ввода с обрамлением тегами. Практически, то же, что цитата. Особо полезно было бы для ссылок, но в ссылке надо ещё вытащить УРЛ, что сильно усложняет скрипт. Не просто брать выделение, а проверять, нет ли пересечения со ссылкой.

Решил проблему с "Цитатой", если выделение в поле ввода. Оказывается, решается просто, без переработки алгоритма. Если выделенный в поле ввода текст совпал с "выделенным вообще, по .getSelection()", то обрамляем этот текст тегом цитаты. Иначе дописываем цитату после курсора.
=============================
Кто подскажет, что за странный баг в Gecko, появляющийся в текущей версии примера? Появляется только при такой комбинации:

1) выделить участок в  textarea;
2) выделить участок в INPUT;
3) чекбокс выключен, т.е. рабочая область - textarea ;
4) когда выделение на Input-е, кликаем по "Fast quote".

Вылетает на функции (textarea).focus() такая ошибка (FF!.07, NN8.1):


Line 43:

Задержка не влияет - если бы не в 40-й строке 
, ошибка вылетала бы и здесь. При http-адресе ошибка та же.
============================
Ответ от Sardar-a:


Это сообщение отредактировал(а) 12345c - 21.8.2006, 16:39

12345c, мне очень понравился скрипт, но есть один небольшой ляп - при вставке автора в поле ввода скобка вместе с курсором перескакивает в конец:

Помогите исправить эту досадную ошибку...

P.S. Кстати, в демонстрашке такая же ерунда...  

Это сообщение отредактировал(а) F13 - 30.8.2006, 23:13

Исправил (в демо и в коде первого сообщения), спасибо за подсказку.

12345c, спасибо за отклик - все работает...  

Есть пожелания:

• Добавить закрывающий тэг для URL => [/url]
• Добавить в цитату НИК цитируемого автора => [quote = "Steeler"] ...Текст... [/quote]
• Чтобы при клике на "Быструю цитату", без выделения текста на странице, в поле ввода пустые тэги не вставлялись(как у вас на этом форуме)...

Возможно это реализовать? Если ДА, то буду весьма признателен...Больше и желать нечего...  

Это сообщение отредактировал(а) F13 - 1.9.2006, 00:03

1) уже реализовано - достаточно написать insTag('URL');
2) это сильно зависит от структуры страницы, от того, где расположен в коде HTML ник цитируемого автора. Можно разве что подробно описать методику того, как написать доступ к нику автора (и дате сообщения). Если кратко, то создаёте на выделении TextRange (для FF что-то иное), рекурсивно проходите по узлам нод в поиске строки таблицы, например, с классом message (если сообщение лежит в <tr class=message>). Затем спускаетесь по дереву нод в то место, где у Вас дата и автор и достаёте их. Если такой класс не найден, выделение было вне сообщения. (Всё это делать в insCapt(), но для Оперы, может быть, раньше. )
3)  я это сделал как более содержательное действие - ставите пустые скобки цитаты, потом вписываете цитату. Но если надо не ставить - нет проблем, переписываете

 Нет, это все ясно, я имею в виду именно закрывашку для тэга со знаком равенства: [url=(здесь курсор)] [/url], а не просто [url] [/url]  

Получится такое?  

Заменяете строчку function insTagArg(s){insPic(s,brkR);}  //'b',']' на

и строчку s1=brkL+s1+(s2==brkR?'=':brkR); //'[b]' or '[b=' на
Правда, он при выделенном участке ставит курсор в конец тегов, а не в промежуток между ними. Если ещё немного похимичить - запомнить режим, а при установке курсора вспомнить про него - курсор будет попадать в промежуток. Но, мне кажется, чаще бывает, что выделяют текст, а потом вставляют адрес на место курсора. Т.е. лучше сделать так:

Был текст: "Смотреть здесь" (слово "здесь" выделено по selection)
После клика: "Смотреть [URL=[курсор]]здесь[/URL]"

А в случае невыделенного участка или если курсора нет - так, как Вы сказали.

12345c, спасибо огромное за подсказку...  

Сделаны 2 поправки функций скрипта, одна из который существенна, и отмечена одна особенность в IE, устранение которой привело бы к заметному увеличению кода - на 600-800 байт, поэтому оставлена как есть.

1) Поправка в IE для многострочных выделений. Было выставление курсора или выделения после операции - со сдвигом, зависящим от числа переносов строк от начала текста. 
2) В FF было перескакивание на начало прокрутки длинного текста поля ввода, теперь положение прокрутки сохраняется. 
3) Ообенность: IE по-прежнему игнорирует завершающие пустые переносы строк в выделении, но на удобстве пользования это не сказывается.  Из области выделения они исключаются, но обычно они несущественны.

Скрипт исправлен в первом сообщении темы (добавлено около 200 байт кода).

Еще один вариант (работает под Mozilla & IE под другими не проверял):



Это сообщение отредактировал(а) Nikname - 16.10.2006, 14:18

Приветствую. Не могу зарегистрироваться на форуме у автора, поэтому пишу сюда. Такой вопрос по данному скрипту:

1) Правильно ли я внес изменения в код для небольшого усовершенствования функции с цитатой?


2) И такой вопрос - я попробовал задать новую функцию для вставки тегов типа [параметр1=параметр2]обрамленный текст[/параметр1] с помощью выпадающего списка <select>, но, вероятно, я делаю что-то неправильно. Не хочет работать оно (.

Почему?

Заранее благодарен.

Оказывается название функции было неправильным ) Получилось:



Грамотно ли это?

И такое изменение будет ли грамотным?

Доступ к форуму исправил (провайдер переносил сайт на другой сервер).

По изменениям: вообще-то грамотно всё, что работает. Глядя на приведённые примеры, приходится догадываться, для чего они. Если $name идёт из PHP, то, вероятно, Вы хотите поставить имя пользователя, читателя страницы. Если это нужно, то лучше в другом месте скрипта, в более позднем. Если предположить более логично, что Вы хотите имя автора текста вставить в цитату, то делается это заметно сложнее, но вполне выполнимо (на словах описано где-то выше в теме). Ищется в структуре документа место в сообщении, где написан автор (и дата), и копируется в цитату. Это, понятно, надо делать в insCapt(s), пока существует выделение, указывающее на сообщение, в котором оно находится. Используются функции parentNode, чтобы найти ячейку сообщения по его классу, затем childNodes.

...Вообще-то нет, селекция есть нода документа а не ячейки с сообщением. Надо другим методом искать. Сейчас неохота заморачиваться таким вопросом, может, кто-то другой подскажет.

Это сообщение отредактировал(а) 12345c - 4.2.2007, 12:13

Почти аналогичное существует и в IE 6 - в случае, когда размер выделенного текста превосходит размер текстовой области, то вставка тегов "с сохранением выделения" приводит к тому, что происходит прокрутка текста к открывающему тегу. При этом выделение сохраняется и дальнейшая вставка работает корректно. Курсор при этом находится "внизу" выделенного текста.  Если далее применить вставку тегов "без сохранения выделения", то происходит вставка тега и прокрутка "вниз" до положения курсора.

В FF 2.0.0.3 и Opera 9.10 подобной проблемы просто не существует. Существует ли какая-нибудь возможность исправления этого бага с IE?

P.S. Извините, что приходится писать про это здесь, а не на вашем форуме, но к сожалению отправка сообщений там не работает, несмотря на то, что я зарегистрировался на сайте.
А сам скрипт по своей функциональности просто прекрасный (даже с учетом бага с IE), так что за его создание - большое спасибо!

Этот случай не рассматривал, с выделением в IE больше области, посмотрю, что с ним сделать. Вообще-то, то, как Вы описали, корректно для логики IE - он прокручивает поле так, чтобы был виден курсор. И для дальнейшего ввода важно видеть его. Может быть, так и нужно оставить?

На форуме том какие-то непонятности с поведением прав доступа, нужно форум и скрипт другой ставить.

Так дело в том, что мы курсор не видим в IE в случае длинных выделений. Он "где-то внизу" за границами текствой области, там же, где и закрывающий тег.  Т.е. тоже самое, что было в FF, только в FF происходила прокрутка до начала текста, а в IE она происходит до начала вставленного открывающего тега (это все в режиме "с сохранением выделения").
Вот тут - иллюстрации:
1 - выделение до вставки http://neocrome.ru/datas/users/77-ie6_1.gif
2 - прокрутка выделенной области после вставки тега - http://neocrome.ru/datas/users/77-ie6_2.gif


Это сообщение отредактировал(а) Centuriones - 4.4.2007, 00:14

Так логику IE понять можно - выделение считается курсором ненулевой длины. Начало курсора - начало выделения. Так как есть правило - делать видимым мигающий курсор после операции, возникает вопрос, что считать курсором. Решили, что начало выделения должно попадать в видимую область.

Но, допустим, что это надо обойти. Используем тот же insField.scrollTop для того, чтобы прокрутка осталась на месте. Вставить восстановление прокрутки, с учётом всяких хитростей браузеров, надо здесь (в setTimeout):

было - 

; делаем - 

И, соответственно, переменную scrl делаем глобальной:

было - 

; делаем - 


Ещё надо заметить, что в скрипте остался баг, присущий IE, относящийся к выделению последних переносов строки. Но его обход требует 1.5 КБа кода, и потому он имеется во всех (существующих в природе) скриптах вставки ББ-кодов. Я тоже не стал его исправлять, хотя решение его (функция) на форуме есть ( http://forum.vingrad.ru/topic-115734.html ). (Её прикрутить - неочевидное дело, но возможное.)

12345c, подскажите, пожалуйста, как убрать скобки у смайлика, чтобы вставлялся код :smile: а не [:smile:]?
Т.е. по бокам скобки лишние, ведь в основном код смайла всегда имеет по бокам только двоеточие... 

Это сообщение отредактировал(а) F13 - 20.4.2010, 22:48

F13, просто напишите свою функцию, заменяющую insPic (она там со строки 4 в первом сообщении) и вместо скобок brkL, brkR ставьте свои.

Тогда смайл вызывается по insPic('smileText', null, null, ':','') или сделайте более короткую оболочку вызова вместо этой: smle=function(s){insPic(s, null, null, ':','')} .

Заодно, проверил работу в браузерах: FF3.6, IE8, Opera 10.51, Opera 10.1 - работает. Баг с пустыми Enter в конце для IE8 сохранился. (Возможно, часть специфического кода для багов Оперы 8-9 и FF1.07 уже не нужна, но остаётся как дополнительный бонус.)

12345c, спасибо большое, работает!  
Единственное не вкурил, как это должно работать:

Скорее всего имелось ввиду создание ещё одной функции, я правильно понял? - function insSmile(s){insPic(s, null, null, ':','')}
По крайней мере так тоже работает: onmousedown="insSmile('кодСмайла')"

Это сообщение отредактировал(а) F13 - 4.5.2010, 02:14

F13, после того дополнения кода в insPic (if(brkL==null)brkL='['; if(brkR==null)brkR=']';) 4-й и 5-й параметры - это подмена скобок, заданных по умолчанию в глобальных переменных. Если не пишете этих параметров, ставятся brkL, brkR - квадратные скобки как имена параметров внутри этой функции (insPic). Теперь, если обращаетесь к ней и хотите поменять скобки на одиночное двоеточие слева, вызываем insPic через обёртку 
Если надо двоеточия по обеим сторонам, делаем smle2=function(s){insPic(s, null, null, ':',':')} . Все остальные упоминания brkL, brkR вне insPic - это глобальные переменные (квадратные скобки).

12345c, а в HTML функция будет так вызываться:

Правильно?

Спасибо ещё раз, разобрался... Всё работает прекрасно...  
Ваш скрипт - лучший в своём роде... И это факт!  

Это сообщение отредактировал(а) F13 - 8.5.2010, 16:17