На форуме была поднята тема о замене стандартного bbcode редактора на визуальный.
Представляем решение от нашей команды по решению данной задачи, в результате нашей работы, у нас получится вставить редактор в форум (быстрый ответ), комментарии, и блоги. Все работы проведены на базе дефолтной 1.10.2 системы.
Внимание под катом много скринов.
Итак для замены редактора нужно скопировать файлы из архива в корень вашего сайта, сразу прошу заметить, что делали исправления на базе дефолтной системы, поэтому если на вашем сайте вносили правки, следует использовать программы для merge скриптов, в частности можем порекомендовать winmerge. Файлы которые были затронуты можете посмотреть в архиве, также в архиве находится плагин с визуальным редактором ckeditor 4.3, который мы рекомендуем использовать для замены старого fckeditor, а также как альтернативу bbcode редактора.
И так что у нас получилось:
1. редактор для блогов:
2. редактор для комментариев
3. редактор для быстрого ответа в форуме.
Разработчиками нашей команды были доработаны, полностью разработаны специализированные плагины для инстант по ckeditor 4.3, которые позволят полностью заменить функционал стандартного bbcode редактора.
пройдемся по плагинам (типовые плагины не будем рассматривать, такие как выравниваем и стилизация текста):
1. Плагин "Цитата" — позволяет быстро вставить цитату и Имя цитируемого пользователя.
2. Плагин "Скрытый текст" — позволяет вставить текст, который будет скрыт от гостей, а также указать кол-во кармы которое необходимо для просмотра скрытого текста.
3. Плагин "Код" — позволяет вставить в сообщение программный код, для этого требуется наличие SyntaxHighlighter библиотеки.
4. Плагин "Вставка ссылки" — позволяет быстро вставить ссылку на другой ресурс или страницу.
5. Плагин "Спойлер" — позволяет быстро вставить текст под спойлером.
6. Плагин "Смайл" — позволяет быстро вставить в текст смайлик, смайлы представлены из набора "Колобок"
7. Плагин "Вставка изображения из сети" — позволяет вставить быстро картинку используя ссылку на нее в сети.
8. Плагин "Вставка изображения" — позволяет быстро загрузить фото с локального источника и вставить его в статью.
9. Плагин "Вставка медиа" — позволяет вставить в текст медиа обекты из сети. Плагин использует технологию oembed, и поддерживает кучу сервисов, с которых вы можете вставить медиа данные.
Video
Youtube — oembed — YQL
Blip — oEmbed
Hulu — oEmbed
Vimeo — oEmbed
National film board of Canada — oEmbed
Qik — oEmbed
Dotsub — oEmbed
Clikthrough — oEmbed
Kino Map — oEmbed
Funny Or Die — Embedded
College Humour — Embedded
Metacafe — Embedded
embedr — Embedded
5min — oEmbed is XML only — using YQL to translate it
ustream.tv — oEmbed is not JSONP enabled — using YQL to translate it
viddler — OGP
twitvid — Embedded
bambuser — Embedded
xtranormal — Embedded
Gametrailers — Embedded
Vzarr — Embedded
VHX — oembed
bambuser — oembed
dailymotion.com — oembed
animoto — oembed
justin.tv — YQL JSON
livestream — OGP
scivee — embedded
veoh — embedded
minoto-video — oembed using YQL
TrailerAddict — OGP
vodpod — oembed YQL — broken as the oembed has absolute positioning which breaks the display
fora.tv -OGP YQL
TED — OGP YQL
Aniboom — embedded
Comedy Central — OGP
snotr — embedded
zapiks — OGP
youku — embedded
wistia — Oembed
Audio
Soundcloud — oEmbed
HuffDuffer — oEmbed
BandCamp — YQL and Embedded
podomatic — OGP
rdio.com — oEmbed
hark.com — OGP
chirb.it — YQL and oembed
official.fm — YQL and oembed
mixcloud — YQL and oembed
shoudio — oembed
audioboo.fm — OGP
Spotify — OGP YQL
Photo
flickr — oEmbed
photobucket — oEmbed
instagram — oEmbed
yfrog — oEmbed
23HQ — oEmbed
Smugmug — oEmbed
twitpic — OGP YQL
500px.com — OGP
visual.ly — YQL Lookup
img.ly — Thumbnail view
imgur.com — Thumbnail view
twitgoo.com — Thumbnail view
gravatar — Thumbnail view when using mailto
pintrest — YQL — Embedded view of a sort.
circuitlab — image view
skitch — YQL oembed
graphic.ly — OGP
dribble — jsonp lookup
Lockerz — YQL lookup
AsciiArtFarts — YQL Lookup
lego cusoo — OGP over YQL
plannary — OGP over YQL
propic — OGP
avairy.com — OGP
lomography — ogp
weheartit — ogp
glogster — ogp
chart.ly — embedded
twitrpix — OGP
chictopia — OGP
Rich
Meetup — oEmbed
gigapans — Embedded
Slideshare — oEmbed
ebay — Embedded
scribd — Embedded
screenr — Embedded
tumblr- JSONP lookup
imdb — JSONP lookup via imdbapi.com
wikipedia- JSONP lookup
github- JSONP lookup (CSS)
eventful — OGP
myspace — OGP
live Journal — JSONP Lookup (CSS)
wordpress — oEmbed (wordpress.com, wp.me, blogs.cnn.com, techcrunch.com). I can add other wordpress sites as well.
circuitbee -Embedded
stack overflow — JSONP Lookup (CSS)
Facebook — JSONP Lookup (CSS)
Pastebin — Embedded
Pastie — YQL lookup
kickstarter — Embedded
issuu — OGP
reelapp.com — Embedded
Etsy — OGP over YQL
Amazon — Embedded — Requires Affiliate code
linkedin — Embedded IFRAME — found a link that works :)
Lanyrd — YQL (CSS)
twitter — Oembed — status only — but that is ok I think
github gist — oembed
speakerdeck — yql oembed
dipity — yql oembed
dailymile — oembed
deviantart — oembed
Roomshare Japan — oembed
mobypictures — oembed
prezi — embedded
popplet — embedded
authorstream — OGP
googlecalendar — Iframe
cacoo — oembed
pearltrees — embedded
urtak — oembed — is broken in iframe return atm -seems to be an embed.ly issue??
jotform — embedded
Urban Dictionary — YQL lookup
Ars Technica — YQL Lookup
Eventbrite — OGP YQL
last.fm OGP YQL
Rotten Tomatoes — OGP YQL
iFixit — OGP
qwiki — OGP
brighttalk — Meta info
tinychat — OGP
tourwrist — embedded
bnter — OGP
bigthink — OGP
wirewax — OGP
whosay — OGP
timetoast — embedded
tripline — OGP
jsfiddle — embedded
ну и напоследок расширенный плагин для вставки видео с youtube
10. Плагин "Вставка с youtube" — позволяет быстро и с большим набором параметров вставить ролик с youtube в текст.
Представляем решение от нашей команды по решению данной задачи, в результате нашей работы, у нас получится вставить редактор в форум (быстрый ответ), комментарии, и блоги. Все работы проведены на базе дефолтной 1.10.2 системы.
Внимание под катом много скринов.
Итак для замены редактора нужно скопировать файлы из архива в корень вашего сайта, сразу прошу заметить, что делали исправления на базе дефолтной системы, поэтому если на вашем сайте вносили правки, следует использовать программы для merge скриптов, в частности можем порекомендовать winmerge. Файлы которые были затронуты можете посмотреть в архиве, также в архиве находится плагин с визуальным редактором ckeditor 4.3, который мы рекомендуем использовать для замены старого fckeditor, а также как альтернативу bbcode редактора.
И так что у нас получилось:
1. редактор для блогов:
2. редактор для комментариев
3. редактор для быстрого ответа в форуме.
Разработчиками нашей команды были доработаны, полностью разработаны специализированные плагины для инстант по ckeditor 4.3, которые позволят полностью заменить функционал стандартного bbcode редактора.
пройдемся по плагинам (типовые плагины не будем рассматривать, такие как выравниваем и стилизация текста):
1. Плагин "Цитата" — позволяет быстро вставить цитату и Имя цитируемого пользователя.
2. Плагин "Скрытый текст" — позволяет вставить текст, который будет скрыт от гостей, а также указать кол-во кармы которое необходимо для просмотра скрытого текста.
3. Плагин "Код" — позволяет вставить в сообщение программный код, для этого требуется наличие SyntaxHighlighter библиотеки.
4. Плагин "Вставка ссылки" — позволяет быстро вставить ссылку на другой ресурс или страницу.
5. Плагин "Спойлер" — позволяет быстро вставить текст под спойлером.
6. Плагин "Смайл" — позволяет быстро вставить в текст смайлик, смайлы представлены из набора "Колобок"
7. Плагин "Вставка изображения из сети" — позволяет вставить быстро картинку используя ссылку на нее в сети.
8. Плагин "Вставка изображения" — позволяет быстро загрузить фото с локального источника и вставить его в статью.
9. Плагин "Вставка медиа" — позволяет вставить в текст медиа обекты из сети. Плагин использует технологию oembed, и поддерживает кучу сервисов, с которых вы можете вставить медиа данные.
Video
Youtube — oembed — YQL
Blip — oEmbed
Hulu — oEmbed
Vimeo — oEmbed
National film board of Canada — oEmbed
Qik — oEmbed
Dotsub — oEmbed
Clikthrough — oEmbed
Kino Map — oEmbed
Funny Or Die — Embedded
College Humour — Embedded
Metacafe — Embedded
embedr — Embedded
5min — oEmbed is XML only — using YQL to translate it
ustream.tv — oEmbed is not JSONP enabled — using YQL to translate it
viddler — OGP
twitvid — Embedded
bambuser — Embedded
xtranormal — Embedded
Gametrailers — Embedded
Vzarr — Embedded
VHX — oembed
bambuser — oembed
dailymotion.com — oembed
animoto — oembed
justin.tv — YQL JSON
livestream — OGP
scivee — embedded
veoh — embedded
minoto-video — oembed using YQL
TrailerAddict — OGP
vodpod — oembed YQL — broken as the oembed has absolute positioning which breaks the display
fora.tv -OGP YQL
TED — OGP YQL
Aniboom — embedded
Comedy Central — OGP
snotr — embedded
zapiks — OGP
youku — embedded
wistia — Oembed
Audio
Soundcloud — oEmbed
HuffDuffer — oEmbed
BandCamp — YQL and Embedded
podomatic — OGP
rdio.com — oEmbed
hark.com — OGP
chirb.it — YQL and oembed
official.fm — YQL and oembed
mixcloud — YQL and oembed
shoudio — oembed
audioboo.fm — OGP
Spotify — OGP YQL
Photo
flickr — oEmbed
photobucket — oEmbed
instagram — oEmbed
yfrog — oEmbed
23HQ — oEmbed
Smugmug — oEmbed
twitpic — OGP YQL
500px.com — OGP
visual.ly — YQL Lookup
img.ly — Thumbnail view
imgur.com — Thumbnail view
twitgoo.com — Thumbnail view
gravatar — Thumbnail view when using mailto
pintrest — YQL — Embedded view of a sort.
circuitlab — image view
skitch — YQL oembed
graphic.ly — OGP
dribble — jsonp lookup
Lockerz — YQL lookup
AsciiArtFarts — YQL Lookup
lego cusoo — OGP over YQL
plannary — OGP over YQL
propic — OGP
avairy.com — OGP
lomography — ogp
weheartit — ogp
glogster — ogp
chart.ly — embedded
twitrpix — OGP
chictopia — OGP
Rich
Meetup — oEmbed
gigapans — Embedded
Slideshare — oEmbed
ebay — Embedded
scribd — Embedded
screenr — Embedded
tumblr- JSONP lookup
imdb — JSONP lookup via imdbapi.com
wikipedia- JSONP lookup
github- JSONP lookup (CSS)
eventful — OGP
myspace — OGP
live Journal — JSONP Lookup (CSS)
wordpress — oEmbed (wordpress.com, wp.me, blogs.cnn.com, techcrunch.com). I can add other wordpress sites as well.
circuitbee -Embedded
stack overflow — JSONP Lookup (CSS)
Facebook — JSONP Lookup (CSS)
Pastebin — Embedded
Pastie — YQL lookup
kickstarter — Embedded
issuu — OGP
reelapp.com — Embedded
Etsy — OGP over YQL
Amazon — Embedded — Requires Affiliate code
linkedin — Embedded IFRAME — found a link that works :)
Lanyrd — YQL (CSS)
twitter — Oembed — status only — but that is ok I think
github gist — oembed
speakerdeck — yql oembed
dipity — yql oembed
dailymile — oembed
deviantart — oembed
Roomshare Japan — oembed
mobypictures — oembed
prezi — embedded
popplet — embedded
authorstream — OGP
googlecalendar — Iframe
cacoo — oembed
pearltrees — embedded
urtak — oembed — is broken in iframe return atm -seems to be an embed.ly issue??
jotform — embedded
Urban Dictionary — YQL lookup
Ars Technica — YQL Lookup
Eventbrite — OGP YQL
last.fm OGP YQL
Rotten Tomatoes — OGP YQL
iFixit — OGP
qwiki — OGP
brighttalk — Meta info
tinychat — OGP
tourwrist — embedded
bnter — OGP
bigthink — OGP
wirewax — OGP
whosay — OGP
timetoast — embedded
tripline — OGP
jsfiddle — embedded
10. Плагин "Вставка с youtube" — позволяет быстро и с большим набором параметров вставить ролик с youtube в текст.
Для каждого компонента есть возможность создать свой набор кнопок
При сохранении записи в блоге клуба,
выдает такую запись: "Укажите текст записи! Текст должен быть не короче 5 символов."
Естественно текста более чем достаточно. В общем запись отредактировать и сохранить
не получается.
на официальном сайте вижу что версия CKEditor 4.3 Beta (18 Sep 2013)
обновления планируются? А так плюс - полезно!
Надежда, а по моей просьбе не смотрели еще??
Пару соображений по теме:
1. Обрамлять ссылку как активную вне зависимости, делаем мы её через кнопку, либо просто вставляем в поле ввода;
2. Просматривать текст под споилером во время редактирования;
3. Прикрепление изображения по ссылке. Убрать все эти пугающие пользователя дополнительные настройки: Альтернативный текст, ширина*высота, выравнивание и т.п. лучше сделать: ссылка на картинку и вместо "альтернативный текст" - "описание фото", так понятнее простому обывателю.
4. Прикрепление изображения с ПК. Выбриаем файл -> нажимаем отправить на сервер -> нажимаем ок -> смотрим результат, лучше бы урезать все шаги до: выбираем картинку -> жмем Ок -> смотрим результат;
5. Вставить видео с ютуба, если есть по прямой ссылке, я бы убрал возможность добавлять iframe. Обывателю это ненужно, а iframe - это фу-фу-фу. Из всех настроек я бы оставил поле ссылка на ролик и с какого времени начать проигрывать ролик.
Надеюсь этот пост не обидит разработчика,
а то бывает и такое. Ваша разработка очень актуальна и полезна, хотелось бы сделать её ещё лучше.Пользуйтесь стандартным редактором, что Вам мешает.
В основном то, что обычному пользователю не нужно смотреть на эти |img| |video| |quote| и прочие теги. И реализация Надежды в этом плане просто чудесна. Мой комментарий написан лишь для того чтобы разработчик посмотрел глазами пользователя на свой продукт. Т.к. я обычный пользователь.
А давать права на вставку фреймов. Небезопасно-с.
при добавлении цитаты в комментарии, если не указывать автора, то выдает
http://joxi.ru/ebpBUtg5CbDkCHRC13s
типа поле цитаты пустое.. просто не всегда требуется именно цитировать кого-то из конфы, а просто выделить таким способом текст... собственно и автор тут не нужен
загрузка картинок после загрузки картинки на сервер показывает в редакторе но не показывает в сообщении.
в быстром ответе новый редактор а в редактировании сообщений и по ссылке ответить бб редактор
Может есть в планах всё таки сделать и под 1.10.1? Думаю многим бы это понравилось бы
В редакторе
что может быть?
http://instantcms.ru/forum/thread16486.html
Архив чего имеется ввиду?
на форуме при добавлении картинки в пост, в сообщении её выводит потом ввиде текста, в сурсе вот что
а раньше было так: или даже полнее.
В блогах все абсолютно не так как у вас на скринах, внешний вид точно такой как и для "быстрых ответов", только полоска с инструментами внизу, в статьях аналогично.
Устанавливал все по инструкции из архива для 1.10.3 на версию 1.10.3, в чем может быть проблема ?
Или это так задумано?
[cut=Читать далее...]
А так все очень понравилось... В любом случае плюсую, молодцы, сам редактор понравился очень...
Присоединяюсь к вопросу насчет плана для 1.10.4 Заранее спасибо!