ckeditor5 增加居中alignment

时间：2024-09-28 11:06:02

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

克隆下来

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

cd ckeditor5-build-classic

npm install

安装插件

npm install --save-dev @ckeditor/ckeditor5-alignment

修改src/ckeditor.js文件

增加

/**

 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.

 * For licensing, see LICENSE.md.

 */

// The editor creator to use.

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';

import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';

import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';

import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';

import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';

import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';

import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';

import Heading from '@ckeditor/ckeditor5-heading/src/heading';

import Image from '@ckeditor/ckeditor5-image/src/image';

import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';

import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';

import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';

import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';

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 Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';

import Table from '@ckeditor/ckeditor5-table/src/table';

import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- ADDED

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.

ClassicEditor.builtinPlugins = [

	Essentials,

	UploadAdapter,

	Autoformat,

	Bold,

	Italic,

	BlockQuote,

	CKFinder,

	EasyImage,

	Heading,

	Image,

	ImageCaption,

	ImageStyle,

	ImageToolbar,

	ImageUpload,

	Link,

	List,

	MediaEmbed,

	Paragraph,

	PasteFromOffice,

	Table,

	TableToolbar,

	 Alignment                                                            // <--- ADDED

];

// Editor configuration.

ClassicEditor.defaultConfig = {

	toolbar: {

		items: [

			'heading',

			'|',

			'alignment',                                                 // <--- ADDED

			'bold',

			'italic',

			'link',

			'bulletedList',

			'numberedList',

			'imageUpload',

			'blockQuote',

			'insertTable',

			'mediaEmbed',

			'undo',

			'redo'

		]

	},

	image: {

		toolbar: [

			'imageStyle:full',

			'imageStyle:side',

			'|',

			'imageTextAlternative'

		]

	},

	table: {

		contentToolbar: [

			'tableColumn',

			'tableRow',

			'mergeTableCells'

		]

	},

	// This value must be kept in sync with the language defined in webpack.config.js.

	language: 'zh-cn'

};

打包

yarn run build

ckeditor5 增加居中alignment

ckeditor5 增加居中alignment

toolbar: ["undo", "redo", "|", "alignment", "bold", "italic", "blockQuote", "imageTextAlternative", "imageUpload", "heading", "link", "numberedList", "bulletedList"],

相关文章