У цьому керівництві ми розглянемо процес створення плагіна для інтеграції CKEditor 5 з нашою бібліотекою ModernDOM. Цей плагін дозволить користувачам легко додавати потужний WYSIWYG редактор до своїх проектів.
Крок 1: Налаштування середовища розробки
- Створіть нову директорію для плагіна:
|
1 2 |
mkdir moderndom-ckeditor-plugin cd moderndom-ckeditor-plugin |
2. Ініціалізуйте новий npm проект:
|
1 |
npm init -y |
3. Встановіть необхідні залежності:
|
1 2 |
npm install --save-dev @babel/core @babel/preset-env webpack webpack-cli npm install --save @ckeditor/ckeditor5-build-classic |
Крок 2: Створення плагіна
Створіть файл src/index.js і додайте наступний код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
(function(factory) { if (typeof define === 'function' && define.amd) { define(['moderndom', '@ckeditor/ckeditor5-build-classic'], factory); } else if (typeof module === 'object' && module.exports) { module.exports = function(root, moderndom) { if (typeof moderndom === 'undefined') { moderndom = require('moderndom'); } const CKEditor = require('@ckeditor/ckeditor5-build-classic'); return factory(moderndom, CKEditor); }; } else { factory(ModernDOM, ClassicEditor); } }(function($, ClassicEditor) { $.fn.ckeditor = function(options) { return this.each(function() { const $this = $(this); ClassicEditor .create(this, options) .then(editor => { $this.data('ckeditor', editor); }) .catch(error => { console.error('CKEditor initialization failed:', error); }); }); }; $.fn.getCKEditor = function() { return this.data('ckeditor'); }; $.fn.ckeditorContent = function(content) { const editor = this.getCKEditor(); if (editor) { if (content === undefined) { return editor.getData(); } else { editor.setData(content); return this; } } return this; }; $.fn.ckeditorDestroy = function() { const editor = this.getCKEditor(); if (editor) { editor.destroy() .then(() => { this.removeData('ckeditor'); }) .catch(error => { console.error('CKEditor destruction failed:', error); }); } return this; }; })); |
Крок 3: Налаштування Webpack
Створіть файл webpack.config.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'moderndom-ckeditor-plugin.js', path: path.resolve(__dirname, 'dist'), library: 'ModernDOMCKEditor', libraryTarget: 'umd', globalObject: 'this' }, externals: { moderndom: 'ModernDOM', '@ckeditor/ckeditor5-build-classic': 'ClassicEditor' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, mode: 'production' }; |
Крок 4: Додавання скриптів збірки
Оновіть секцію scripts у package.json:
|
1 2 3 4 |
"scripts": { "build": "webpack", "watch": "webpack --watch" } |
Крок 5: Створення документації
Створіть файл README.md:
|
1 2 3 4 5 6 7 8 |
# ModernDOM CKEditor 5 Plugin Цей плагін інтегрує CKEditor 5 з бібліотекою ModernDOM. ## Встановлення ```bash npm install moderndom @ckeditor/ckeditor5-build-classic moderndom-ckeditor-plugin |
Використання
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea id="editor"></textarea> <script src="path/to/moderndom.min.js"></script> <script src="path/to/ckeditor5-build-classic.js"></script> <script src="path/to/moderndom-ckeditor-plugin.js"></script> <script> $(document).ready(function() { $('#editor').ckeditor({ // Опції CKEditor }); }); </script> |
API
ckeditor(options): Ініціалізує CKEditor на вибраному елементіgetCKEditor(): Повертає екземпляр CKEditorckeditorContent([content]): Отримує або встановлює вміст редактораckeditorDestroy(): Знищує екземпляр CKEditor
Приклади
|
1 2 3 4 5 6 7 8 9 10 11 |
// Ініціалізація $('#editor').ckeditor(); // Отримання вмісту const content = $('#editor').ckeditorContent(); // Встановлення вмісту $('#editor').ckeditorContent('<p>Новий вміст</p>'); // Знищення редактора $('#editor').ckeditorDestroy(); |
|
1 2 3 4 5 6 |
## Крок 6: Збірка плагіна Виконайте команду для збірки плагіна: ```bash npm run build |
Крок 7: Тестування
Створіть файл test.html для тестування плагіна:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ModernDOM CKEditor Plugin Test</title> </head> <body> <textarea id="editor"></textarea> <script src="https://cdn.jsdelivr.net/npm/moderndom@latest/dist/moderndom.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@ckeditor/ckeditor5-build-classic@latest/build/ckeditor.js"></script> <script src="./dist/moderndom-ckeditor-plugin.js"></script> <script> $(document).ready(function() { $('#editor').ckeditor(); }); </script> </body> </html> |
Крок 8: Публікація
- Створіть репозиторій на GitHub для вашого плагіна.
- Оновіть
package.json, додавши інформацію про репозиторій:
|
1 2 3 4 |
"repository": { "type": "git", "url": "https://github.com/your-username/moderndom-ckeditor-plugin.git" } |
3. Опублікуйте пакет на npm:
|
1 |
npm publish |
Висновок
Ми створили повнофункціональний плагін, який інтегрує CKEditor 5 з бібліотекою ModernDOM. Цей плагін дозволяє користувачам легко додавати потужний WYSIWYG редактор до своїх проектів, використовуючи знайомий синтаксис ModernDOM.
Ключові моменти:
- Плагін підтримує різні системи модулів (UMD).
- Забезпечує простий API для ініціалізації, отримання/встановлення вмісту та знищення редактора.
- Легко інтегрується в існуючі проекти з ModernDOM.
Цей приклад демонструє, як можна розширювати функціональність ModernDOM за допомогою зовнішніх бібліотек, створюючи потужну екосистему плагінів.