Створення плугіна - Cut - для CKEditor 4
У цьому туторі я розповім, як зробити простенький плугін для CKE 4, який буде:
Я використовую CKEditor, і в ньому навіть є вже кнопка "Вставити розрив сторінки для друку", яку я і хотів використовувати для цієї мети. Однак все ж таки вирішив зробити все по-людськи: щоб і кнопочка була, і виглядало по-цивільному, та й HTML-код свій.
Написати плугін для CKEditor, який робить кнопку на панелі інструментів, після натискання на яку в поточну позицію курсора вставляється таке:
Завдання поставлене, давайте його виконувати! Насамперед, я знайшов у Мережі на цей чудовий (офіційний, між іншим) туторіал, який розповідає, як зробити найпростіший плугін, що вставляє в позицію курсора поточну дату і час. Тобто, за ідеєю, перекроїти його під мої потреби (замість дати та часу вставляти свій HTML-код) було не дуже складно, і я вже вирішив, що переведу його згодом українською мовою, але цьому завадили дві речі:
У результаті було ухвалено рішення написати свій власний туторіал. Тож почнемо!
Створення файлів для плугіна
Для початку зробіть папку під назвою плугіна в папці plugins CKEditor'а. Наш плугін буде називатися "Pagecut", тому папку я назвав "pagecut" (зверніть увагу, з маленької літери!). Назва папки повинна відповідати назві плугіна.
Тепер створіть у ній файл plugin.js. Цей файл має бути названий так і лише так. У результаті має вийти:
Мінімальний вихідний код
Тепер відкриваємо plugin.js і всередині пишемо:
CKEDITOR.plugins.add( 'pagecut', init: function( editor )
Всі плугини створюються за допомогою функції CKEDITOR.plugins.add, яка повинна отримувати назву плугіна та об'єкт, властивістьякого init має являти собою функцію, яка викликається при ініціалізації плугіна.
Для цього ми скористаємося функцією addCommand. З її допомогою ми опишемо команду insertPagecut, яка, власне, і вставлятиме наш код у позицію курсора.
editor.addCommand( 'insertPagecut', exec: function( editor ) < editor.insertHtml( 'Це довільний текст' ); > >);
Описується вона у вигляді об'єкта, у якого поки що лише один метод, exec. Він містить функцію, яка буде виконана при виконанні нашої команди insertPagecut.
Створення кнопки
Отже, іконка готова, давайте покладемо її в папку плугіна. Щоб був порядок, усередині папки плугіна я створив ще татку images, куди поклав іконку, названу icon.png. Тепер файлова структура у нас така:
editor.ui.addButton( 'Pagecut', label: 'Вставити кат', command: 'insertPagecut', icon: this.path + 'images/icon.png' > );
Підключення
Настав час використовувати наш плугін! Для цього потрібно зробити дві речі в тому місці, де у вас викликається CKEditor.
Перша: У параметрах передати назву нашого плугіна через config.extraPlugins, щоб CKEditor був у курсі, що його треба завантажити.
В даному випадку це робиться так:
Друга: Розмістити кнопку на панельці.
А саме кудись у конфіг панелі інструментів пишаємо наш 'Pagecut'.
Ось так виглядає мій config.js після всіх маніпуляцій:
CKEDITOR.editorConfig = function( config ) config.uiColor = '#9A9A9A',
Якщо все зроблено правильно, то, перезавантаживши сторінку, ви побачите нашу кнопочку, натиснувши на яку в позицію курсора вставляється "Це довільний текст".
Добре, плугін працює. Але ж ми хочемо, щоб вінвставляв нам текст, а HTML-код. Ок, давайте міняти.
Замість editor.insertHtml( 'Це довільний текст'); пишемо editor.insertHtml('
Пробуємо. Ось ті рази! Вставляється лише . Що таке? Давайте щось інше спробуємо.
А виходить чомусьОлоло.
Загалом CKE безцеремонно цензурує те, що ми передаємо в editor.insertHtml! Порившись у документації, я виявив, що цей метод має другий аргумент, mode, який, за ідеєю, вказує, чи потрібне додаткове коригування. Але мені не вдалося з його допомогою змусити вставляти як слід. Все одно переробляє і тут.
Покопавшись, я знайшов інше рішення:
var element = CKEDITOR.dom.element.createFromHtml( '
Тут спочатку створюється DOM-елемент, який потім вставляється за допомогою вже insertElement. Це дозволяє запобігти самодіяльності із боку CKE. Перевіряємо:
CSS вставляється за допомогою CKEDITOR.addCss. Зверніть увагу, що це метод інстансу, а глобальний CKEDITOR. Ось такий я вигадав css:
Просто і зі смаком. Пили значок як фон:
От і все. Ви навчилися робити найпростіший плугін для CKEditor. На завершення, додаю архів із самим плугином.
До нових зустрічей!
Ви можете записати коментар з "Facebook":