ckeditor5编辑器快速构建2

创建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 = require( 'path' );
const webpack = require( 'webpack' );
const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const TerserWebpackPlugin = require( 'terser-webpack-plugin' );

module.exports = {
	devtool: 'source-map',
	performance: { hints: false },

	//entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),
	entry: './app.js',
	output: {
		// The name under which the editor will be exported.
		library: 'ClassicEditor',

		path: path.resolve( __dirname, 'build' ),
		filename: 'ckeditor.js',
		libraryTarget: 'umd',
		libraryExport: 'default'
	},

	optimization: {
        minimize: true,
        minimizer: [new TerserWebpackPlugin({
            //test: /\.js(\?.*)?$/i,    //匹配参与压缩的文件
            parallel: true,    //使用多进程并发运行
            terserOptions: {    //Terser 压缩配置
                output:{comments: false}
            },
            extractComments: true,    //将注释剥离到单独的文件中
        })],
	},

	plugins: [
		new CKEditorWebpackPlugin( {
			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
			language: 'zh-cn',
			// additionalLanguages: 'all'
		} ),
		new webpack.BannerPlugin( {
			banner: bundler.getLicenseBanner(),
			raw: true
		} )
	],

	module: {
		rules: [
			{
				test: /\.svg$/,
				use: [ 'raw-loader' ]
			},
			{
				test: /\.css$/,
				use: [
					{
						loader: 'style-loader',
						options: {
							injectType: 'singletonStyleTag',
							attributes: {
								'data-cke': true
							}
						}
					},
					{
						loader: 'css-loader'
					},
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: styles.getPostCssConfig( {
								themeImporter: {
									themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
								},
								minify: true
							} )
						}
					},
				]
			}
		]
	}
};

4.根目录创建app.js，如果页面要多个富文本，则需要在js里头创建两次

// 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';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextPartLanguage from '@ckeditor/ckeditor5-language/src/textpartlanguage';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
//富文本1
ClassicEditor
    .create( document.querySelector( '#editor1' ), {
        plugins: [
			Autoformat,
			BlockQuote,
			Bold,
			Alignment,
			CKFinder,
			CKFinderUploadAdapter,
			CloudServices,
			CodeBlock,
			Essentials,
			FontBackgroundColor,
			FontColor,
			FontSize,
			Heading,
			HorizontalLine,
			Image,
			ImageCaption,
			ImageInsert,
			ImageResize,
			ImageStyle,
			ImageToolbar,
			Indent,
			Italic,
			Link,
			List,
			MediaEmbed,
			Paragraph,
			PasteFromOffice,
			Strikethrough,
			Table,
			TableToolbar,
			TextPartLanguage,
			TextTransformation,
			Underline,
			WordCount
		],
		alignment: {
            options: [ 'left', 'right','center' ]
        },
		toolbar: {
			items: [
				'heading',
				'fontSize',
				'alignment',
				'|',
				'fontColor',
				'fontBackgroundColor',				
				'bold',
				'italic',
				'underline',
				'strikethrough',
				'horizontalLine',
				'link',
				'bulletedList',
				'numberedList',
				'|',
				'outdent',
				'indent',
				'|',
				'imageInsert',
				'blockQuote',
				'insertTable',
				'codeBlock',
				'undo',
				'redo'
			]
		},
		language: 'zh-cn',
		image: {
			toolbar: [
				'imageTextAlternative',
				'imageStyle:full',
				'imageStyle:side'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		},
		licenseKey: '',		
		ckfinder: {
			 // Upload the images to the server using the CKFinder QuickUpload command.
			 uploadUrl: '/upload/index/index',
		 }
		
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );
//富文本2
ClassicEditor
    .create( document.querySelector( '#editor2' ), {
        plugins: [
			Autoformat,
			BlockQuote,
			Bold,
			Alignment,
			CKFinder,
			CKFinderUploadAdapter,
			CloudServices,
			CodeBlock,
			Essentials,
			FontBackgroundColor,
			FontColor,
			FontSize,
			Heading,
			HorizontalLine,
			Image,
			ImageCaption,
			ImageInsert,
			ImageResize,
			ImageStyle,
			ImageToolbar,
			Indent,
			Italic,
			Link,
			List,
			MediaEmbed,
			Paragraph,
			PasteFromOffice,
			Strikethrough,
			Table,
			TableToolbar,
			TextPartLanguage,
			TextTransformation,
			Underline,
			WordCount
		],
		alignment: {
            options: [ 'left', 'right','center' ]
        },
		toolbar: {
			items: [
				'heading',
				'fontSize',
				'alignment',
				'|',
				'fontColor',
				'fontBackgroundColor',				
				'bold',
				'italic',
				'underline',
				'strikethrough',
				'horizontalLine',
				'link',
				'bulletedList',
				'numberedList',
				'|',
				'outdent',
				'indent',
				'|',
				'imageInsert',
				'blockQuote',
				'insertTable',
				'codeBlock',
				'undo',
				'redo'
			]
		},
		language: 'zh-cn',
		image: {
			toolbar: [
				'imageTextAlternative',
				'imageStyle:full',
				'imageStyle:side'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		},
		licenseKey: '',		
		ckfinder: {
			 // Upload the images to the server using the CKFinder QuickUpload command.
			 uploadUrl: '/upload/index/index',
		 }
		
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

5.打包：npm run build
6.创建index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 Quick start guide</title>
		<style type="text/css">
			/* 两个富文本高设置为100px */
			    .ck-content { min-height:100px;}/*此次不要设置width，不然与头部不均衡*/
				/* 第二个富文本设置宽度300px */
				.second_editor{
					width: 300px;
				}
		</style>
    </head>
    <body>
        <div id="editor">
            <p>The editor content goes here.</p>
        </div>
		<div class="second_editor">
			<textarea class="editor1" name="two">
				<p>The editor content goes here2.</p>
			</textarea>			
		</div>
        <script src="build/ckeditor.js"></script>
		<script>
			var a = document.getElementsByName('two');
			console.log(a[0].value);
		</script>
    </body>
</html>

结果图：