安装插件 - 集成 - 构建文档 - ckeditor5中文文档
安装插件 - 集成 - 构建文档 - ckeditor5中文文档
CKEditor 5插件通过npm包分发，并以模块化方式实现，这意味着单个插件可能包含多个JavaScript文件。
在本指南中，您可以了解如何在两种最常见的场景中将插件添加到编辑器中：
- 当你使用一个编辑器构建版本时
- 当你从源码构建你的编辑器时
要求
为了开始开发CKEditor 5，你需要：
- Node.js 6.9.0+
- npm 4+ (注意：已知某些npm 5+版本会导致问题，特别是对于重复数据删除软件包; 有问题时请升级npm)
添加插件到构建
通过自定义将插件添加到现有构建中。 编辑器构建在各自的GitHub存储库中维护。 因此，假设您要自定义经典编辑器构建，您需要：
- 克隆构建版本仓库
- 安装插件包
- 添加插件到构建配置中
- 构建
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文件，将插件添加到将包含在构建中的插件列表中，并将功能的按钮添加到工具栏：
// 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 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 Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
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,
EasyImage,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Link,
List,
Paragraph,
Alignment // <--- ADDED
];
// Editor configuration.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'alignment', // <--- ADDED
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'imageUpload',
'blockQuote',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
// This value must be kept in sync with the language defined in webpack.config.js.
language: 'en'
};
最后，构建包：
npm run build
如果一切顺利，在build/文件夹中的编辑器构建将被更新。
你可以在你的浏览器中打开sample/index.html文件，来查看插件是否被正确的安装了。
这是如何定制构建的快速版本。 了解更多请在单独的指南总阅读自定义现有编辑器构建。
添加插件到编辑器
如果您从源代码构建编辑器，那么安装新插件的过程归结为以下三个步骤：
- 安装插件包
- 添加插件到构建的配置中
- 构建项目
例如，你想安装文本对齐功能：
npm install --save-dev @ckeditor/ckeditor5-alignment
编辑初始化编辑器的配置文件：
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 Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; // <--- ADDED
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic, Alignment ], // <--- MODIFIED
toolbar: [ 'bold', 'italic', 'alignment' ] // <--- MODIFIED
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
重新构建你的项目后，编辑器中的新功能就可用了。
其中一个可能的错误是尝试以这种方式将插件添加到现有（捆绑）编辑器构建中。 如果该插件需要导入任何源编辑器模块，则安装现有构建然后尝试向其添加插件可能不起作用。
此方法无法工作的原因是添加的插件的依赖项可能会复制已使用的编辑器构建中已捆绑的代码。 在最好的情况下，这将提高整体代码大小。 在最糟糕的情况下，以这种方式构建的应用程序可能不稳定。
两种方法的不同点
通过将config.plugins选项传递给静态create()方法，将插件添加到编辑器构建和添加插件有什么区别？
第一种方法将插件构建到编辑器类中。 这意味着您可以在不传递config.plugins的情况下初始化编辑器，编辑器将自动启用所有内置插件：
// Assuming you use e.g. webpack which can load UMD modules by using ES6 syntax.
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
ClassicEditor
.create( document.querySelector( 'editor' ), {
// Look, ma! No plugins!
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
所有这一切都有效，因为您可以在每个编辑器构建存储库中找到的典型src/ckeditor.js模块（请参阅例如@ckeditor/ckeditor5-build-classic）如下所示：
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';
// ...
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [
Essentials,
UploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
// ...
];
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'bold',
// ...
]
},
// ...
};
此代码导入经典编辑器的源代码，并使用静态builtinPlugins和defaultConfig属性对其进行扩展，其中它定义了此编辑器类要使用的一组插件和配置。
在此方法中，使用此编辑器构建创建的所有编辑器实例将默认加载所有这些内置插件和配置。
您仍然可以使用config.removePlugins和config.plugins选项来覆盖默认配置。
从源代码构建编辑器而不是使用构建作为基础时，您还可以使用编辑器类的静态builtinPlugins和defaultConfig属性。 但是，在这种情况下，简单地将所有插件直接传递给静态create()方法通常更方便：
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 );
} );
因此，简而言之，两种方法都使用非常相似的机制。 但是，通过静态builtinPlugins属性添加插件（在编辑器版本中发生）允许您在使用此编辑器类创建的所有编辑器实例中自动启用它，而将插件传递给create()自然只会影响一个实例。
文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476864
文章版权归作者所有，转载请保留此声明。