Пишем плагин для CKEditor 4

[xGromMx]

На гитхаб думаю стоит выложить.

[andrewsh]

Уже есть mapbbcode. Я считаю, не нужен, лучше приделайте mapbbcode к ckeditor'у.

[faiwer]

В принципе, всё что нужно сделать, для того, чтобы настроить плагин для любой другой системы карт это… Ничего.
Т.к. плагин не включает в себя само встраивание карт на страницу, он просто обеспечивает наличие на странице настраиваемой <em data-plugin=«json» />. А во что потом должна превратиться эта EM-ка решать тому, кто использует этот плагин :)

В тестовом архиве для этого достаточно переписать функцию replace в index.html.

[andrewsh]

Ну вот mapbbcode — это универсальное решение всех проблем с картами в форумах, блогах и всём таком.

[faiwer]

Вы навели меня на одну мысль. Т.к. плагин на самом деле не связан ни с какой системой карт, то можно просто добавить в его диалог настроек выпадающий список, позволяющий выбрать, какую систему карт задействовать. Сам список сделать настраиваемым через стандартную систему настроек CKeditor. Там же сделать опцию, которая задаёт систему карт по-умолчанию. + Уже в самом репозитории сделать несколько примеров, подключающих разные сервисы. Пожалуй, я так и сделаю.

[damat]

Вопрос по теме онлайн редакторов, но не по теме поста: а нет ли редактора, который умеет подсвечивать html и css синтаксис при редактировании source?

PS Просьба не минусовать за невтемность вопроса

[Wadik]

Я подготовил тестовую страничку, в которой можно посмотреть на плагин в деле. Скачать архив (~ 900 KiB, zip).

Только у меня ссылка ведет на какой-то файлообменник? Страницы файлообменника у меня блокируются фаерволом. Или примера и возможности нормально скачать не будет?!

[faiwer]

Угу, на файло-обменник. Но в данный момент я готовлю плагин для github-а. Оформляю его ~ по стандартам других плагинов CKEditor-а. Как закину на github — обновлю статью ссылкой. И отпишу в личку =)

[faiwer]

В немного сыром виде он доступен здесь.

[Wadik]

Спасибо!

[maximw]

Одна мааааленькая просьба. Не используйте для контейнера карты тэг акцентирования текста em. Есть же универсальный span.

[faiwer]

Я пробовал и <span /> и <div />. В CKEditor-е вступает в силу какая то доп.логика и всё летит к чёрту. В конечном счёте пришёл к выводу, что это должен быть изначально inline-ый тег, и не span. Попробовал EM — сработало, на нём и остановился. Суть в том что ACR + FakeObjects работают как то аномально. Сложилось впечатление что они тестировались только на плагине Flash, и больше создателям CKEditor-а не пригодились. Чего стоят только сбои в ACR когда заявлены использование атрибутов width и height, и при их неиспользовании рандомно слетают классы при переключении режима редактирования.

В общем не всё так просто :) Увы.

[arren]

Мне одному дико смотреть на «imap»?
А то знаете ли ассоциации всякие возникают.

[andrew_che]

Спасибо за плагин. Мы о нем написали в блоге API Яндекс.Карт — ymapsapi.ya.ru/replies.xml?item_no=1775&ncrnd=2302

Скажите, а есть возможность добавить этот плагин к остальным плагинам CKEditor? Может быть я мог бы чем-то помочь?

[faiwer]

Спасибо за публикацию. По поводу второго вопроса — ответил в личку.

[andrew_che]

Спасибо за плагин! :)

[Murz]

Благодарю за подробное описание! Скажите пожалуйста, а можно с помощью функции createFakeParserElement() или как-то по-другому сделать фейковый элемент не img-картинку заглушкой, а, например, div с произвольной надписью внутри (например с текстом «наименование»)? А то не очень хорошо когда несколько элементов отображаются одинаковой картинкой без подписей и каких-либо отличий.

[faiwer]

Тут нужно или исходники смотреть или эксперементировать. Мне сильно не хватало вменяемой документации. В ней написано одно, а по факту получал другое. Чаще всего натыкался на не очень ясные ограничения, которые обходил «методом тыка». Попробуйте DIV-ку. Если не прокатит, то может быть, сработает какой-нибудь EM.

[Murz]

Да я уж пробовал туда разные теги ставить — в любых вариантах на картинку заменяет ;(
В общем в итоге сделал вот так:

                afterInit: function( editor ) {
                  editor.dataProcessor.dataFilter.addRules(
                  {
                    comment : function( value )
                    {
                      if ( !CKEDITOR.htmlParser.comment.prototype.getAttribute ) {
                        CKEDITOR.htmlParser.comment.prototype.getAttribute = function() {
                          return '';
                        };
                        CKEDITOR.htmlParser.comment.prototype.attributes = {
                          align : ''
                        };
                      }

                      if ( value.match(/mycomment:.*/) ) {
                                                var widgetWrapper = null,
                                                        innerElement = new CKEDITOR.htmlParser.element( 'div', {
                                                                'class': 'visiblecomment'
                                                        } );

                                                // Adds placeholder identifier as innertext.
                                                innerElement.add( new CKEDITOR.htmlParser.text( value ) );
                                                widgetWrapper = editor.widgets.wrapElement( innerElement, 'placeholder' );

                                                // Return outerhtml of widget wrapper so it will be placed
                                                // as replacement.
                                                return widgetWrapper;
                      }

                      return value;
                    }
                  });
                }