# 1. 创建并进入目录
mkdir my-lawyer-editor
cd my-lawyer-editor

# 2. 克隆官方的 stable 构建模板 (这是一个基础版)
git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git .

# 3. 安装依赖 (这会下载基础的包)
npm install

# 安装 源码编辑 (对应截图里的 <>)
npm install --save @ckeditor/ckeditor5-source-editing

# 安装 代码块 (对应截图里的 {})
npm install --save @ckeditor/ckeditor5-code-block

# 安装 对齐方式 (对应截图里的 居中/居右)
npm install --save @ckeditor/ckeditor5-alignment

# 安装 字号和字体颜色 (对应截图里的 A 按钮)
npm install --save @ckeditor/ckeditor5-font

# 安装 缩进 (对应截图里的 tab 缩进)
npm install --save @ckeditor/ckeditor5-indent

# 安装 水平线 (对应截图里的 分割线)
npm install --save @ckeditor/ckeditor5-horizontal-line

# (可选) 如果你需要 Word 粘贴功能
npm install --save @ckeditor/ckeditor5-paste-from-office

/**
 * @license Copyright (c) 2014-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic, Underline, Strikethrough } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, ImageResize } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { Undo } from '@ckeditor/ckeditor5-undo';

// --- 新增的插件引用 ---
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Font } from '@ckeditor/ckeditor5-font';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';

class Editor extends ClassicEditor {
	// 插件列表
	static builtinPlugins = [
		Autoformat,
		BlockQuote,
		Bold, Italic, Underline, Strikethrough,
		CloudServices,
		Essentials,
		Heading,
		Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, ImageResize,
		Indent,
		Link,
		List,
		MediaEmbed,
		Paragraph,
		PasteFromOffice,
		Table, TableToolbar,
		TextTransformation,
		Undo,
		// 新增插件
		SourceEditing,
		Alignment,
		Font,
		CodeBlock,
		HorizontalLine
	];

	// 配置项
	static defaultConfig = {
		toolbar: {
			items: [
				'sourceEditing', '|', // 源码模式在最左侧
				'heading', '|',
				'bold', 'italic', 'underline', 'strikethrough', 'fontColor', '|', // 字体样式
				'alignment', '|', // 对齐
				'bulletedList', 'numberedList', 'outdent', 'indent', '|', // 列表与缩进
				'link', 'blockQuote', 'insertTable', 'horizontalLine', '|', // 插入类
				'imageUpload', 'codeBlock', 'mediaEmbed', '|', // 媒体与代码
				'undo', 'redo'
			],
			shouldNotGroupWhenFull: true // 强制不折叠菜单
		},
		language: 'zh-cn', // 默认中文
		image: {
			toolbar: [
				'imageTextAlternative',
				'toggleImageCaption',
				'imageStyle:inline',
				'imageStyle:block',
				'imageStyle:side'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		}
	};
}

export default Editor;

npm run build

/* 让工具栏看起来更像截图 */
.ck-toolbar {
    background: #f6f6f6 !important; /* 灰色背景 */
    border-bottom: 1px solid #dcdcdc !important;
}
.ck-content {
    min-height: 400px; /* 默认高度 */
}