Construye un plugin de boletín informativo para CKEditor 5

// newsletter/newsletterplugin.ts import { Plugin } from 'ckeditor5/src/core'; import NewsletterEditing from './newsletterediting'; import NewsletterUI from './newsletterui'; /** * The Newsletter plugin - main entry point. * * Migration from CKEditor 4: * - CKEditor 4 used widget system with widgetdefinition * - CKEditor 5 uses plugin architecture with separated editing/UI layers * - Commands replace CKEditor 4's command system * - Schema validation replaces CKEditor 4's allowedContent */ export default class NewsletterPlugin extends Plugin { static get requires() { return [ NewsletterEditing, NewsletterUI ] as const; } static get pluginName() { return 'NewsletterPlugin' as const; } } ``` ```typescript // newsletter/newsletterediting.ts import { Plugin } from 'ckeditor5/src/core'; import { toWidget, toWidgetEditable } from 'ckeditor5/src/widget'; import { Widget } from 'ckeditor5/src/widget'; import NewsletterCommand from './newslettercommand'; /** * Newsletter editing layer - handles schema, conversion, and model operations. * * Migration from CKEditor 4: * - CKEditor 4 used filters and content rules * - CKEditor 5 uses schema definitions with strict typing * - Upcast/downcast converters replace CKEditor 4's toHtml/parseHtml */ export default class NewsletterEditing extends Plugin { static get requires() { return [ Widget ] as const; } init() { this._defineSchema(); this._defineConverters(); this._defineCommands(); this._handleEvents(); } /** * Define schema for newsletter blocks. * * Migration from CKEditor 4: * - CKEditor 4: allowedContent: 'div[class,id];ul[class];li[class];a[href,class];' * - CKEditor 5: Explicit schema registration with allowAttributes */ _defineSchema() { const schema = this.editor.model.schema; schema.register( 'newsletterBlock', { isObject: true, allowWhere: '$block', allowContentOf: '$root', allowAttributes: [ 'class', 'id' ] } ); schema.register( 'newsletterTabs', { isLimit: true, allowIn: 'newsletterBlock', allowContentOf: '$root', allowAttributes: [ 'class' ] } ); schema.register( 'newsletterTabItem', { isLimit: true, allowIn: 'newsletterTabs', allowContentOf: '$block', allowAttributes: [ 'class' ] } ); schema.register( 'newsletterTabLink', { isLimit: true, allowIn: 'newsletterTabItem', allowContentOf: '$text', allowAttributes: [ 'href', 'class' ] } ); schema.register( 'newsletterContent', { isLimit: true, allowIn: 'newsletterBlock', allowContentOf: '$root', allowAttributes: [ 'class' ] } ); schema.register( 'newsletterPane', { isLimit: true, allowIn: 'newsletterContent', allowContentOf: '$root', allowAttributes: [ 'id', 'class' ] } ); // Allow all HTML attributes via GHS schema.addAttributeCheck( ( context, attributeName ) => { if ( context.endsWith( 'newsletterBlock' ) && [ 'data-*', 'class', 'id' ].includes( attributeName ) ) { return true; } } ); } /** * Define upcast and downcast converters. * * Migration from CKEditor 4: * - CKEditor 4: widget's upcast/downcast methods * - CKEditor 5: Separate upcast/downcast converter definitions */ _defineConverters() { const conversion = this.editor.conversion; // Upcast: HTML to model conversion.for( 'upcast' ).elementToElement( { view: { name: 'div', classes: 'newsletter' }, model: ( viewElement, { writer } ) => { return writer.createElement( 'newsletterBlock', { class: viewElement.getAttribute( 'class' ) } ); } } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'ul', classes: 'newsletter-tabs' }, model: ( viewElement, { writer } ) => { return writer.createElement( 'newsletterTabs', { class: viewElement.getAttribute( 'class' ) } ); } } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'li' }, model: ( viewElement, { writer } ) => { return writer.createElement( 'newsletterTabItem', { class: viewElement.getAttribute( 'class' ) } ); } } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'a', attributes: { href: true } }, model: ( viewElement, { writer } ) => { return writer.createElement( 'newsletterTabLink', { href: viewElement.getAttribute( 'href' ), class: viewElement.getAttribute( 'class' ) } ); } } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'div', classes: 'newsletter-content' }, model: ( viewElement, { writer } ) => { return writer.createElement( 'newsletterContent', { class: viewElement.getAttribute( 'class' ) } ); } } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'div', classes: 'tab-pane' }, model: ( viewElement, { writer } ) => { return writer.createElement( 'newsletterPane', { id: viewElement.getAttribute( 'id' ), class: viewElement.getAttribute( 'class' ) } ); } } ); // Downcast: Model to HTML conversion.for( 'downcast' ).elementToElement( { model: 'newsletterBlock', view: ( modelElement, { writer } ) => { const div = writer.createContainerElement( 'div', { class: modelElement.getAttribute( 'class' ) } ); return toWidget( div, writer, { label: 'newsletter widget' } ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterTabs', view: ( modelElement, { writer } ) => { return writer.createContainerElement( 'ul', { class: modelElement.getAttribute( 'class' ) } ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterTabItem', view: ( modelElement, { writer } ) => { return writer.createContainerElement( 'li', { class: modelElement.getAttribute( 'class' ) } ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterTabLink', view: ( modelElement, { writer } ) => { const link = writer.createContainerElement( 'a', { href: modelElement.getAttribute( 'href' ), class: modelElement.getAttribute( 'class' ) } ); return toWidgetEditable( link, writer ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterContent', view: ( modelElement, { writer } ) => { return writer.createContainerElement( 'div', { class: modelElement.getAttribute( 'class' ) } ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterPane', view: ( modelElement, { writer } ) => { return writer.createContainerElement( 'div', { id: modelElement.getAttribute( 'id' ), class: modelElement.getAttribute( 'class' ) } ); } } ); } /** * Register commands. * * Migration from CKEditor 4: * - CKEditor 4: editor.commands.add * - CKEditor 5: editor.commands.add with command class */ _defineCommands() { this.editor.commands.add( 'newsletter', new NewsletterCommand( this.editor ) ); } /** * Handle click and double-click events. * * Migration from CKEditor 4: * - CKEditor 4: widget's events * - CKEditor 5: editing view document events */ _handleEvents() { const editingView = this.editor.editing.view; const model = this.editor.model; // Single click - handle tab switching editingView.document.on( 'click', ( evt, data ) => { const target = data.target; if ( target.is( 'element', 'a' ) && target.hasClass( 'newsletter-tab' ) ) { evt.stop(); model.change( writer => { const tabItems = target.parent.parent.getChildren(); let index = 0; for ( const item of tabItems ) { const link = item.getChild( 0 ); const isActive = link === target; if ( isActive ) { writer.setAttribute( 'class', 'active', link ); writer.setAttribute( 'class', 'active', item ); } else { writer.removeAttribute( 'class', link ); writer.removeAttribute( 'class', item ); } index++; } // Update panes const panes = target.parent.parent.next.getChildren(); let paneIndex = 0; for ( const pane of panes ) { if ( paneIndex === index ) { writer.setAttribute( 'class', 'tab-pane active', pane ); } else { writer.setAttribute( 'class', 'tab-pane', pane ); } paneIndex++; } } ); } } ); // Double click - open dialog for editing editingView.document.on( 'dblclick', ( evt, data ) => { const target = data.target; if ( target.is( 'element', 'a' ) && target.hasClass( 'newsletter-tab' ) ) { evt.stop(); // Find the newsletter block const newsletterBlock = target.findAncestor( 'div', { class: 'newsletter' } ); if ( newsletterBlock ) { // Execute command with data for editing this.editor.execute( 'newsletter', { newsletterBlock: newsletterBlock } ); } } } ); } } ``` ```typescript // newsletter/newsletterui.ts import { Plugin } from 'ckeditor5/src/core'; import { ButtonView, View, InputTextView, LabeledFieldView, createLabeledInputText, createLabeledTextarea } from 'ckeditor5/src/ui'; import { icons } from 'ckeditor5/src/core'; /** * Newsletter UI layer - handles toolbar button and dialog. * * Migration from CKEditor 4: * - CKEditor 4: dialog system with dialog.add * - CKEditor 5: View classes and UI framework */ export default class NewsletterUI extends Plugin { init() { const editor = this.editor; // Register toolbar button editor.ui.componentFactory.add( 'newsletter', locale => { const button = new ButtonView( locale ); button.set( { label: 'Newsletter', icon: icons.newsletter, tooltip: true } ); // Execute command on click this.listenTo( button, 'execute', () => { editor.execute( 'newsletter' ); } ); return button; } ); } } ``` ```typescript // newsletter/newslettercommand.ts import { Command } from 'ckeditor5/src/core'; /** * Newsletter command - handles dialog and model operations. * * Migration from CKEditor 4: * - CKEditor 4: commands with exec method * - CKEditor 5: Command class with execute method */ export default class NewsletterCommand extends Command { execute( options = {} ) { const editor = this.editor; const model = editor.model; // If editing existing newsletter, extract data let existingData = null; if ( options.newsletterBlock ) { existingData = this._extractData( options.newsletterBlock ); } // Show dialog this._showDialog( existingData ); } /** * Extract data from existing newsletter block. */ _extractData( newsletterBlock ) { const data = { title: '', description: '', tabs: [] }; // Extract tabs const tabsList = newsletterBlock.getChild( 0 ); const contentDiv = newsletterBlock.getChild( 1 ); if ( tabsList ) { for ( const tabItem of tabsList.getChildren() ) { const link = tabItem.getChild( 0 ); const tabTitle = link.getChild( 0 ).data; data.tabs.push( { tabTitle: tabTitle, tabContent: '' } ); } } // Extract content if ( contentDiv ) { let index = 0; for ( const pane of contentDiv.getChildren() ) { if ( data.tabs[ index ] ) { data.tabs[ index ].tabContent = this._getPaneContent( pane ); } index++; } } return data; } /** * Get HTML content from a pane. */ _getPaneContent( pane ) { let content = ''; for ( const child of pane.getChildren() ) { content += this._modelToHtml( child ); } return content; } /** * Convert model element to HTML string. */ _modelToHtml( element ) { const editor = this.editor; const html = editor.data.processor.toData( editor.model.createRange( editor.model.createPositionBefore( element ), editor.model.createPositionAfter( element ) ) ); return html; } /** * Show dialog for newsletter creation/editing. */ _showDialog( existingData ) { const editor = this.editor; // Create dialog view const dialog = new View(); // Title input const titleField = new LabeledFieldView( editor.locale, createLabeledInputText ); titleField.label = 'Title'; titleField.value = existingData ? existingData.title : ''; // Description textarea const descriptionField = new LabeledFieldView( editor.locale, createLabeledTextarea ); descriptionField.label = 'Description'; descriptionField.value = existingData ? existingData.description : ''; // Tabs container const tabsContainer = new View(); // Add tab button const addTabButton = new ButtonView( editor.locale ); addTabButton.set( { label: 'Add Tab', withText: true } ); // Tab items array const tabItems = []; // Create tab item view const createTabItem = ( tabData = { tabTitle: '', tabContent: '' } ) => { const tabItem = new View(); const tabTitleField = new LabeledFieldView( editor.locale, createLabeledInputText ); tabTitleField.label = 'Tab Title'; tabTitleField.value = tabData.tabTitle; const tabContentField = new LabeledFieldView( editor.locale, createLabeledTextarea ); tabContentField.label = 'Tab Content (HTML allowed)'; tabContentField.value = tabData.tabContent; const removeButton = new ButtonView( editor.locale ); removeButton.set( { label: 'Remove Tab', withText: true } ); removeButton.on( 'execute', () => { tabItem.destroy(); const index = tabItems.indexOf( tabItem ); if ( index > -1 ) { tabItems.splice( index, 1 ); } } ); tabItem.setTemplate( { tag: 'div', children: [ tabTitleField, tabContentField, removeButton ] } ); tabItems.push( tabItem ); return tabItem; }; // Add tab button handler addTabButton.on( 'execute', () => { const newTab = createTabItem(); tabsContainer.extendTemplate( { children: [ newTab ] } ); } ); // OK button const okButton = new ButtonView( editor.locale ); okButton.set( { label: 'OK', withText: true, class: 'ck-button-action' } ); okButton.on( 'execute', () => { // Collect data const tabs = tabItems.map( item => { return { tabTitle: item.getChild( 0 ).value, tabContent: item.getChild( 1 ).value }; } ); // Insert/update newsletter this._insertNewsletter( { title: titleField.value, description: descriptionField.value, tabs: tabs } ); // Close dialog dialog.destroy(); } ); // Cancel button const cancelButton = new ButtonView( editor.locale ); cancelButton.set( { label: 'Cancel', withText: true } ); cancelButton.on( 'execute', () => { dialog.destroy(); } ); // Build dialog dialog.setTemplate( { tag: 'div', attributes: { class: 'ck-dialog' }, children: [ titleField, descriptionField, tabsContainer, addTabButton, { tag: 'div', attributes: { class: 'ck-dialog-actions' }, children: [ cancelButton, okButton ] } ] } ); // Add to DOM const dialogContainer = document.createElement( 'div' ); document.body.appendChild( dialogContainer ); dialog.render( dialogContainer ); // Add existing tabs if editing if ( existingData ) { for ( const tab of existingData.tabs ) { const newTab = createTabItem( tab ); tabsContainer.extendTemplate( { children: [ newTab ] } ); } } } /** * Insert or update newsletter in model. */ _insertNewsletter( data ) { const editor = this.editor; const model = editor.model; model.change( writer => { // Create newsletter block const newsletterBlock = writer.createElement( 'newsletterBlock', { class: 'newsletter' } ); // Create tabs list const tabsList = writer.createElement( 'newsletterTabs', { class: 'newsletter-tabs' } ); // Create content div const contentDiv = writer.createElement( 'newsletterContent', { class: 'newsletter-content' } ); // Add tabs data.tabs.forEach( ( tab, index ) => { const tabItem = writer.createElement( 'newsletterTabItem', { class: index === 0 ? 'active' : '' } ); const tabLink = writer.createElement( 'newsletterTabLink', { href: `#tab-${index + 1}`, class: index === 0 ? 'active' : '' } ); writer.insertText( tab.tabTitle, tabLink ); writer.append( tabLink, tabItem ); writer.append( tabItem, tabsList ); // Create pane const pane = writer.createElement( 'newsletterPane', { id: `tab-${index + 1}`, class: index === 0 ? 'tab-pane active' : 'tab-pane' } ); // Insert HTML content const viewFragment = editor.data.processor.toView( tab.tabContent ); const modelFragment = editor.data.toModel( viewFragment ); for ( const child of modelFragment.getChildren() ) { writer.append( child, pane ); } writer.append( pane, contentDiv ); } ); // Assemble newsletter writer.append( tabsList, newsletterBlock ); writer.append( contentDiv, newsletterBlock ); // Insert at current position editor.model.insertContent( newsletterBlock ); } ); } refresh() { this.isEnabled = true; } } ``` ```typescript // Editor configuration example import NewsletterPlugin from './newsletter/newsletterplugin'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ NewsletterPlugin ], toolbar: [ 'newsletter' ], // General HTML Support configuration htmlSupport: { allow: [ { name: 'div', classes: [ 'newsletter', 'newsletter-content', 'tab-pane' ], attributes: [ 'id', 'class' ] }, { name: 'ul', classes: [ 'newsletter-tabs' ], attributes: [ 'class' ] }, { name: 'li', attributes: [ 'class' ] }, { name: 'a', attributes: [ 'href', 'class' ] } ] } } ) .catch( error => { console.error( error ); } ); ``` ## Key Migration Differences from CKEditor 4: 1. **Plugin Architecture**: CKEditor 4 used `editor.widgets.add()` with widget definitions. CKEditor 5 uses separate plugin classes for editing and UI layers. 2. **Schema System**: CKEditor 4 used `allowedContent` strings. CKEditor 5 uses a strict schema registration system with `schema.register()`. 3. **Conversion**: CKEditor 4 used `upcast`/`downcast` methods on widgets. CKEditor 5 uses separate converter definitions with `conversion.for()`. 4. **Commands**: CKEditor 4 used `editor.commands.add()` with simple objects. CKEditor 5 uses Command classes with `execute()` and `refresh()` methods. 5. **UI Framework**: CKEditor 4 used dialogs with `dialog.add()`. CKEditor 5 uses View classes and the UI component system. 6. **Event Handling**: CKEditor 4 used widget events. CKEditor 5 uses editing view document events. 7. **Widget API**: CKEditor 4 had `widget.wrap()` and `widget.wrapEditable()`. CKEditor 5 uses `toWidget()` and `toWidgetEditable()`. 8. **HTML Support**: CKEditor 4 used `allowedContent` and `disallowedContent`. CKEditor 5 uses the General HTML Support (GHS) plugin with `htmlSupport` configuration. The plugin follows CKEditor 5 best practices with proper separation of concerns, strict schema validation, and model-view architecture.

Construye un plugin de boletín informativo para CKEditor 5

Contenido del PromptGuardar

Uso

Referencias

Discusión