Кнопка Calling UI внешне

Отвеченный:

Result can bee seen here: http://apitecture.com/dev/cked/index.2.html

Рабочая кодовая выдержка:

$('a.color').on({
    click : function()
    {
        var self = $(this);

        var editor = self.data('editor-instance') || CKEDITOR.instances['one'];
        var button = self.data('editor-button') || editor.ui.create('TextColor');

        if (!self.data('editor-instance'))
        {
            self.data('editor-instance', editor);
        }

        if (!self.data('editor-button'))
        {
            button._.id = self.attr('id');
            self.data('editor-button', button);
        }

        button.click( editor );
    }
});

Я работаю над базирующимся редактором контента богатого GUI.

Я пришел к заключению, чтобы использовать CKEditor для текста, разрабатывающего часть, потому что это - 4-я версия, идет с большим количеством опций настройки и параметров конфигурации, плюс, очень хорошо строится.

Я начал осуществлять некоторые команды в CK на мою собственную панель инструментов, которая не связана с CK. По-видимому, мои предприятия не были так легки, как я думал, что они будут...

http://apitecture.com/dev/cked/ <- here I have deployed a sandbox version.

На левой стороне вы видите veeeery, раздетый вниз версия CK и таможенная панель инструментов.

Справа, точная точная копия, но с родной панелью инструментов CK.

Простые команды, как Связь и Смелый , как вы видите, работают, из-за их простого характера.

Проблема с кнопкой Text Color . Это не связано с <�ними> команда в CK, поэтому я не могу выполнить его внешне - хорошо, по крайней мере я не нашел путь как.

Возможно, кто-то достаточно про с CK и мог помочь мне понять это?

Цель состоит в том, чтобы иметь ту же самую функциональность на кнопке моей панели инструментов как CK один.

Я узнал, что при нажатии на Цвет текста , всплывающее окно выбора цвета приложено к телу, таким образом, это не простирается на стили CK и, в теории, должно работать автономное. Хотя, я, может казаться, не нахожу код, где HTML приложен к телу.

Я попытался получить случай кнопки UI:

var color = CKEDITOR.instances['one'].ui.create('TextColor');

// and fire click on it
color.click();

Но, который вызвал частично ожидаемый (должный щелкнуть по тому, чтобы не быть начатым с панели инструментов) исключение:

Uncaught TypeError: Cannot read property 'elementMode' of undefined ckeditor.js:552
    CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.$ ckeditor.js:552
    CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel ckeditor.js:541
    e ckeditor.js:540
    $.on.click cktest.js:59
    v.event.dispatch jquery.min.js:2
    o.handle.u

Наблюдение (от: console.log (color.click)), что функция принимает параметр, я думал, что мог предоставить любой элемент DOM ему, звоня color.click (элемент); , который также вызвал ошибку:

Uncaught TypeError: Cannot read property 'baseFloatZIndex' of undefined ckeditor.js:547
    CKEDITOR.ui.panel.render ckeditor.js:547
    o ckeditor.js:552
    CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.$ ckeditor.js:553
    CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel ckeditor.js:541
    e ckeditor.js:540
    $.on.click cktest.js:59
    v.event.dispatch jquery.min.js:2
    o.handle.u

Here is link to the source where the color plugin and it's buttons is introduced: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/colorbutton/plugin.js

Обновление:

Я думаю, что это происходит с каждой кнопкой, у которой есть dropdowns вместо диалогов.

Обновление 2:

Reinmar's answer did show some light at the end of the tunnel: http://apitecture.com/dev/cked/index.2.html

В примере по "Цветной" текстовой ссылке справа можно щелкнуть, и шоу dropdown, плюс, это функционирует отлично (помимо которого тень проведена в жизнь). Единственная выгода здесь, она работает впервые. Получающийся в:

TypeError: Cannot read property 'title' of undefined
    at CKEDITOR.ui.panel.block.CKEDITOR.tools.createClass.$ (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:549:298)
    at new b (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:26:149)
    at Object.CKEDITOR.ui.panel.addBlock (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:547:503)
    at CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.proto.addBlock (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:553:409)
    at CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:541:333)
    at e [as click] (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:540:304)
    at HTMLAnchorElement.$.on.click (http://apitecture.com/dev/cked/cktest.2.js:64:24)
    at HTMLAnchorElement.v.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:38053)
    at HTMLAnchorElement.o.handle.u (http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:33916) 

Для каждого последующего щелчка.

3
nl ja de

2 ответы

Вы задали жесткий вопрос:). Я - ядро CKEditor dev в течение прошлого 1 года, и я должен был провести час, закапывая панель инструментов, панели и кнопки. Эта часть API CKE действительно извилистая и определенно недостает документации. Но худшая часть его - то, что это не действительно повторно используемо, вызовите все части, сильно связаны.

Так или иначе. Я пытался снова использовать colorbutton , и я добился успеха. На редакторе без панели инструментов плагин (это важно) я смог открыть его для указанного элемента:

Reusing colorbutton

И это даже, кажется, работает:) (по крайней мере, на Хроме).

Мне любопытно, как трудно это будет для вас, чтобы заменить панель инструментов плагин с вашим собственным базовым внедрением (возможно, без поддержки a11y и другого тяжелого материала). В данный момент ваши смелые и кнопки ссылки работают правильно над Хромом, FF, Opera и IE7-9 (это на самом деле доказывает, как прохладный CKE - то, потому что это делает много в фоновом режиме;). Я надеюсь, что вы не столкнетесь ни с какими серьезными проблемами.

Некоторые подсказки:

  • , который Вы не должны называть editor.getCommand() .exec() . Есть editor.execCommand() метод.
  • Вы, вероятно, захотите активировать/дезактивировать кнопки в зависимости от контекста (местоположение знака вставки). У каждой команды есть государство и это автоматически обновляется на selectionChange событие.

Удачи. И будет здорово, если вы разделите свои мысли и результат работы с нами:). Обратная связь будет очень полезна, если когда-нибудь мы решим улучшить эту часть API.

1
добавлено
Ну, это работает, если я прилагаю кнопку к "elementspath" кнопке (ваш пример). Но, я не могу заставить его работать над элементом, который был явно определен в HTML, за пределами CK' s объем, прежде, чем иллюстрировать примерами CK. О... ждите секунда.
добавлено автор jolt, источник
I' ve обновил Q. Посмотрите Обновление 2 .
добавлено автор jolt, источник
Мои выгоды попытки были для тестов также. Теперь, сохраненный это - работает безупречно (Проверенный на Хроме, IE9 и IE7). Просто должны удалить все те необычные стили, с которыми это идет, и добавьте еще некоторую логику для панели инструментов. Принятый! И обратная связь будет поступающей наверняка.
добавлено автор jolt, источник
Необходимо сохранить кнопку переменная (пункт UI). Это может быть создано только однажды (dunno, почему; <). BTW. Тот выгода попытки вокруг button.click() была только для тестов. Вы don' t нужен он.
добавлено автор Reinmar, источник

Вы задали жесткий вопрос:). Я - ядро CKEditor dev в течение прошлого 1 года, и я должен был провести час, закапывая панель инструментов, панели и кнопки. Эта часть API CKE действительно извилистая и определенно недостает документации. Но худшая часть его - то, что это не действительно повторно используемо, вызовите все части, сильно связаны.

Так или иначе. Я пытался снова использовать colorbutton , и я добился успеха. На редакторе без панели инструментов плагин (это важно) я смог открыть его для указанного элемента:

Reusing colorbutton

И это даже, кажется, работает:) (по крайней мере, на Хроме).

Мне любопытно, как трудно это будет для вас, чтобы заменить панель инструментов плагин с вашим собственным базовым внедрением (возможно, без поддержки a11y и другого тяжелого материала). В данный момент ваши смелые и кнопки ссылки работают правильно над Хромом, FF, Opera и IE7-9 (это на самом деле доказывает, как прохладный CKE - то, потому что это делает много в фоновом режиме;). Я надеюсь, что вы не столкнетесь ни с какими серьезными проблемами.

Некоторые подсказки:

  • , который Вы не должны называть editor.getCommand() .exec() . Есть editor.execCommand() метод.
  • Вы, вероятно, захотите активировать/дезактивировать кнопки в зависимости от контекста (местоположение знака вставки). У каждой команды есть государство и это автоматически обновляется на selectionChange событие.

Удачи. И будет здорово, если вы разделите свои мысли и результат работы с нами:). Обратная связь будет очень полезна, если когда-нибудь мы решим улучшить эту часть API.

1
добавлено
Ну, это работает, если я прилагаю кнопку к "elementspath" кнопке (ваш пример). Но, я не могу заставить его работать над элементом, который был явно определен в HTML, за пределами CK' s объем, прежде, чем иллюстрировать примерами CK. О... ждите секунда.
добавлено автор jolt, источник
I' ve обновил Q. Посмотрите Обновление 2 .
добавлено автор jolt, источник
Мои выгоды попытки были для тестов также. Теперь, сохраненный это - работает безупречно (Проверенный на Хроме, IE9 и IE7). Просто должны удалить все те необычные стили, с которыми это идет, и добавьте еще некоторую логику для панели инструментов. Принятый! И обратная связь будет поступающей наверняка.
добавлено автор jolt, источник
Необходимо сохранить кнопку переменная (пункт UI). Это может быть создано только однажды (dunno, почему; <). BTW. Тот выгода попытки вокруг button.click() была только для тестов. Вы don' t нужен он.
добавлено автор Reinmar, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском