Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 59
Поправьте название темы…
Добавьте работающий пример.
И ссылка на demo не помешала бы. В принципе, всё вроде понятно, но будет полезно дать возможность посмотреть/потыкать на кнопочки…
Один вопрос — зачем для этого целая библиотека Jquery?
Достоточно 37 строк кода JS для реализации простейшего редактора
www.picamatic.com/show/2009/08/24/02/43/4837726_471x226.png
Правда это для простейшего html редактора, но переделать на ВВ коды дело 2-х минут
Достоточно 37 строк кода JS для реализации простейшего редактора
www.picamatic.com/show/2009/08/24/02/43/4837726_471x226.png
Правда это для простейшего html редактора, но переделать на ВВ коды дело 2-х минут
Вы знаете, в моих сайтах обычно довольно много написано на Jquery, и она подключается всегда… поэтому редактор использует ее. Для того, что бы не писать код который уже есть на странице.
В таком случае конечно. Просто я предвижу пользователей по Вашему посту, что ломанутся подключать квери только для этой опции (или только для открытия картинок, или только для валидации форм и так далее).
Сколько раз уже встречал 50-7 кБ библиотеки ради одной-двух функций на сайте
Сколько раз уже встречал 50-7 кБ библиотеки ради одной-двух функций на сайте
Подключать библиотеку ради одной функции которую не сложно написать на чистом Javascript это бред… согласен с Вами.
или для вставки кода в таблицу :)
а ведь специально предуведомление написал: «если ваш сайт использует jquery...»
а ведь специально предуведомление написал: «если ваш сайт использует jquery...»
Неудобно то, что при нажатии на кнопку-действие, курсор перемещается всегда в конец текста
А я так и не смог написать ничего вминяемого :(
Сейчас использую вот этот редактор, думаю многим новичкам, и тем кому нужен маленький редактор бб-кодов будет полезен.
Кросcбраузерный (во всех браузерах, что я пробовал работает) и не требует Jquery ;)
Сейчас использую вот этот редактор, думаю многим новичкам, и тем кому нужен маленький редактор бб-кодов будет полезен.
Кросcбраузерный (во всех браузерах, что я пробовал работает) и не требует Jquery ;)
А что, клево! Пригодится.
Рекомендую markItUp: html, bbcode, textile, markdown, wiki syntax, dotclear. Редактор также очень дружит с jQuery.
} else if (element.selectionStart || element.selectionStart == '0') {
для этого в JS есть оператор in:
} else if ('selectionStart' in element) {И подсветку кода хорошо бы добавить.
Ninja editor делает тоже самое, но меньше на 55 килобайт
Вообще нет, умеет он тоже побольше
хех… только что померил, мой код занимает один килобайт… как по Вашему выглядит редактор меньше на 55 килобайт?
добавте в кнопки любой необходимый вам тег (в атрибут alt) и мой код будет уметь тоже самое.
там не только теги, вот описание:
habrahabr.ru/blogs/i_am_insane/40037/
habrahabr.ru/blogs/i_am_insane/40037/
Был бы полезен и заодно PHP обработчик BB-кодов на серверной стороне
Проблема в том, что обработчик разбит на несколько частей)))) да и примитивен он до жути на самом деле… в прочем извольте:
function to_bb($string) {
$str_search[]="[b]";
$str_search[]="[/b]";
$str_replace[]="<b>";
$str_replace[]="</b>";
$str_search[]="[i]";
$str_search[]="[/i]";
$str_replace[]="<i>";
$str_replace[]="</i>";
$str_search[]="[u]";
$str_search[]="[/u]";
$str_replace[]="<u>";
$str_replace[]="</u>";
$str_search[]="[s]";
$str_search[]="[/s]";
$str_replace[]="<strike>";
$str_replace[]="</strike>";
$str_search[]="[quote]";
$str_search[]="[/quote]";
$str_replace[]="<blockquote>";
$str_replace[]="</blockquote>";
$str_search[]="[center]";
$str_search[]="[/center]";
$str_replace[]="<center>";
$str_replace[]="</center>";
$string=str_replace($str_search, $str_replace, $string); // преобразование текста
return $string;
}
Благодарю. Действительно, просто. Радует возможность добавления тега по атрибуту alt, кстати.
З.Ы. Хотел добавить +, но пока хабрасилы не хватает — новенький :)
З.Ы. Хотел добавить +, но пока хабрасилы не хватает — новенький :)
у меня в обработчике нет обработки ссылок, картинок и прочего))) дергал из работающего проекта а там они не нужны… в пример добавил кнопку ссылка просто как пример более сложного тега чем одно буквенные)))
на вскидку стоит добавить что нибудь типа такого кода для ссылок например
на вскидку стоит добавить что нибудь типа такого кода для ссылок например
$patern="#\[a=([^\]]*)\]([^\[]*)\[/a\]#i";
$replace='\\2';
$string=preg_replace($patern, $replace, $string);
А еще добавьте предпросмотр к работающему примеру, и компонента готова: )
Да, кстати, на jquery уже есть несколько компонентов, реализующих систему bbcode:
1. Osimo BBCode Editor (пример)
2. Flexible BBCcode Editor (пример)
Osimo более функционален, а вот в Flexible интересный реалтаймовый предпросмотр.
1. Osimo BBCode Editor (пример)
2. Flexible BBCcode Editor (пример)
Osimo более функционален, а вот в Flexible интересный реалтаймовый предпросмотр.
собственно я не ставил целью написать полноценный редактор. для проекта мне нужны были первые три кнопки))) сделать жирным, подчеркнуть и наклонить. соответственно что то более функциональное просто мешало бы (хотя бы загрузкой лишнего кода). редактор простейший. и опубликован здесь под девизом — «вдруг кому понадобится».
markitup.jaysalvat.com/home/ туда же :)
Сам использую.
Сам использую.
> <a href="#" alt=«b»>Жирный</a>
Эта ссылка никуда не ведет, зачем она тут?
У тега A нет атрибута alt.
www.w3.org/TR/html401/struct/links.html#h-12.2
Простите за занудство :)
Эта ссылка никуда не ведет, зачем она тут?
У тега A нет атрибута alt.
www.w3.org/TR/html401/struct/links.html#h-12.2
Простите за занудство :)
да, наверное не имеет особого смысла делать ссылки, можно обойтись чем-нибудь другим. хотя с ссылками как-то нагляднее…
поменяйте ссылку на картинку если Вам угодно))) или на кнопку)))
можете заменить атрибут alt на любой Вам лично приятный для глаза.
то что у тега a нет атрибута alt в данном случае хорошо наверное… поисковик мусор не проиндексирует))))
можете заменить атрибут alt на любой Вам лично приятный для глаза.
то что у тега a нет атрибута alt в данном случае хорошо наверное… поисковик мусор не проиндексирует))))
Что значит «если Вам угодно»? Есть стандарты, в которых описано предназначение элементов.
То, что у тега a нет атрибута alt в данном и любом другом случае не «хорошо» и не «плохо» — его просто нет, и используя его Вы (или я) допускаете технологическую ошибку. И я, простите, использовать любой другой приятный глазу я могу лишь после того, как уберу со страницы объявление типа документа, признав тем самым, что это не (x)html, а некий выдуманный мною язык разметки, который по каким-то причинам должен отображаться в браузере.
То, что у тега a нет атрибута alt в данном и любом другом случае не «хорошо» и не «плохо» — его просто нет, и используя его Вы (или я) допускаете технологическую ошибку. И я, простите, использовать любой другой приятный глазу я могу лишь после того, как уберу со страницы объявление типа документа, признав тем самым, что это не (x)html, а некий выдуманный мною язык разметки, который по каким-то причинам должен отображаться в браузере.
я в принципе не в одной строчке статьи не настаивал на том, что бы Вы использовали мой код на своих сайтах.
Если Вы предложите вариант панели кнопок редактора, которые будут полностью соответствовать любому объявлению типа документа буду благодарен.
P.S. панель должна предполагать возможность использования в качестве кнопок редактора и текста и картинок, тег <a /> этому требованию соответствует.
Если Вы предложите вариант панели кнопок редактора, которые будут полностью соответствовать любому объявлению типа документа буду благодарен.
P.S. панель должна предполагать возможность использования в качестве кнопок редактора и текста и картинок, тег <a /> этому требованию соответствует.
Я не понял, причем тут вообще «панель».
Вы обратили внимание на то, что я на панели инструментов своего редактора использую тег <a /> не семантически. Вот я и попросил Вас предложить свой вариант, который будет полностью соответствовать стандартам, при этом позволит отображать как текст так и картинку в качестве кнопки редактора.
P.S. Не хочу показаться занудным, но по моему Вы пытаетесь отойти в сторону от вопроса…
P.S. Не хочу показаться занудным, но по моему Вы пытаетесь отойти в сторону от вопроса…
Нет, просто если Вы прочтете еще раз Вашу фразу «панель должна предполагать возможность использования в качестве кнопок редактора и текста и картинок», поймете чем вызвано мое смутение — я просто не понимаю что тут написано (и не понимаю в каком месте опечатка).
В качестве кнопок, я думаю, очень неплохо сгодятся кнопки, как ни странно.
Если же Вас кнопки не устраивают, или Вы зададите мне новое условие, которому нет семантического аналога в HTML, я заранее даю Вам ссылку на предусмотренные для этих случаев элементы, которые не имеют семантического смысла (их им наделяеяет автор кода, используя атрибуты).
www.w3.org/TR/html401/struct/global.html#h-7.5.4
В качестве кнопок, я думаю, очень неплохо сгодятся кнопки, как ни странно.
Если же Вас кнопки не устраивают, или Вы зададите мне новое условие, которому нет семантического аналога в HTML, я заранее даю Вам ссылку на предусмотренные для этих случаев элементы, которые не имеют семантического смысла (их им наделяеяет автор кода, используя атрибуты).
www.w3.org/TR/html401/struct/global.html#h-7.5.4
боюсь показаться навязчивым, но мой код меня полностью устраивает…
Если он не устраивает вас с точки зрения соответствия стандартам, то предложите свое решение, отсылка к документации в данном случае не уместна, документацию я читал.
Боюсь в меня сейчас полетят камни, но я не считаю, что стоит из стандарта делать фетиш.
шахматы для игрока, а не игрок для шахмат.
Если он не устраивает вас с точки зрения соответствия стандартам, то предложите свое решение, отсылка к документации в данном случае не уместна, документацию я читал.
Боюсь в меня сейчас полетят камни, но я не считаю, что стоит из стандарта делать фетиш.
шахматы для игрока, а не игрок для шахмат.
Я, вообщем, не проповедник, чтобы наставлять кого-то :) Совсем не преследовал этой цели. Ваш код — Ваше дело.
Однако с замечанием насчет стандартов не очень согласен… каждый для себя, думаю, должен решить: разработчик в первую очередь — это инженер или джамшут а-ля «работает и хуй с ним». Хотя, боюсь, для многих «инженер» уже ругательство…
Однако с замечанием насчет стандартов не очень согласен… каждый для себя, думаю, должен решить: разработчик в первую очередь — это инженер или джамшут а-ля «работает и хуй с ним». Хотя, боюсь, для многих «инженер» уже ругательство…
да нет молодой человек… ситуация выглядит немного иначе…
Вы покритиковали меня за не соответствие стандартам, я три раза предложил поправить мой код. Вы не смогли, или не захотели (не царское это дело) написать соответствующий стандартам код для того, что бы заменить мой который Вы критиковали, вместо этого, Вы начали отправлять меня читать стандарты. Если можете улучшить мой код, пожалуйста я приму улучшение, если не можете то не сотрясайте воздух.
1. Не стоит употреблять не нормативную лексику… мы все таки не на базаре.
2. Складывается впечатление, что в Вашем случае — «Не работает зато по стандартам!»
Вы покритиковали меня за не соответствие стандартам, я три раза предложил поправить мой код. Вы не смогли, или не захотели (не царское это дело) написать соответствующий стандартам код для того, что бы заменить мой который Вы критиковали, вместо этого, Вы начали отправлять меня читать стандарты. Если можете улучшить мой код, пожалуйста я приму улучшение, если не можете то не сотрясайте воздух.
это инженер или джамшут а-ля «работает и хуй с ним»
1. Не стоит употреблять не нормативную лексику… мы все таки не на базаре.
2. Складывается впечатление, что в Вашем случае — «Не работает зато по стандартам!»
В смысле Вы хотите, чтобы я перевел слово кнопка в <button>, а приведенную ссылку процитировал? Или почему Вы считаете, что я Вам не ответил?
у тега a нет атрибута alt
А у button атрибут alt есть?
приехали, причем тут alt?
Ох… ну настолько не помнить собственные сообщения…
И далее вся дискуссия шла именно касательно атрибутов, с первым я и не спорил…
мда… Более на Ваши сообщения я отвечать не намерен.
P.S. Перед тем как написать ответ хотя бы перечитайте ветку…
Эта ссылка никуда не ведет, зачем она тут?
У тега A нет атрибута alt.
И далее вся дискуссия шла именно касательно атрибутов, с первым я и не спорил…
мда… Более на Ваши сообщения я отвечать не намерен.
P.S. Перед тем как написать ответ хотя бы перечитайте ветку…
Я все прекрасно помню. Вы говорите какую-то ерунду.
Использование атрибута «alt» разве является неотъемлимой частью решения задачи? — Нет. Почему Вы прицепились именно к alt — мне совершенно не понятно. Как я изначально сказал, его просто НЕТ для элемента a, ровно как его нет ни в button ни в span. С чего вдруг мне (или Вам) нужно подбирать элемент, обязательно имеющий именно alt — объясните мне.
Вы не в состоянии придумать другого способа хранения данных для описанной задачи? Да даже если не в состоянии, пусть способ будет тот же, неужели не можете подобрать соответствующий существующий атрибут?
Использование атрибута «alt» разве является неотъемлимой частью решения задачи? — Нет. Почему Вы прицепились именно к alt — мне совершенно не понятно. Как я изначально сказал, его просто НЕТ для элемента a, ровно как его нет ни в button ни в span. С чего вдруг мне (или Вам) нужно подбирать элемент, обязательно имеющий именно alt — объясните мне.
Вы не в состоянии придумать другого способа хранения данных для описанной задачи? Да даже если не в состоянии, пусть способ будет тот же, неужели не можете подобрать соответствующий существующий атрибут?
Редактор требует для работы подключенной библиотеки Jquery.
element = document.getElementById('user_text');
не понятно
что именно не понятно? мне нужна в данном случае ссылка на элемент а не обернутый набор…
element = $("#user_text"); работать не будет…
element = $("#user_text"); работать не будет…
человек не понимает, что такое jQuery-объект.
element = $("#user_text").get(0);
жестокий вариант для тех, кто знает jQuery и не знает javascript :)
Ну раз уж взялись писать на основе jQuery, то пусть будет все в одном стиле и прямую ссылку на элемент получим средствами jQuery, через get :) тем более, что от этого кода не требуется особой скорости. Вообще конечно лучше сделать поиск элемента 1 раз и сохранить где-нибудь ссылку, а не как сделал автор, поиск элемента происходит каждый раз при вызове функции вставки bb-кода.
>> тем более, что от этого кода не требуется особой скорости
Вот с таким подходом и проектируются различные узлы на АвтоВАЗе
Вот с таким подходом и проектируются различные узлы на АвтоВАЗе
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
простейший редактор bb кодов