CKEditor5系列一最近因公司业务在研究CKEditor5，网上资料较少，研究了大概两周了，初见成效，一直在掘金围观

最近因公司业务在研究CKEditor5，网上资料较少，研究了大概两周了，初见成效，一直在掘金围观别人的分享，今天我也根据个人博客记录的笔记，整理一下(基本上就是复制)分享给广大掘友，如果能对你有所帮助那就很棒棒了。

这是第一篇，我准备只简单的介绍一下安装，构建项目。

1、使用

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

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( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};

然后再安装一些基础的依赖

npm install --save @ckeditor/ckeditor5-dev-utils  @ckeditor/ckeditor5-editor-classic  @ckeditor/ckeditor5-essentials  @ckeditor/ckeditor5-paragraph   @ckeditor/ckeditor5-basic-styles  @ckeditor/ckeditor5-theme-lark

然后基本上就好了。

2、开始创建编辑器

在根目录创建一个app.js文件，输入下面代码,随手保存

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [Essentials, Paragraph, Bold, Italic],
    toolbar: ['bold', 'italic']
  })
  .then(editor => {
    console.log('Editor was initialized', editor);
  })
  .catch(error => {
    console.error(error.stack);
  });

然后配置webpack的脚本, 开启watch，避免一直手动重新构建

// package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development --watch"
}

创建HTML入口，根目录下创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CKEditor 5 Framework – Quick start</title>
</head>
<body>
  <div id="editor">
    <p>Editor content goes here.</p>
  </div>
  <script src="dist/bundle.js"></script>
</body>
</html>

运行npm run build, 然后在浏览器打开index.html，一个最基本的编辑器就好了

ps: 第一次分享没经验，希望大佬们不要嫌弃，如果能对你有所帮助是我的荣幸。