CKEditor5系列一：安装及使用

最新推荐文章于 2024-07-25 14:57:08 发布

老酒馆的猫

最新推荐文章于 2024-07-25 14:57:08 发布

阅读量3.2k

点赞数

分类专栏： CKEditor5 文章标签： ckeditor

本文链接：https://blog.csdn.net/oldpubcat/article/details/105518980

版权

本文介绍了CKEditor5的安装和基础使用方法，包括通过在线构建选择功能、安装NPM依赖、配置编辑器类型，以及设置webpack脚本创建基本编辑器的步骤。提供了经典编辑器的示例，并附带了系列文章链接。

摘要由CSDN通过智能技术生成

1、使用

官网：https://ckeditor.com/ckeditor-5/
如果要直接使用官方版本，不自己做扩展只是简单使用的话可以使用在线构建，选择你喜欢的功能然后构建，直接下载使用就好了。
地址：https://ckeditor.com/ckeditor-5/online-builder/

CKEditor5系列二：https://blog.csdn.net/oldpubcat/article/details/105519057
CKEditor5系列三：https://blog.csdn.net/oldpubcat/article/details/105519096

1.1 安装

它有几种不同的编辑器：

经典编辑器– ClassicEditor
内联编辑器– InlineEditor
气球编辑器– BalloonEditor
文件编辑器– DecoupledEditor

这里以经典版为例，其他都大同小异。

使用NPM创建项目及安装依赖

初始化一个项目npm init, 咔咔咔输入你的项目名等其他，不赘述了。

安装必要的依赖

npm install --save postcss-loader@3 raw-loader@3 style-loader@1 webpack@4 webpack-cli@3

安装完成之后创建一个webpack.config.js,官方给出了最小的配置项，我们这里就用那个

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag'
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: styles.getPostCssConfig( {