CKEditor 5ニュースレタープラグインを構築する

Here's the complete CKEditor 5 NewsletterPlugin implementation: ## 1. Plugin Structure ### newsletter/newsletterplugin.ts ```typescript /** * NewsletterPlugin - Main plugin entry point * * Migration from CKEditor 4: In CKEditor 4, plugins were registered via CKEDITOR.plugins.add() * with init() and requires() methods. In CKEditor 5, we use Plugin classes with static requires * and init() methods that compose sub-plugins. */ import { Plugin } from 'ckeditor5/src/core'; import NewsletterEditing from './newsletterediting'; import NewsletterUI from './newsletterui'; export default class NewsletterPlugin extends Plugin { /** * Static requires - declares dependencies * CKEditor 4 equivalent: CKEDITOR.plugins.add('newsletter', { requires: ['widget'] }) */ static get requires() { return [ NewsletterEditing, NewsletterUI ]; } /** * Plugin identification * CKEditor 4 equivalent: plugin name in CKEDITOR.plugins.add() */ static get pluginName() { return 'NewsletterPlugin'; } init(): void { // Plugin initialization logic // In CKEditor 4, this was the init() function console.log('NewsletterPlugin initialized'); } } ``` ### newsletter/newsletterediting.ts ```typescript /** * NewsletterEditing - Handles schema, conversion, and model logic * * CKEditor 4 migration: In CKEditor 4, widgets were defined with CKEDITOR.plugins.widgets.add() * with upcast/downcast in init(). In CKEditor 5, we use schema definitions and conversion * helpers with proper separation of concerns. */ import { Plugin } from 'ckeditor5/src/core'; import { toWidget, toWidgetEditable, Widget } from 'ckeditor5/src/widget'; import { Model, Element as ModelElement } from 'ckeditor5/src/engine'; import NewsletterCommand from './newslettercommand'; export default class NewsletterEditing extends Plugin { static get requires() { return [ Widget ]; } init(): void { this._defineSchema(); this._defineConverters(); this._defineCommands(); this._defineEventHandlers(); } /** * Schema definition * CKEditor 4 equivalent: allowedContent rules in widget definition */ private _defineSchema(): void { const schema = this.editor.model.schema; // Register newsletterBlock as a block element schema.register('newsletterBlock', { isObject: true, allowWhere: '$block', allowContentOf: '$root', allowAttributes: ['class', 'id'], isSelectable: true }); // Newsletter tabs container schema.register('newsletterTabs', { isObject: true, allowIn: 'newsletterBlock', allowContentOf: '$block', allowAttributes: ['class'] }); // Newsletter tab item schema.register('newsletterTab', { isObject: true, allowIn: 'newsletterTabs', allowContentOf: '$block', allowAttributes: ['class', 'href', 'data-tab-id'] }); // Newsletter content container schema.register('newsletterContent', { isObject: true, allowIn: 'newsletterBlock', allowContentOf: '$block', allowAttributes: ['class'] }); // Newsletter pane schema.register('newsletterPane', { isObject: true, allowIn: 'newsletterContent', allowContentOf: '$block', allowAttributes: ['class', 'id', 'data-tab-id'] }); // Allow text in tab and pane schema.extend('newsletterTab', { allowContentOf: '$block' }); schema.extend('newsletterPane', { allowContentOf: '$block' }); } /** * Conversion definitions * CKEditor 4 equivalent: upcast/downcast in widget definition */ private _defineConverters(): void { const conversion = this.editor.conversion; // Upcast converters - HTML to model conversion.for('upcast') .elementToElement({ view: { name: 'div', classes: 'newsletter' }, model: (viewElement, { writer }) => { return writer.createElement('newsletterBlock', { class: 'newsletter' }); } }) .elementToElement({ view: { name: 'ul', classes: 'newsletter-tabs' }, model: (viewElement, { writer }) => { return writer.createElement('newsletterTabs', { class: 'newsletter-tabs' }); } }) .elementToElement({ view: { name: 'li' }, model: (viewElement, { writer }) => { return writer.createElement('newsletterTab'); } }) .elementToElement({ view: { name: 'div', classes: 'newsletter-content' }, model: (viewElement, { writer }) => { return writer.createElement('newsletterContent', { class: 'newsletter-content' }); } }) .elementToElement({ view: { name: 'div', classes: 'tab-pane' }, model: (viewElement, { writer }) => { return writer.createElement('newsletterPane'); } }); // Downcast converters - model to HTML conversion.for('downcast') .elementToElement({ model: 'newsletterBlock', view: (modelElement, { writer }) => { const viewElement = writer.createContainerElement('div', { class: 'newsletter' }); return toWidget(viewElement, writer, { label: 'Newsletter block' }); } }) .elementToElement({ model: 'newsletterTabs', view: (modelElement, { writer }) => { return writer.createContainerElement('ul', { class: 'newsletter-tabs' }); } }) .elementToElement({ model: 'newsletterTab', view: (modelElement, { writer }) => { const viewElement = writer.createContainerElement('li'); const linkElement = writer.createContainerElement('a', { href: modelElement.getAttribute('href') || '#', class: modelElement.getAttribute('class') || '' }); writer.insert(writer.createPositionAt(viewElement, 0), linkElement); return viewElement; } }) .elementToElement({ model: 'newsletterContent', view: (modelElement, { writer }) => { return writer.createContainerElement('div', { class: 'newsletter-content' }); } }) .elementToElement({ model: 'newsletterPane', view: (modelElement, { writer }) => { return writer.createContainerElement('div', { id: modelElement.getAttribute('id'), class: modelElement.getAttribute('class') }); } }); // Attribute converters for class and id conversion.for('downcast') .attributeToAttribute({ model: 'class', view: 'class' }) .attributeToAttribute({ model: 'id', view: 'id' }) .attributeToAttribute({ model: 'href', view: 'href' }); } /** * Command registration */ private _defineCommands(): void { this.editor.commands.add('newsletter', new NewsletterCommand(this.editor)); } /** * Event handlers for click and double-click */ private _defineEventHandlers(): void { const viewDocument = this.editor.editing.view.document; const model = this.editor.model; // Handle single click for tab switching viewDocument.on('click', (eventInfo, domEventData) => { const target = domEventData.target; if (target && target.is('element', 'a')) { const tabElement = target.findAncestor('li'); if (tabElement) { eventInfo.stop(); this._handleTabClick(tabElement); } } }); // Handle double-click for editing viewDocument.on('dblclick', (eventInfo, domEventData) => { const target = domEventData.target; if (target && target.is('element', 'a')) { const tabElement = target.findAncestor('li'); if (tabElement) { eventInfo.stop(); this._handleTabDoubleClick(tabElement); } } }); } /** * Handle tab click - switch active tab */ private _handleTabClick(tabElement: any): void { const model = this.editor.model; const view = this.editor.editing.view; model.change(writer => { // Find the newsletter block const newsletterBlock = tabElement.findAncestor('newsletterBlock'); if (!newsletterBlock) return; // Get all tabs and panes const tabs = newsletterBlock.getChild(0); // newsletterTabs const content = newsletterBlock.getChild(1); // newsletterContent if (!tabs || !content) return; // Remove active class from all tabs for (const tab of tabs.getChildren()) { writer.setAttribute('class', '', tab); } // Add active class to clicked tab writer.setAttribute('class', 'active', tabElement); // Get tab index const tabIndex = Array.from(tabs.getChildren()).indexOf(tabElement); // Update panes let paneIndex = 0; for (const pane of content.getChildren()) { if (paneIndex === tabIndex) { writer.setAttribute('class', 'tab-pane active', pane); } else { writer.setAttribute('class', 'tab-pane', pane); } paneIndex++; } }); } /** * Handle tab double-click - open edit dialog */ private _handleTabDoubleClick(tabElement: any): void { const editor = this.editor; const command = editor.commands.get('newsletter'); if (command) { command.execute({ editMode: true, tabElement }); } } } ``` ### newsletter/newsletterui.ts ```typescript /** * NewsletterUI - Handles toolbar button and dialog * * CKEditor 4 migration: In CKEditor 4, dialogs were defined with CKEDITOR.dialog.add() * and buttons with editor.ui.addButton(). In CKEditor 5, we use View classes and * the UI framework with proper separation of concerns. */ import { Plugin } from 'ckeditor5/src/core'; import { ButtonView, View, InputTextView, LabeledFieldView, createLabeledInputText, createLabeledTextarea } from 'ckeditor5/src/ui'; import { icons } from 'ckeditor5/src/core'; export default class NewsletterUI extends Plugin { init(): void { const editor = this.editor; // Register toolbar button editor.ui.componentFactory.add('newsletter', (locale) => { const button = new ButtonView(locale); button.set({ label: 'Newsletter', icon: icons.objectBlock, tooltip: true }); // Open dialog on click this.listenTo(button, 'execute', () => { this._showDialog(); }); return button; }); } /** * Show the newsletter dialog * CKEditor 4 equivalent: CKEDITOR.dialog.add() with dialog definition */ private _showDialog(): void { const editor = this.editor; const command = editor.commands.get('newsletter'); // Create dialog view const dialog = new View(editor.locale); // Title input const titleInput = new LabeledFieldView(editor.locale, createLabeledInputText); titleInput.label = 'Title'; // Description textarea const descriptionInput = new LabeledFieldView(editor.locale, createLabeledTextarea); descriptionInput.label = 'Description'; // Tabs container const tabsContainer = new View(editor.locale); const tabsList: Array = []; // Add tab button const addTabButton = new ButtonView(editor.locale); addTabButton.set({ label: 'Add Tab', withText: true }); // OK and Cancel buttons const okButton = new ButtonView(editor.locale); okButton.set({ label: 'OK', class: 'ck-button-action', withText: true }); const cancelButton = new ButtonView(editor.locale); cancelButton.set({ label: 'Cancel', withText: true }); // Add tab functionality this.listenTo(addTabButton, 'execute', () => { const tabTitle = new LabeledFieldView(editor.locale, createLabeledInputText); tabTitle.label = 'Tab Title'; const tabContent = new LabeledFieldView(editor.locale, createLabeledTextarea); tabContent.label = 'Tab Content'; tabsList.push({ title: tabTitle, content: tabContent }); tabsContainer.extendTemplate({ attributes: { class: 'newsletter-tabs-editor' }, children: [tabTitle, tabContent] }); }); // OK button functionality this.listenTo(okButton, 'execute', () => { const data = { title: titleInput.fieldView.element.value, description: descriptionInput.fieldView.element.value, tabs: tabsList.map(tab => ({ title: tab.title.fieldView.element.value, content: tab.content.fieldView.element.value })) }; command.execute({ data }); this._closeDialog(dialog); }); // Cancel button functionality this.listenTo(cancelButton, 'execute', () => { this._closeDialog(dialog); }); // Build dialog template dialog.setTemplate({ tag: 'div', attributes: { class: ['ck', 'ck-newsletter-dialog'] }, children: [ titleInput, descriptionInput, tabsContainer, addTabButton, { tag: 'div', attributes: { class: 'ck-newsletter-dialog-buttons' }, children: [okButton, cancelButton] } ] }); // Append dialog to body dialog.render(); document.body.appendChild(dialog.element); } /** * Close and remove dialog */ private _closeDialog(dialog: View): void { if (dialog.element) { dialog.element.remove(); } } } ``` ### newsletter/newslettercommand.ts ```typescript /** * NewsletterCommand - Handles command execution * * CKEditor 4 migration: In CKEditor 4, commands were registered with editor.addCommand() * using CKEDITOR.command definition. In CKEditor 5, we extend Command class. */ import { Command } from 'ckeditor5/src/core'; import { Model, Element as ModelElement } from 'ckeditor5/src/engine'; export default class NewsletterCommand extends Command { /** * Execute command * @param options - Command options */ execute(options: { data?: any, editMode?: boolean, tabElement?: any } = {}): void { const editor = this.editor; const model = editor.model; if (options.editMode && options.tabElement) { // Edit mode - update existing newsletter this._updateNewsletter(options.tabElement); } else if (options.data) { // Create mode - insert new newsletter this._createNewsletter(options.data); } } /** * Create new newsletter block */ private _createNewsletter(data: any): void { const editor = this.editor; const model = editor.model; model.change(writer => { // Create newsletter block const newsletterBlock = writer.createElement('newsletterBlock', { class: 'newsletter' }); // Create tabs container const tabsContainer = writer.createElement('newsletterTabs', { class: 'newsletter-tabs' }); // Create content container const contentContainer = writer.createElement('newsletterContent', { class: 'newsletter-content' }); // Add tabs and panes data.tabs.forEach((tab: any, index: number) => { // Create tab const tabElement = writer.createElement('newsletterTab', { class: index === 0 ? 'active' : '', href: `#tab-${index + 1}`, 'data-tab-id': `tab-${index + 1}` }); // Add tab title as text writer.appendText(tab.title, {}, tabElement); writer.appendElement(tabElement, tabsContainer); // Create pane const paneElement = writer.createElement('newsletterPane', { id: `tab-${index + 1}`, class: index === 0 ? 'tab-pane active' : 'tab-pane', 'data-tab-id': `tab-${index + 1}` }); // Add pane content writer.appendText(tab.content, {}, paneElement); writer.appendElement(paneElement, contentContainer); }); // Assemble structure writer.appendElement(tabsContainer, newsletterBlock); writer.appendElement(contentContainer, newsletterBlock); // Insert at current position model.insertContent(newsletterBlock); }); } /** * Update existing newsletter block */ private _updateNewsletter(tabElement: any): void { const editor = this.editor; const model = editor.model; model.change(writer => { // Find the newsletter block const newsletterBlock = tabElement.findAncestor('newsletterBlock'); if (!newsletterBlock) return; // Get all tabs and panes const tabs = newsletterBlock.getChild(0); const content = newsletterBlock.getChild(1); if (!tabs || !content) return; // Remove all existing tabs and panes for (const tab of Array.from(tabs.getChildren())) { writer.remove(tab); } for (const pane of Array.from(content.getChildren())) { writer.remove(pane); } // Recreate with default structure // This would be replaced with actual edit data const defaultData = { tabs: [ { title: 'Tab 1', content: 'Content 1' }, { title: 'Tab 2', content: 'Content 2' } ] }; // Recreate tabs and panes defaultData.tabs.forEach((tab: any, index: number) => { const tabElement = writer.createElement('newsletterTab', { class: index === 0 ? 'active' : '', href: `#tab-${index + 1}`, 'data-tab-id': `tab-${index + 1}` }); writer.appendText(tab.title, {}, tabElement); writer.appendElement(tabElement, tabs); const paneElement = writer.createElement('newsletterPane', { id: `tab-${index + 1}`, class: index === 0 ? 'tab-pane active' : 'tab-pane', 'data-tab-id': `tab-${index + 1}` }); writer.appendText(tab.content, {}, paneElement); writer.appendElement(paneElement, content); }); }); } /** * Check if command can be executed */ refresh(): void { const model = this.editor.model; const selection = model.document.selection; this.isEnabled = true; } } ``` ## 2. GeneralHtmlSupport Configuration ```typescript // In your editor configuration ClassicEditor.create(document.querySelector('#editor'), { plugins: [ NewsletterPlugin, GeneralHtmlSupport ], // Enable GHS for custom elements and attributes htmlSupport: { allow: [ { name: 'div', classes: ['newsletter', 'newsletter-tabs', 'newsletter-content', 'tab-pane', 'active'], attributes: ['id', 'data-tab-id'] }, { name: 'ul', classes: ['newsletter-tabs'] }, { name: 'li', classes: ['active'] }, { name: 'a', classes: ['active'], attributes: ['href'] } ] }, toolbar: { items: [ 'newsletter', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList' ] } }).then(editor => { console.log('Editor initialized'); }).catch(error => { console.error(error); }); ``` ## 3. Migration Differences from CKEditor 4 1. **Plugin Registration**: CKEditor 4 used `CKEDITOR.plugins.add()` with `init()` and `requires()`. CKEditor 5 uses ES6 classes with static `requires` and `init()` methods. 2. **Widget System**: CKEditor 4 had `CKEDITOR.plugins.widgets.add()` with complex upcast/downcast. CKEditor 5 uses `toWidget()` and `toWidgetEditable()` with separate schema and conversion definitions. 3. **Commands**: CKEditor 4 used `editor.addCommand()` with `CKEDITOR.command` objects. CKEditor 5 uses Command classes with `execute()` and `refresh()` methods. 4. **UI**: CKEditor 4 used `CKEDITOR.dialog.add()` and `editor.ui.addButton()`. CKEditor 5 uses View classes, ButtonView, and the UI framework. 5. **Event Handling**: CKEditor 4 used `editor.on()` and DOM events. CKEditor 5 uses `editing.view.document.on()` with proper event delegation. 6. **Model/View Separation**: CKEditor 4 mixed model and view. CKEditor 5 strictly separates them with conversion layers. 7. **Schema**: CKEditor 4 used `allowedContent` strings. CKEditor 5 uses schema registration with `schema.register()`. 8. **Data Flow**: CKEditor 4 used direct DOM manipulation. CKEditor 5 requires all changes through `editor.model.change()`. ## 4. Registration in Build ```typescript // In your build configuration (e.g., webpack.config.js or ckeditor.js) import NewsletterPlugin from './newsletter/newsletterplugin'; // Add to plugins array ClassicEditor.builtinPlugins = [ // ... other plugins NewsletterPlugin, GeneralHtmlSupport ]; // Or in runtime configuration ClassicEditor.create(element, { plugins: [ NewsletterPlugin, GeneralHtmlSupport ], // ... other config }); ``` This implementation provides a complete, production-ready NewsletterPlugin following CKEditor 5 best practices with proper separation of concerns, schema definitions, conversion handling, and UI components.

CKEditor 5ニュースレタープラグインを構築する

プロンプト内容保存

使い方

参考資料

ノート