猫说

CKeditor5系列一

2020/04/02 editor

CKeditor5记录，创建一个编辑器

1、使用

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

1.1 安装

它有几种不同的编辑器：

  1. 经典编辑器– ClassicEditor
  2. 内联编辑器– InlineEditor
  3. 气球编辑器– BalloonEditor
  4. 文件编辑器– 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

然后基本上就好了。

嫌弃上面麻烦你也可以直接在package.json的dependencies字段里输入以下依赖，然后 npm install

  "dependencies": {
    "@ckeditor/ckeditor5-basic-styles": "^18.0.0",
    "@ckeditor/ckeditor5-core": "^18.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.9",
    "@ckeditor/ckeditor5-editor-classic": "^18.0.0",
    "@ckeditor/ckeditor5-essentials": "^18.0.0",
    "@ckeditor/ckeditor5-horizontal-line": "^18.0.0",
    "@ckeditor/ckeditor5-image": "^18.0.0",
    "@ckeditor/ckeditor5-paragraph": "^18.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^18.0.0",
    "@ckeditor/ckeditor5-ui": "^18.0.0",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^3.1.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }

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，一个最基本的编辑器就好了

Search

    Table of Contents