Using CKEditor 5 with Vue.js: A Step-by-Step Guide
--
Let’s start with the basics. What exactly is a Rich Text Editor? In simple terms, it’s like the control center for content creation on the web. Imagine a word processor embedded in your web application. That’s an RTE! It’s not just about typing text; it’s about bringing it to life with formatting, images, and multimedia elements. Rich Text Editors (RTEs) play a pivotal role in modern web development. Imagine a word processor embedded within your web application; that’s precisely what an RTE is. However, it’s not just about typing plain text; it’s about bringing that text to life with formatting, images, and multimedia elements.
Integrating CKEditor 5 with Vue.js
Rich text editors are essential for creating web applications that allow users to format and style text effortlessly. CKEditor 5 is a popular choice for implementing rich text editors, and when combined with Vue.js, it becomes a powerful tool for creating seamless and feature-rich text editing experiences. In this comprehensive tutorial, we will walk you through the entire process of integrating CKEditor 5 into a Vue.js application, including features like image upload. Let’s dive in!
Prerequisites
Before diving into this tutorial, it’s essential to have a basic understanding of Vue.js. If you’re new to Vue.js, consider going through introductory Vue.js resources first.
Installing Vue CLI
The first step is to install the Vue CLI (Command Line Interface) globally on your computer. This tool simplifies the process of creating and managing Vue.js projects.
Open your terminal or command prompt and run the following command:
npm install -g @vue/cliCreating a Vue Project.
Now that you have the Vue CLI installed, you can create a new Vue.js project. Navigate to the directory where you want to create your project and run the following command:
vue create demo-ckeditor5-projectThis command initializes a new Vue.js project named “demo-ckeditor5-project.” It may take a few moments to set up the project.
Starting the Development Server
Once the project is created, navigate into the project directory
cd demo-ckeditor5-project
Now, you can start the development server to see your Vue.js application in action:
npm run serveThis command will compile your Vue.js project and start the development server. Open your web browser and go to the URL provided (usually http://localhost:8080) to see your Vue.js application running.
Configure vue.config.js
To integrate CKEditor 5 with your Vue.js application, some modifications are needed in the project configuration. Create a vue.config.js file in the project's root directory (next to package.json) if it doesn't already exist.
const path = require('path');
const { CKEditorTranslationsPlugin } = require('@ckeditor/ckeditor5-dev-translations');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');
module.exports = {
transpileDependencies: [
/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
],
configureWebpack: {
plugins: [
new CKEditorTranslationsPlugin({
language: 'en',
translationsOutputFile: /app/
})
]
},
devServer: {
allowedHosts: 'all',
client: {
webSocketURL: 'auto://0.0.0.0:0/ws'
}
},
chainWebpack: config => {
const svgRule = config.module.rule('svg');
svgRule.exclude.add(path.join(__dirname, 'node_modules', '@ckeditor'));
config.module
.rule('cke-svg')
.test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
.use('raw-loader')
.loader('raw-loader');
config.module
.rule('cke-css')
.test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
.use('postcss-loader')
.loader('postcss-loader')
.tap(() => {
return {
postcssOptions: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
},
minify: true
})
};
});
}
};This configuration file sets up CKEditor 5 dependencies and ensures that CKEditor works seamlessly with your Vue.js application.
Install Plugins
There are several dependencies that need to be installed for CKEditor 5 and other configurations to work properly. These dependencies include CKEditor packages, PostCSS loader, raw-loader, and CKEditor theme. Depending on your requirements, you can install different plugins. In this example, we will install some commonly used plugins:
npm install --save \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
@ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-link \
@ckeditor/ckeditor5-paragraph \
@ckeditor/ckeditor5-indent \
@ckeditor/ckeditor5-list \
@ckeditor/ckeditor5-paste-from-office \
@ckeditor/ckeditor5-table \
@ckeditor/ckeditor5-typing \
@ckeditor/ckeditor5-alignment \
@ckeditor/ckeditor5-autoformat \
@ckeditor/ckeditor5-image
@ckeditor/ckeditor5-vue \
@ckeditor/ckeditor5-dev-translations \
@ckeditor/ckeditor5-dev-utils \
postcss-loader@4 \
raw-loader@4These plugins provide essential text editing features, including formatting, lists, tables, and image handling.
Integrate CKEditor into Your Vue Component
In your App.vuefile, integrate the CKEditor by importing the necessary components and configuring the editor.
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { Link } from '@ckeditor/ckeditor5-link';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { List } from '@ckeditor/ckeditor5-list';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import {
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload
} from '@ckeditor/ckeditor5-image';
export default {
name: 'app',
data() {
return {
editor: ClassicEditor,
editorData: '<p>Hey, write your content here</p>',
editorConfig: {
plugins: [
Essentials,
Bold,
Italic,
Link,
Paragraph,
Indent,
List,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation,
Alignment,
Autoformat,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo',
'imageUpload', // <-- Added image upload button
'indent',
'outdent',
'numberedList',
'bulletedList',
'pasteFromOffice',
'table',
'alignment',
'autoformat'
]
},
image: { // <-- Image configuration
toolbar: [
'imageTextAlternative',
'|',
'imageStyle:full',
'imageStyle:side'
],
styles: [
'full',
'side'
]
}
}
};
}
};
</script>
In this code:
- We import CKEditor and configure it.
- We define an initial
editorDatavalue for the CKEditor content. - Customize the
editorConfigobject to specify which CKEditor plugins you want to include in your editor and customize the toolbar options.
Output
Customizing your CKEditor5
Customizing CKEditor 5 using Vue.js allows you to fine-tune the editor’s functionality to meet your specific project requirements. In this section, we’ll explore examples of how to add, remove, and configure plugins and toolbar options in CKEditor 5 to create a tailored text editing experience.
Adding Plugins
CKEditor 5 offers a wide range of plugins that enhance its functionality. You can easily add new plugins to extend the editor’s capabilities. Let’s say you want to add a spell-checking plugin to your CKEditor. Here’s how you can do it:
- First, install the spell-checking plugin using npm:
npm install --save @ckeditor/ckeditor5-spell-check2. Next, import the spell-checking plugin in your Vue component:
import SpellCheck from '@ckeditor/ckeditor5-spell-check/src/spellcheck';3. Modify the editorConfig object to include the new plugin:
editorConfig: {
plugins: [
Essentials,
Bold,
Italic,
Link,
Paragraph,
// ... other plugins
SpellCheck // Add the SpellCheck plugin
],
// ... other configuration options
}Now, your CKEditor instance includes the spell-checking feature.
Removing Plugins
If you want to remove specific plugins to simplify the editor or improve loading performance, you can do that as well. Let’s say you want to remove the “alignment” plugin:
- Locate the plugin in your
editorConfigobject:
editorConfig: {
plugins: [
Essentials,
Bold,
Italic,
Link,
Paragraph,
Indent,
List,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation,
Alignment, // Remove the Alignment plugin
Autoformat,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload
],
// ... other configuration options
}2. Simply remove the corresponding plugin from the plugins array.
Customizing Toolbar Options
The CKEditor toolbar is highly customizable, allowing you to control which buttons and options are available to users. Let’s say you want to create a simplified toolbar with only basic text formatting options:
- Modify the
editorConfigobject to customize the toolbar:
editorConfig: {
plugins: [
Essentials,
Bold,
Italic,
Link,
Paragraph,
Indent,
// ... other plugins
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo',
]
},
// ... other configuration options
}In this example, we’ve removed options like “indent,” “paragraph,” and others, leaving only the essential formatting options in the toolbar.
Customizing Plugin Options
Many CKEditor plugins allow you to customize their behavior by configuring options. For instance, let’s say you want to customize the image upload behavior:
- Import the necessary image plugin components:
import { Image, ImageUpload } from '@ckeditor/ckeditor5-image';2. Configure the editorConfig object to customize the image plugin:
editorConfig: {
plugins: [
Essentials,
Bold,
Italic,
Link,
Paragraph,
Indent,
List,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation,
Alignment,
Autoformat,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo',
'imageUpload',
]
},
image: {
toolbar: [
'imageTextAlternative',
'|',
'imageStyle:full',
'imageStyle:side'
],
styles: [
'full',
'side'
],
// Customize other image options here
},
// ... other configuration options
}By configuring the image object within editorConfig, you can control various aspects of the image plugin, such as image styles and alternative text settings.
Conditional Customization
You can also conditionally customize CKEditor based on user roles or application state. For example, if you have different user roles (e.g., “editor” and “viewer”), you can dynamically customize the editor based on the user’s role:
data() {
return {
// Determine the user's role, e.g., 'editor' or 'viewer'
userRole: 'editor',
// ...
};
},
computed: {
editorConfig() {
let config = {
plugins: [
Essentials,
Bold,
Italic,
Link,
Paragraph,
// ... other plugins
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo',
]
},
// ... other configuration options
};
if (this.userRole === 'editor') {
// Add additional plugins and options for editors
config.plugins.push(Indent, List, Table);
config.toolbar.items.push('indent', 'outdent', 'numberedList', 'bulletedList', 'table');
}
return config;
},
},In this example, the editorConfig computed property dynamically adjusts the CKEditor configuration based on the user's role.
By following these examples, you can fully customize CKEditor 5 within your Vue.js application to create a tailored text editing experience that meets your project’s specific needs. Whether you need to add new features, remove unnecessary ones, or conditionally customize the editor, CKEditor 5’s flexibility combined with Vue.js provides the tools you need to create a powerful and user-friendly text editing interface.
Conclusion
Congratulations! You’ve successfully integrated CKEditor 5 into your Vue.js application, allowing users to enjoy rich text editing capabilities. This step-by-step guide should help you get started with CKEditor 5 and Vue.js, and you can expand on it by exploring additional CKEditor plugins and advanced configurations to suit your project’s needs. Happy coding!
