ckeditor5编辑器快速构建2

qq_42547333

已于 2022-05-08 18:16:36 修改

阅读量610

点赞数

分类专栏： ckeditor5 文章标签：编辑器 webpack 前端

于 2021-06-30 04:24:30 首次发布

本文链接：https://blog.csdn.net/qq_42547333/article/details/118351261

版权

创建3个文件：package.json，webpack.config.js，app.js
打包好，最后新建index.html引入js样式
1.cd到你的项目
创建package.json文件：

{
   
  "name": "ck5-2",
  "version": "1.0.0",
  "description": "This repository presents a CKEditor 5 editor build generated by the [Online builder tool](https://ckeditor.com/ckeditor-5/online-builder)",
  "main": "./build/ckeditor.js",
  "scripts": {
   
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
   
    "@ckeditor/ckeditor5-adapter-ckfinder": "^34.0.0",
    "@ckeditor/ckeditor5-alignment": "^34.0.0",
    "@ckeditor/ckeditor5-autoformat": "^34.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^34.0.0",
    "@ckeditor/ckeditor5-block-quote": "^34.0.0",
    "@ckeditor/ckeditor5-ckfinder": "^34.0.0",
    "@ckeditor/ckeditor5-cloud-services": "^34.0.0",
    "@ckeditor/ckeditor5-code-block": "^34.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^30.1.3",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^30.1.3",
    "@ckeditor/ckeditor5-editor-classic": "^34.0.0",
    "@ckeditor/ckeditor5-essentials": "^34.0.0",
    "@ckeditor/ckeditor5-font": "^34.0.0",
    "@ckeditor/ckeditor5-heading": "^34.0.0",
    "@ckeditor/ckeditor5-horizontal-line": "^34.0.0",
    "@ckeditor/ckeditor5-image": "^34.0.0",
    "@ckeditor/ckeditor5-indent": "^34.0.0",
    "@ckeditor/ckeditor5-language": "^34.0.0",
    "@ckeditor/ckeditor5-link": "^34.0.0",
    "@ckeditor/ckeditor5-list": "^34.0.1",
    "@ckeditor/ckeditor5-media-embed": "^34.0.0",
    "@ckeditor/ckeditor5-paragraph": "^34.0.0",
    "@ckeditor/ckeditor5-paste-from-office": "^34.0.0",
    "@ckeditor/ckeditor5-table": "^34.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^34.0.0",
    "@ckeditor/ckeditor5-typing": "^34.0.0",
    "@ckeditor/ckeditor5-upload": "^34.0.0",
    "@ckeditor/ckeditor5-word-count": "^34.0.0",
    "css-loader": "^6.7.1",
    "postcss": "^8.4.13",
    "postcss-loader": "^6.2.1",
    "raw-loader": "^4.0.2",
    "source-map": "^0.7.3",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.1"
  }
}

2.cmd下执行，自动安装package.json里面的包：npm install
3.若已安装检查更新包，查看可更新包：ncu，更新package.json：ncu -u，否则先安装插件：

npm install -g npm-check-updates

重新执行npm install

4.创建webpack.config.js

/**
 * @license Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

'use strict';

/* eslint-env node */

const path = requir

最低0.47元/天解锁文章