### Webpack build output example Source: https://ckeditor.com/docs/ckeditor5/lts-v47/getting-started/legacy/installation-methods/quick-start-other.html Example output from a successful webpack build in development mode. ```text Hash: c96beab038124d61568f Version: webpack 5.58.1 Time: 3023ms Built at: 2022-03-02 17:37:38 Asset Size Chunks Chunk Names bundle.js 2.45 MiB main [emitted] main bundle.js.map 2.39 MiB main [emitted] main [./app.js] 638 bytes {main} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {main} [built] [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built] + 491 hidden modules ``` -------------------------------- ### Get started with starter project Source: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-1.html Commands to clone the CKEditor 5 abbreviation plugin starter project, install dependencies, and start the development server. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/starter-files abbreviation-plugin cd abbreviation-plugin npm install npm run dev ``` -------------------------------- ### Getting editor data with getData() Source: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html Use the `getData()` method to retrieve the editor content on demand, for example, for sending it to the server. ```javascript const data = editor.getData(); ``` -------------------------------- ### Starter project setup Source: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/implementing-a-block-widget.html Commands to clone the starter project, install dependencies, and start the development server. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/block-widget/starter-files block-widget cd block-widget npm install npm run dev ``` -------------------------------- ### Starter project setup Source: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/widgets/using-react-in-a-widget.html Commands to clone the starter project, install dependencies, and start the development server. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/react-widget/starter-files react-widget cd react-widget npm install npm run dev ``` -------------------------------- ### Running the Electron application Source: https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/self-hosted/electron.html Commands to navigate to the app directory and start the Electron application after setup. ```bash cd my-app npm start ``` -------------------------------- ### Quick Implementation Example Source: https://ckeditor.com/docs/ckbox/latest/guides/quick-start.html A basic HTML structure demonstrating how to mount CKBox using its CDN build and a placeholder token URL. ```html

``` -------------------------------- ### Example of getting and setting data with pending actions Source: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html This example demonstrates how to enable/disable a "Save" button and prevent users from leaving the page without saving data by utilizing the `PendingActions` plugin. ```javascript import { ClassicEditor, PendingActions } from 'ckeditor5'; let isDirty = false; ClassicEditor .create( { attachTo: document.querySelector( '#editor' ), plugins: [ PendingActions, // ... other plugins ] } ) .then( editor => { window.editor = editor; handleStatusChanges( editor ); handleSaveButton( editor ); handleBeforeunload( editor ); } ) .catch( err => { console.error( err.stack ); } ); // Handle clicking the "Save" button by sending the data to a // fake HTTP server (emulated here with setTimeout()). function handleSaveButton( editor ) { const saveButton = document.querySelector( '#save' ); const pendingActions = editor.plugins.get( 'PendingActions' ); saveButton.addEventListener( 'click', evt => { const data = editor.getData(); // Register the action of saving the data as a "pending action". // All asynchronous actions related to the editor are tracked like this, // so later on you only need to check `pendingActions.hasAny` to check // whether the editor is busy or not. const action = pendingActions.add( 'Saving changes' ); evt.preventDefault(); // Save the data to a fake HTTP server. setTimeout( () => { pendingActions.remove( action ); // Reset isDirty only if the data did not change in the meantime. if ( data == editor.getData() ) { isDirty = false; } updateStatus( editor ); }, HTTP_SERVER_LAG ); } ); } // Listen to new changes (to enable the "Save" button) and to // pending actions (to show the spinner animation when the editor is busy). function handleStatusChanges( editor ) { editor.plugins.get( 'PendingActions' ).on( 'change:hasAny', () => updateStatus( editor ) ); editor.model.document.on( 'change:data', () => { isDirty = true; updateStatus( editor ); } ); } // If the user tries to leave the page before the data is saved, ask // them whether they are sure they want to proceed. function handleBeforeunload( editor ) { const pendingActions = editor.plugins.get( 'PendingActions' ); window.addEventListener( 'beforeunload', evt => { if ( pendingActions.hasAny ) { evt.preventDefault(); } } ); } function updateStatus( editor ) { const saveButton = document.querySelector( '#save' ); // Disables the "Save" button when the data on the server is up to date. if ( isDirty ) { saveButton.classList.add( 'active' ); } else { saveButton.classList.remove( 'active' ); } // Shows the spinner animation. if ( editor.plugins.get( 'PendingActions' ).hasAny ) { saveButton.classList.add( 'saving' ); } else { saveButton.classList.remove( 'saving' ); } } ``` ```javascript const { ClassicEditor, PendingActions } = CKEDITOR; let isDirty = false; ClassicEditor .create( { attachTo: document.querySelector( '#editor' ), plugins: [ PendingActions, // ... other plugins ] } ) .then( editor => { window.editor = editor; handleStatusChanges( editor ); handleSaveButton( editor ); handleBeforeunload( editor ); } ) .catch( err => { console.error( err.stack ); } ); // Handle clicking the "Save" button by sending the data to a // fake HTTP server (emulated here with setTimeout()). function handleSaveButton( editor ) { const saveButton = document.querySelector( '#save' ); const pendingActions = editor.plugins.get( 'PendingActions' ); saveButton.addEventListener( 'click', evt => { const data = editor.getData(); // Register the action of saving the data as a "pending action". // All asynchronous actions related to the editor are tracked like this, // so later on you only need to check `pendingActions.hasAny` to check // whether the editor is busy or not. const action = pendingActions.add( 'Saving changes' ); evt.preventDefault(); // Save the data to a fake HTTP server. setTimeout( () => { pendingActions.remove( action ); // Reset isDirty only if the data did not change in the meantime. if ( data == editor.getData() ) { isDirty = false; } updateStatus( editor ); }, HTTP_SERVER_LAG ); } ); } // Listen to new changes (to enable the "Save" button) and to // pending actions (to show the spinner animation when the editor is busy). function handleStatusChanges( editor ) { editor.plugins.get( 'PendingActions' ).on( 'change:hasAny', () => updateStatus( editor ) ); editor.model.document.on( 'change:data', () => { isDirty = true; updateStatus( editor ); } ); } // If the user tries to leave the page before the data is saved, ask // them whether they are sure they want to proceed. function handleBeforeunload( editor ) { const pendingActions = editor.plugins.get( 'PendingActions' ); window.addEventListener( 'beforeunload', evt => { if ( pendingActions.hasAny ) { evt.preventDefault(); } } ); } function updateStatus( editor ) { const saveButton = document.querySelector( '#save' ); // Disables the "Save" button when the data on the server is up to date. if ( isDirty ) { saveButton.classList.add( 'active' ); } else { saveButton.classList.remove( 'active' ); } // Shows the spinner animation. if ( editor.plugins.get( 'PendingActions' ).hasAny ) { saveButton.classList.add( 'saving' ); } else { saveButton.classList.remove( 'saving' ); } } ``` -------------------------------- ### Install and run the project Source: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-3.html Commands to download the starter files for this part, install dependencies, and run the development server. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/part-2 abbreviation-plugin cd abbreviation-plugin npm install npm run dev ``` -------------------------------- ### Legacy webpack.config.js setup Source: https://ckeditor.com/docs/ckeditor5/latest/getting-started/legacy/installation-methods/quick-start-other.html An example of a webpack configuration file used with older CKEditor 5 installation methods, demonstrating how translations, CSS, and SVG files were handled. ```javascript // webpack.config.js const path = require( 'path' ); const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' ); const { styles } = require( '@ckeditor/ckeditor5-dev-utils' ); module.exports = { entry: './src/index.js', output: { path: path.resolve( __dirname, 'dist' ), filename: 'bundle.js' }, plugins: [ new CKEditorTranslationsPlugin( { language: 'en' } ) ], module: { rules: [ { test: /\.svg$/, use: [ 'raw-loader' ] }, { test: /ckeditor5-[^/\\]+[/\]theme[/\\].+\.css$/, use: [ { loader: 'style-loader', options: { injectType: 'singletonStyleTag', attributes: { 'data-cke': true } } }, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: styles.getPostCssConfig( { minify: true } ) } } ] } ] } }; ``` -------------------------------- ### Accessing editor data in PHP Source: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html Example of how to access the editor's data from a POST request in PHP. ```php ``` -------------------------------- ### CDN Quick Example Source: https://ckeditor.com/docs/ckbox/latest/guides/installation.html A basic HTML structure demonstrating CKBox integration using CDN. ```html

``` -------------------------------- ### Quick implementation example using CDN Source: https://ckeditor.com/docs/ckbox/latest/features/sdk/frontend-sdk/installation.html A basic HTML structure demonstrating the quick implementation of the CKBox Uploader Widget using CDN. ```html

``` -------------------------------- ### Classic editor integration with HTML form Source: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html This example shows how to integrate the Classic editor with a standard HTML form, allowing data to be submitted automatically. ```html CKEditor 5 - Classic editor

Classic editor

``` -------------------------------- ### Storing editor instance for getData() Source: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html Store a reference to the editor instance to use methods like `getData()`. This example shows how to assign the editor to a variable defined outside the `then()` callback. ```javascript let editor; ClassicEditor .create( { licenseKey: '', // Or 'GPL'. plugins: [ /* ... */ ], toolbar: [ /* ... */ ] } ) .then( newEditor => { editor = newEditor; } ) .catch( error => { console.error( error ); } ); // Assuming there is a in your application. document.querySelector( '#submit' ).addEventListener( 'click', () => { const editorData = editor.getData(); // ... } ); ``` -------------------------------- ### Starter Project Setup Source: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/creating-simple-plugin-timestamp.html Commands to clone the starter project, install dependencies, and run the development server. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/timestamp-plugin/starter-files timestamp-plugin cd timestamp-plugin npm install npm run dev ``` -------------------------------- ### Encoding data for HTML textarea Source: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html Example of how to properly encode data using PHP's `htmlspecialchars` function when printing it into an HTML textarea to prevent data loss or rendering issues. ```php Hello, world!

", ENT_QUOTES, 'UTF-8'); ?> ``` -------------------------------- ### Install from the npm Registry Source: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html To install the official CKEditor 4 npm package run: ```bash npm install ckeditor4 ``` -------------------------------- ### Final Project Setup Source: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/widgets/using-react-in-a-widget.html Commands to clone the final project repository, install dependencies, and start the development server. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/react-widget/final-project final-project cd final-project npm install npm run dev ``` -------------------------------- ### Starter commands Source: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-2.html Commands to clone the starter files and set up the project for the current tutorial part. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/part-1 abbreviation-plugin cd abbreviation-plugin npm install npm run dev ``` -------------------------------- ### CDN Setup Source: https://ckeditor.com/docs/ckeditor5/lts-v47/features/ai/ckeditor-ai-integration.html Example of installing and configuring CKEditor AI with CDN. ```javascript const { ClassicEditor } = CKEDITOR; const { AIChat, AIQuickActions, AIActions, AIReviewMode, AITranslate, AIBalloon, AIEditorIntegration, AIChatShortcuts, TrackChanges } = CKEDITOR_PREMIUM_FEATURES; ClassicEditor .create( document.querySelector( '#editor' ), { licenseKey: '', plugins: [ // AI plugins responsible for the core functionality. AIChat, AIQuickActions, AIReviewMode, AITranslate, AIEditorIntegration, AIChatShortcuts, // Recommended TrackChanges dependency. Follow the guide to learn more. TrackChanges, /* ... */ ], // AI feature configuration. ai: { // Mandatory UI configuration. container: { /* ... */ }, /* ... */ } /* Other configurations. Follow the guide to learn more. */ } ) .then( /* ... */ ) .catch( /* ... */ ); ``` -------------------------------- ### CDN setup Source: https://ckeditor.com/docs/ckeditor5/latest/features/template.html Example of how to install and configure the Template feature using CDN. ```javascript const { ClassicEditor } = CKEDITOR; const { Template } = CKEDITOR_PREMIUM_FEATURES; ClassicEditor .create( { licenseKey: '', plugins: [ Template, /* ... */ ], toolbar: [ 'insertTemplate', /* ... */ ], // Configure the feature. template: { definitions: [ { title: 'The title of the template', description: 'A longer description of the template', data: '

Data inserted into the content

' }, { // ... }, // More template definitions. // ... ] } } ) .then( /* ... */ ) .catch( /* ... */ ); ``` -------------------------------- ### Bootstrapping the project Source: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/widgets/implementing-an-inline-widget.html Commands to set up the starter project for the inline widget. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/inline-widget/starter-files inline-widget cd inline-widget npm install npm run dev ``` -------------------------------- ### NPM setup Source: https://ckeditor.com/docs/ckeditor5/latest/features/template.html Example of how to install and configure the Template feature using NPM. ```javascript import { ClassicEditor } from 'ckeditor5'; import { Template } from 'ckeditor5-premium-features'; ClassicEditor .create( { licenseKey: '', plugins: [ Template, /* ... */ ], toolbar: [ 'insertTemplate', /* ... */ ], // Configure the feature. template: { definitions: [ { title: 'The title of the template', description: 'A longer description of the template', data: '

Data inserted into the content

' }, { // ... }, // More template definitions. // ... ] } } ) .then( /* ... */ ) .catch( /* ... */ ); ``` -------------------------------- ### Starter Project Setup Source: https://ckeditor.com/docs/ckeditor5/latest/features/pagination/pagination-integration.html Commands to clone the starter project, install dependencies, and run the development server. ```bash npx -y degit ckeditor/ckeditor5-tutorials-examples/pagination-and-exports/starter-files pagination-and-exports cd pagination-and-exports npm install npm run dev ```