Créez un plugin de newsletter 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: * - In CKEditor 4, plugins were registered via `editor.plugins.add()` * - In CKEditor 5, plugins are ES6 classes extending `Plugin` * - Plugin initialization happens in `init()` method instead of `init` callback */ export default class NewsletterPlugin extends Plugin { /** * Plugin dependencies - editing and UI parts are separated * This follows CKEditor 5 architecture where each plugin has * editing and UI components that can be loaded independently */ public static get requires() { return [ NewsletterEditing, NewsletterUI ] as const; } /** * Plugin name - used for identification in editor configuration */ public static get pluginName() { return 'NewsletterPlugin' as const; } /** * Initialize the plugin * In CKEditor 4 this was `init` callback */ public init(): void { console.log( 'NewsletterPlugin was initialized' ); } } ``` ```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 plugin - handles schema, converters, and model logic * * Migration from CKEditor 4: * - CKEditor 4 used `editor.model.schema.register()` with callbacks * - CKEditor 5 uses declarative schema registration * - Converters replaced `upcast` and `downcast` callbacks from CKEditor 4 */ export default class NewsletterEditing extends Plugin { public static get pluginName() { return 'NewsletterEditing' as const; } public static get requires() { return [ Widget ] as const; } public init(): void { this._defineSchema(); this._defineConverters(); this._defineCommands(); this._defineClickHandlers(); } /** * Define schema for newsletter block * * Migration from CKEditor 4: * - CKEditor 4 used `editor.model.schema.register()` with callbacks * - CKEditor 5 uses declarative schema registration */ private _defineSchema(): void { const schema = this.editor.model.schema; // Register newsletterBlock as a block element schema.register( 'newsletterBlock', { // Allow block element to be inserted in root isObject: true, allowWhere: '$block', allowContentOf: '$root', // Allow specific attributes allowAttributes: [ 'class', 'id' ] } ); // Register tab list element schema.register( 'newsletterTabs', { isLimit: true, allowIn: 'newsletterBlock', allowContentOf: '$block' } ); // Register tab item schema.register( 'newsletterTab', { isLimit: true, allowIn: 'newsletterTabs', allowContentOf: '$block' } ); // Register tab link schema.register( 'newsletterTabLink', { isLimit: true, allowIn: 'newsletterTab', allowAttributes: [ 'href', 'class' ] } ); // Register content container schema.register( 'newsletterContent', { isLimit: true, allowIn: 'newsletterBlock', allowContentOf: '$block' } ); // Register tab pane schema.register( 'newsletterTabPane', { isLimit: true, allowIn: 'newsletterContent', allowAttributes: [ 'id', 'class' ] } ); // Allow all these elements to have data attributes schema.addAttributeCheck( ( context, attributeName ) => { if ( attributeName.startsWith( 'data-' ) ) { return true; } } ); } /** * Define converters for upcast and downcast * * Migration from CKEditor 4: * - CKEditor 4 used `editor.data.upcast()` and `editor.data.downcast()` * - CKEditor 5 uses `conversion.for()` with specific converters */ private _defineConverters(): void { const conversion = this.editor.conversion; // Upcast: HTML to model conversion.for( 'upcast' ).elementToElement( { view: { name: 'div', classes: 'newsletter' }, model: 'newsletterBlock' } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'ul', classes: 'newsletter-tabs' }, model: 'newsletterTabs' } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'li' }, model: 'newsletterTab' } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'a' }, model: 'newsletterTabLink' } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'div', classes: 'newsletter-content' }, model: 'newsletterContent' } ); conversion.for( 'upcast' ).elementToElement( { view: { name: 'div', classes: 'tab-pane' }, model: 'newsletterTabPane' } ); // Downcast: model to HTML conversion.for( 'downcast' ).elementToElement( { model: 'newsletterBlock', view: ( modelElement, { writer } ) => { const div = writer.createContainerElement( 'div', { class: 'newsletter' } ); return toWidget( div, writer, { label: 'Newsletter block' } ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterTabs', view: ( modelElement, { writer } ) => { return writer.createContainerElement( 'ul', { class: 'newsletter-tabs' } ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterTab', view: ( modelElement, { writer } ) => { return writer.createContainerElement( 'li' ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterTabLink', view: ( modelElement, { writer } ) => { const href = modelElement.getAttribute( 'href' ) || '#'; const classAttr = modelElement.getAttribute( 'class' ) || ''; return writer.createContainerElement( 'a', { href, class: classAttr } ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterContent', view: ( modelElement, { writer } ) => { return writer.createContainerElement( 'div', { class: 'newsletter-content' } ); } } ); conversion.for( 'downcast' ).elementToElement( { model: 'newsletterTabPane', view: ( modelElement, { writer } ) => { const id = modelElement.getAttribute( 'id' ) || ''; const classAttr = modelElement.getAttribute( 'class' ) || ''; return writer.createContainerElement( 'div', { id, class: classAttr } ); } } ); // Attribute converters for class and id conversion.for( 'downcast' ).attributeToAttribute( { model: 'class', view: 'class' } ); conversion.for( 'downcast' ).attributeToAttribute( { model: 'id', view: 'id' } ); conversion.for( 'downcast' ).attributeToAttribute( { model: 'href', view: 'href' } ); } /** * Define commands */ private _defineCommands(): void { this.editor.commands.add( 'newsletter', new NewsletterCommand( this.editor ) ); } /** * Handle click events on tab links * * Migration from CKEditor 4: * - CKEditor 4 used `editor.on('click')` with DOM events * - CKEditor 5 uses editing view document events */ private _defineClickHandlers(): void { const editingView = this.editor.editing.view; // Single click - switch tabs editingView.document.on( 'click', ( evt, data ) => { const target = data.target; // Check if clicked element is a tab link if ( target && target.is( 'element', 'a' ) ) { const tabLink = target; const href = tabLink.getAttribute( 'href' ); if ( href && href.startsWith( '#tab-' ) ) { evt.stop(); this._switchTab( tabLink, href ); } } } ); // Double click - open dialog for editing editingView.document.on( 'dblclick', ( evt, data ) => { const target = data.target; if ( target && target.is( 'element', 'a' ) ) { const tabLink = target; const href = tabLink.getAttribute( 'href' ); if ( href && href.startsWith( '#tab-' ) ) { evt.stop(); this._openEditDialog( tabLink ); } } } ); } /** * Switch active tab */ private _switchTab( tabLink: any, href: string ): void { const model = this.editor.model; const tabId = href.substring( 1 ); // Remove '#' model.change( writer => { // Find all tab links and panes const root = model.document.getRoot(); // Remove active class from all tab links const allTabLinks = this._findAll( root, ( node: any ) => node.is( 'element', 'newsletterTabLink' ) ); allTabLinks.forEach( ( link: any ) => { writer.setAttribute( 'class', 'newsletter-tab-link', link ); } ); // Add active class to clicked tab link writer.setAttribute( 'class', 'newsletter-tab-link active', tabLink ); // Find corresponding pane and update classes const allPanes = this._findAll( root, ( node: any ) => node.is( 'element', 'newsletterTabPane' ) ); allPanes.forEach( ( pane: any ) => { const paneId = pane.getAttribute( 'id' ); if ( paneId === tabId ) { writer.setAttribute( 'class', 'tab-pane active', pane ); } else { writer.setAttribute( 'class', 'tab-pane', pane ); } } ); } ); } /** * Open edit dialog for existing newsletter */ private _openEditDialog( tabLink: any ): void { // This will be handled by the UI plugin // We emit an event that the UI plugin listens to this.editor.fire( 'newsletter:edit', tabLink ); } /** * Helper to find all elements matching predicate */ private _findAll( root: any, predicate: ( node: any ) => boolean ): any[] { const results: any[] = []; const walk = ( node: any ) => { if ( predicate( node ) ) { results.push( node ); } for ( const child of node.getChildren() ) { walk( child ); } }; walk( root ); return results; } } ``` ```typescript // newsletter/newsletterui.ts import { Plugin } from 'ckeditor5/src/core'; import { ButtonView, View, InputTextView, LabeledFieldView, createLabeledInputText, createLabeledTextarea } from 'ckeditor5/src/ui'; import { ContextualBalloon, clickOutsideHandler } from 'ckeditor5/src/ui'; /** * Newsletter UI plugin - handles toolbar button and dialog * * Migration from CKEditor 4: * - CKEditor 4 used `editor.ui.addButton()` and `editor.ui.addDialog()` * - CKEditor 5 uses View classes and ContextualBalloon */ export default class NewsletterUI extends Plugin { private _balloon: ContextualBalloon; private _formView: NewsletterFormView | null = null; public static get pluginName() { return 'NewsletterUI' as const; } public static get requires() { return [ ContextualBalloon ] as const; } public init(): void { this._balloon = this.editor.plugins.get( ContextualBalloon ); // Add toolbar button this._addToolbarButton(); // Listen for edit events from editing plugin this.editor.on( 'newsletter:edit', ( evt, tabLink ) => { this._showDialog( tabLink ); } ); } /** * Add toolbar button */ private _addToolbarButton(): void { const editor = this.editor; const t = editor.t; editor.ui.componentFactory.add( 'newsletter', locale => { const buttonView = new ButtonView( locale ); buttonView.set( { label: t( 'Newsletter' ), icon: ' ', tooltip: true } ); // Execute command on click buttonView.on( 'execute', () => { this._showDialog(); } ); return buttonView; } ); } /** * Show dialog for creating/editing newsletter */ private _showDialog( tabLink?: any ): void { const editor = this.editor; // Create form view if not exists if ( !this._formView ) { this._formView = new NewsletterFormView( editor.locale ); this._formView.on( 'submit', () => this._handleSubmit( tabLink ) ); this._formView.on( 'cancel', () => this._hideDialog() ); } // Load existing data if editing if ( tabLink ) { this._loadExistingData( tabLink ); } // Show balloon this._balloon.add( { view: this._formView, position: this._getBalloonPosition() } ); // Focus first input this._formView.focus(); } /** * Hide dialog */ private _hideDialog(): void { if ( this._formView ) { this._balloon.remove( this._formView ); } } /** * Handle form submission */ private _handleSubmit( tabLink?: any ): void { const editor = this.editor; const formData = this._formView!.getFormData(); // Execute command to insert/update newsletter editor.execute( 'newsletter', formData, tabLink ); // Hide dialog this._hideDialog(); } /** * Load existing data into form */ private _loadExistingData( tabLink: any ): void { // Find parent newsletter block const model = this.editor.model; const root = model.document.getRoot(); // Find the newsletter block containing this tab link // This is simplified - in production you'd traverse up from the tab link const newsletterBlock = this._findNewsletterBlock( tabLink ); if ( newsletterBlock ) { // Extract data from model const title = newsletterBlock.getAttribute( 'title' ) || ''; const description = newsletterBlock.getAttribute( 'description' ) || ''; // Set form values this._formView!.setFormData( { title, description } ); } } /** * Find newsletter block containing element */ private _findNewsletterBlock( element: any ): any { let current = element; while ( current && !current.is( 'element', 'newsletterBlock' ) ) { current = current.parent; } return current; } /** * Get balloon position */ private _getBalloonPosition() { const view = this.editor.editing.view; const viewDocument = view.document; return { target: viewDocument.selection }; } } /** * Form view for newsletter dialog */ class NewsletterFormView extends View { public titleInput: LabeledFieldView; public descriptionInput: LabeledFieldView; public tabsContainer: View; public tabInputs: Array = []; private _addTabButton: ButtonView; private _submitButton: ButtonView; private _cancelButton: ButtonView; constructor( locale: any ) { super( locale ); const t = locale.t; // Create title input this.titleInput = new LabeledFieldView( locale, createLabeledInputText ); this.titleInput.label = t( 'Title' ); // Create description input this.descriptionInput = new LabeledFieldView( locale, createLabeledTextarea ); this.descriptionInput.label = t( 'Description' ); // Create tabs container this.tabsContainer = new View( locale ); this.tabsContainer.setTemplate( { tag: 'div', attributes: { class: 'newsletter-tabs-container' } } ); // Create add tab button this._addTabButton = new ButtonView( locale ); this._addTabButton.set( { label: t( 'Add Tab' ), withText: true } ); this._addTabButton.on( 'execute', () => this._addTab() ); // Create submit button this._submitButton = new ButtonView( locale ); this._submitButton.set( { label: t( 'OK' ), class: 'ck-button-action', withText: true } ); this._submitButton.on( 'execute', () => this.fire( 'submit' ) ); // Create cancel button this._cancelButton = new ButtonView( locale ); this._cancelButton.set( { label: t( 'Cancel' ), withText: true } ); this._cancelButton.on( 'execute', () => this.fire( 'cancel' ) ); // Set template this.setTemplate( { tag: 'div', attributes: { class: 'ck ck-newsletter-form' }, children: [ this.titleInput, this.descriptionInput, this.tabsContainer, this._addTabButton, new View( locale, { template: { tag: 'div', attributes: { class: 'ck-newsletter-form-buttons' }, children: [ this._submitButton, this._cancelButton ] } } ) ] } ); // Add initial tab this._addTab(); } /** * Add a new tab input row */ private _addTab(): void { const locale = this.locale!; const t = locale.t; // Create tab title input const tabTitle = new LabeledFieldView( locale, createLabeledInputText ); tabTitle.label = t( 'Tab Title' ); // Create tab content input const tabContent = new LabeledFieldView( locale, createLabeledTextarea ); tabContent.label = t( 'Tab Content' ); // Create remove button const removeButton = new ButtonView( locale ); removeButton.set( { label: t( 'Remove' ), withText: true } ); // Create container for this tab const tabContainer = new View( locale ); tabContainer.setTemplate( { tag: 'div', attributes: { class: 'ck-newsletter-tab-row' }, children: [ tabTitle, tabContent, removeButton ] } ); // Add to tabs container this.tabsContainer.extendTemplate( { children: [ tabContainer ] } ); // Store inputs this.tabInputs.push( { title: tabTitle, content: tabContent } ); // Handle remove removeButton.on( 'execute', () => { this._removeTab( tabContainer, this.tabInputs.length - 1 ); } ); } /** * Remove a tab */ private _removeTab( container: View, index: number ): void { // Remove from DOM container.destroy(); // Remove from array this.tabInputs.splice( index, 1 ); } /** * Get form data */ public getFormData(): any { return { title: this.titleInput.fieldView.element.value, description: this.descriptionInput.fieldView.element.value, tabs: this.tabInputs.map( tab => ( { title: tab.title.fieldView.element.value, content: tab.content.fieldView.element.value } ) ) }; } /** * Set form data */ public setFormData( data: any ): void { this.titleInput.fieldView.element.value = data.title || ''; this.descriptionInput.fieldView.element.value = data.description || ''; // Clear existing tabs this.tabInputs = []; this.tabsContainer.element.innerHTML = ''; // Add tabs from data if ( data.tabs ) { data.tabs.forEach( ( tab: any ) => { this._addTab(); const lastIndex = this.tabInputs.length - 1; this.tabInputs[lastIndex].title.fieldView.element.value = tab.title || ''; this.tabInputs[lastIndex].content.fieldView.element.value = tab.content || ''; } ); } } /** * Focus first input */ public focus(): void { this.titleInput.focus(); } } ``` ```typescript // newsletter/newslettercommand.ts import { Command } from 'ckeditor5/src/core'; /** * Newsletter command - handles insertion and updates * * Migration from CKEditor 4: * - CKEditor 4 used `editor.execCommand()` with command names * - CKEditor 5 uses Command classes with `execute()` method */ export default class NewsletterCommand extends Command { /** * Execute command */ public execute( data: any, tabLink?: any ): void { const editor = this.editor; const model = editor.model; model.change( writer => { if ( tabLink ) { // Update existing newsletter this._updateNewsletter( writer, tabLink, data ); } else { // Insert new newsletter this._insertNewsletter( writer, data ); } } ); } /** * Insert new newsletter block */ private _insertNewsletter( writer: any, data: any ): void { const model = this.editor.model; // Create newsletter block const newsletterBlock = writer.createElement( 'newsletterBlock', { class: 'newsletter' } ); // Create tabs list const tabsList = writer.createElement( 'newsletterTabs', { class: 'newsletter-tabs' } ); // Create content container const contentContainer = writer.createElement( 'newsletterContent', { class: 'newsletter-content' } ); // Add tabs data.tabs.forEach( ( tab: any, index: number ) => { // Create tab item const tabItem = writer.createElement( 'newsletterTab' ); const tabLink = writer.createElement( 'newsletterTabLink', { href: `#tab-${index + 1}`, class: index === 0 ? 'active' : '' } ); writer.appendText( tab.title, {}, tabLink ); writer.append( tabLink, tabItem ); writer.append( tabItem, tabsList ); // Create tab pane const tabPane = writer.createElement( 'newsletterTabPane', { id: `tab-${index + 1}`, class: index === 0 ? 'tab-pane active' : 'tab-pane' } ); writer.appendText( tab.content, {}, tabPane ); writer.append( tabPane, contentContainer ); } ); // Assemble newsletter block writer.append( tabsList, newsletterBlock ); writer.append( contentContainer, newsletterBlock ); // Insert at current position model.insertContent( newsletterBlock ); // Select inserted element writer.setSelection( newsletterBlock, 'on' ); } /** * Update existing newsletter */ private _updateNewsletter( writer: any, tabLink: any, data: any ): void { // Find parent newsletter block let newsletterBlock = tabLink; while ( newsletterBlock && !newsletterBlock.is( 'element', 'newsletterBlock' ) ) { newsletterBlock = newsletterBlock.parent; } if ( newsletterBlock ) { // Remove existing content writer.remove( newsletterBlock ); // Insert new content this._insertNewsletter( writer, data ); } } } ``` ## Editor Configuration ```typescript // editor-config.ts import NewsletterPlugin from './newsletter/newsletterplugin'; // Editor configuration const config = { plugins: [ NewsletterPlugin ], toolbar: { items: [ 'newsletter', // ... other toolbar items ] }, // GeneralHtmlSupport configuration htmlSupport: { allow: [ { name: 'div', classes: [ 'newsletter', 'newsletter-tabs', 'newsletter-content', 'tab-pane', 'active' ], attributes: [ 'id', 'href' ] }, { name: 'ul', classes: [ 'newsletter-tabs' ] }, { name: 'li' }, { name: 'a', classes: [ 'active' ], attributes: [ 'href' ] }, { name: 'div', classes: [ 'tab-pane', 'active' ], attributes: [ 'id' ] } ] } }; ``` ## Migration Differences from CKEditor 4 1. **Plugin Architecture**: CKEditor 4 used `editor.plugins.add()` with callbacks; CKEditor 5 uses ES6 classes extending `Plugin` 2. **Schema**: CKEditor 4 used `editor.model.schema.register()` with callbacks; CKEditor 5 uses declarative schema registration 3. **Converters**: CKEditor 4 used `upcast` and `downcast` callbacks; CKEditor 5 uses `conversion.for()` with specific converter types 4. **UI**: CKEditor 4 used `editor.ui.addButton()` and `editor.ui.addDialog()`; CKEditor 5 uses View classes and ContextualBalloon 5. **Commands**: CKEditor 4 used `editor.execCommand()`; CKEditor 5 uses Command classes with `execute()` method 6. **Events**: CKEditor 4 used DOM events; CKEditor 5 uses editing view document events 7. **Widgets**: CKEditor 4 used `widget` plugin; CKEditor 5 uses `toWidget()` and `toWidgetEditable()` utilities ## Registering the Plugin ```typescript // app.ts import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; import NewsletterPlugin from './newsletter/newsletterplugin'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ NewsletterPlugin ], toolbar: [ 'newsletter' ], htmlSupport: { // ... configuration as above } } ) .then( editor => { console.log( 'Editor initialized with NewsletterPlugin' ); } ) .catch( error => { console.error( error ); } ); ``` ## GeneralHtmlSupport Configuration To enable GHS for custom classes and attributes: ```typescript const config = { htmlSupport: { allow: [ // Allow specific classes on div elements { name: 'div', classes: [ 'newsletter', 'newsletter-tabs', 'newsletter-content', 'tab-pane', 'active' ] }, // Allow data attributes on all elements { name: /.*/, attributes: /^data-/ } ] } }; ``` This configuration allows the editor to preserve custom classes and data attributes when loading and saving content.

Créez un plugin de newsletter CKEditor 5

Contenu du PromptEnregistrer

Utilisation

Références

Discussion