从预定义构建迁移
在 42.0.0 版之前，预定义构建是开始使用 CKEditor 5 的最简单方法。它们提供了一个开箱即用的编辑器，其中包含一组预定义的插件和默认配置。但是，它们有一些限制，例如无法通过添加或删除插件来自定义编辑器。
新的安装方法解决了这个问题。无论您使用 npm 包还是浏览器构建，它们都允许您完全自定义编辑器。
从预定义构建迁移到新的安装方法主要只是将以下代码复制并粘贴以替换旧代码。要复制的代码取决于您使用的构建和分发方法。
# 先决条件
在开始之前，请按照通常的升级路径来更新您的项目，以便使用最新版本的 CKEditor 5。这将排除可能由从旧版本 CKEditor 5 升级引起的任何问题。
# 迁移步骤
# npm
如果您使用的是来自 npm 的预定义构建，请按照以下步骤操作
-
首先卸载旧的构建包。它可以通过
@ckeditor/ckeditor5-build-前缀识别。例如，如果您使用的是@ckeditor/ckeditor5-build-classic包，则应该将其卸载。以下是卸载所有预定义构建的命令。npm uninstall \ @ckeditor/ckeditor5-build-balloon \ @ckeditor/ckeditor5-build-balloon-block \ @ckeditor/ckeditor5-build-classic \ @ckeditor/ckeditor5-build-decoupled-document \ @ckeditor/ckeditor5-build-inline \ @ckeditor/ckeditor5-build-multi-root -
接下来，安装
ckeditor5包。此包包含编辑器和我们所有开源插件。npm install ckeditor5 -
(可选) 如果您使用的是我们商业产品的付费功能，则还应该安装
ckeditor5-premium-features包。npm install ckeditor5-premium-features -
打开您初始化编辑器的文件。然后根据您使用的构建替换导入语句和初始化代码。
经典编辑器
之前
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; ClassicEditor .create( /* Configuration */ ) .catch( error => console.error( error ) );之后
import { ClassicEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; import 'ckeditor5/ckeditor5.css'; class Editor extends ClassicEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) );内联编辑器
之前
import InlineEditor from '@ckeditor/ckeditor5-build-inline'; InlineEditor .create( /* Configuration */ ) .catch( error => console.error( error ) );之后
import { InlineEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; import 'ckeditor5/ckeditor5.css'; class Editor extends InlineEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) );气球编辑器
之前
import BalloonEditor from '@ckeditor/ckeditor5-build-balloon'; BalloonEditor .create( /* Configuration */ ) .catch( error => console.error( error ) );之后
import { BalloonEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; import 'ckeditor5/ckeditor5.css'; class Editor extends BalloonEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) );气球块编辑器
之前
import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block'; BalloonEditor .create( /* Configuration */ ) .catch( error => console.error( error ) );之后
import { BalloonEditor, Essentials, CKFinderUploadAdapter, Autoformat, BlockToolbar, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; import 'ckeditor5/ckeditor5.css'; /* Create an additional stylesheet file with the given content: .ck.ck-block-toolbar-button { transform: translateX( calc(-1 * var(--ck-spacing-large)) ); } */ class Editor extends BalloonEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, BlockToolbar, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { blockToolbar: [ 'undo', 'redo', '|', 'heading', '|', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ], toolbar: { items: [ 'bold', 'italic', 'link' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) );分离式文档编辑器
之前
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'; DecoupledEditor .create( /* Configuration */ ) .catch( error => console.error( error ) );之后
import { DecoupledEditor, Essentials, Alignment, FontSize, FontFamily, FontColor, FontBackgroundColor, CKFinderUploadAdapter, Autoformat, Bold, Italic, Strikethrough, Underline, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, IndentBlock, Link, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; import 'ckeditor5/ckeditor5.css'; class Editor extends DecoupledEditor { static builtinPlugins = [ Essentials, Alignment, FontSize, FontFamily, FontColor, FontBackgroundColor, CKFinderUploadAdapter, Autoformat, Bold, Italic, Strikethrough, Underline, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, Link, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'alignment', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { resizeUnit: 'px', toolbar: [ 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, list: { properties: { styles: true, startIndex: true, reversed: true } }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) );多根编辑器
之前
import DecoupledEditor from '@ckeditor/ckeditor5-build-multi-root'; MultiRootEditor .create( /* Configuration */ ) .catch( error => console.error( error ) );之后
import { MultiRootEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; import 'ckeditor5/ckeditor5.css'; class Editor extends MultiRootEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); -
与使用预定义构建不同，现在您可以通过添加或删除插件来自定义编辑器。但是，在执行此操作之前，您应该测试编辑器以确保它按预期工作。
# CDN
如果您使用的是来自 CDN 的预定义构建，请按照以下步骤操作，具体取决于您是想使用带有导入的 JavaScript 模块 (ESM) 还是使用带有全局变量的标准 (UMD) 脚本。
# 带有导入的 CDN
旧构建和新 ESM 构建之间的一个显着区别是，前者使用 <script> 标签，而后者使用 <script type="module"> 标签，它们在某些情况下行为不同。有关更多信息，请参阅此 MDN 页面，解释模块和标准脚本之间的区别。
-
首先删除包含旧构建的
<script>标签。<script src="https://cdn.ckeditor.com/ckeditor5/<VERSION>/classic/ckeditor.js"></script> -
添加
<link>标签以包含编辑器的 CSS 文件，以及<script type="importmap">标签以将包名称映射到构建 URL。2.1 如果您只使用开源功能
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" /> <script type="importmap"> { "imports": { "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.js", "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.0/" } } </script>2.2 如果您还使用我们商业产品的付费功能
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" /> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.css" /> <script type="importmap"> { "imports": { "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.js", "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.0/", "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.js", "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/" } } </script> -
替换包含初始化代码的旧
<script>标签，具体取决于您使用的构建。经典编辑器
之前
<script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script>之后
<script type="module"> import { ClassicEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; class Editor extends ClassicEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>内联编辑器
之前
<script> InlineEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script type="module"> import { InlineEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; class Editor extends InlineEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>气球编辑器
之前
<script> BalloonEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script type="module"> import { BalloonEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; class Editor extends BalloonEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>气球块编辑器
之前
<script> BalloonEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script type="module"> import { BalloonEditor, Essentials, CKFinderUploadAdapter, Autoformat, BlockToolbar, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; /* Create an additional stylesheet file with the given content: .ck.ck-block-toolbar-button { transform: translateX( calc(-1 * var(--ck-spacing-large)) ); } */ class Editor extends BalloonEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, BlockToolbar, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { blockToolbar: [ 'undo', 'redo', '|', 'heading', '|', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ], toolbar: { items: [ 'bold', 'italic', 'link' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>分离式文档编辑器
之前
<script> DecoupledEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script type="module"> import { DecoupledEditor, Essentials, Alignment, FontSize, FontFamily, FontColor, FontBackgroundColor, CKFinderUploadAdapter, Autoformat, Bold, Italic, Strikethrough, Underline, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, IndentBlock, Link, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; class Editor extends DecoupledEditor { static builtinPlugins = [ Essentials, Alignment, FontSize, FontFamily, FontColor, FontBackgroundColor, CKFinderUploadAdapter, Autoformat, Bold, Italic, Strikethrough, Underline, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, Link, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'alignment', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { resizeUnit: 'px', toolbar: [ 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, list: { properties: { styles: true, startIndex: true, reversed: true } }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>多根编辑器
之前
<script> MultiRootEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script type="module"> import { MultiRootEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } from 'ckeditor5'; class Editor extends MultiRootEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>超级构建
请注意，以下代码片段不包括 数学方程式和化学式 和 拼写、语法和标点符号检查 功能的插件，这些插件是旧超级构建的一部分。
如果您需要这些功能在 CDN 分发中，请 联系我们。
之前
<script> ClassicEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script type="module"> import { ClassicEditor as ClassicEditorBase, InlineEditor as InlineEditorBase, BalloonEditor as BalloonEditorBase, DecoupledEditor as DecoupledEditorBase, CKFinderUploadAdapter, Alignment, Autoformat, Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Code, BlockQuote, CKBox, CKBoxImageEdit, CKFinder, CloudServices, CodeBlock, EasyImage, Essentials, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, AutoImage, ImageResize, ImageUpload, ImageInsert, PictureEditing, Indent, IndentBlock, TextPartLanguage, Link, AutoLink, LinkImage, List, ListProperties, TodoList, MediaEmbed, Paragraph, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, Highlight, HorizontalLine, HtmlEmbed, GeneralHtmlSupport, HtmlComment, Mention, PageBreak, PasteFromOffice, RemoveFormat, StandardEditingMode, ShowBlocks, Style, SourceEditing, SpecialCharacters, SpecialCharactersEssentials, Table, TableToolbar, TableCellProperties, TableProperties, TableCaption, TableColumnResize, TextTransformation, WordCount, Base64UploadAdapter } from 'ckeditor5'; import { AIAssistant, OpenAITextAdapter, CaseChange, Comments, ExportPdf, ExportWord, MultiLevelList, Pagination, RealTimeCollaborativeComments, RealTimeCollaborativeRevisionHistory, RealTimeCollaborativeTrackChanges, RevisionHistory, TrackChanges, TrackChangesData } from 'ckeditor5-premium-features'; class ClassicEditor extends ClassicEditorBase {} class InlineEditor extends InlineEditorBase {} class BalloonEditor extends BalloonEditorBase {} class DecoupledEditor extends DecoupledEditorBase {} for ( const Editor of [ ClassicEditor, InlineEditor, BalloonEditor, DecoupledEditor ] ) { // Plugins to include in the build. Editor.builtinPlugins = [ AIAssistant, OpenAITextAdapter, Base64UploadAdapter, Alignment, Autoformat, Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Code, BlockQuote, CKBox, CKBoxImageEdit, CKFinder, CKFinderUploadAdapter, CloudServices, CodeBlock, Comments, EasyImage, Essentials, ExportPdf, ExportWord, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, AutoImage, ImageResize, ImageUpload, ImageInsert, PictureEditing, Indent, IndentBlock, TextPartLanguage, Link, AutoLink, LinkImage, List, ListProperties, TodoList, MultiLevelList, MediaEmbed, Paragraph, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, Highlight, HorizontalLine, HtmlEmbed, GeneralHtmlSupport, HtmlComment, Mention, PageBreak, PasteFromOffice, Pagination, RealTimeCollaborativeComments, RealTimeCollaborativeRevisionHistory, RealTimeCollaborativeTrackChanges, PresenceList, RemoveFormat, RevisionHistory, StandardEditingMode, ShowBlocks, Style, SpecialCharacters, SpecialCharactersEssentials, Table, TableToolbar, TableCellProperties, TableProperties, TableCaption, TableColumnResize, TrackChanges, TrackChangesData, TextTransformation, WordCount, DocumentOutline, TableOfContents, FormatPainter, Template, SlashCommand, PasteFromOfficeEnhanced, CaseChange ]; Editor.defaultConfig = { toolbar: [ 'aiCommands', 'aiAssistant', '|', // Productivity pack. 'tableOfContents', 'formatPainter', 'insertTemplate', 'caseChange', '|', 'pagination', '|', 'trackChanges', 'revisionHistory', 'comment', '|', 'heading', 'style', '|', 'removeFormat', 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'link', '|', 'highlight', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'bulletedList', 'numberedList', 'multiLevelList', 'todoList', '|', 'blockQuote', 'uploadImage', 'insertTable', 'mediaEmbed', 'codeBlock', '|', 'htmlEmbed', '|', 'alignment', 'outdent', 'indent', '|', 'pageBreak', 'horizontalLine', 'specialCharacters', '|', 'textPartLanguage', '|', 'showBlocks', '|', 'undo', 'redo', 'findAndReplace' ], table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption' ] }, image: { styles: [ 'alignCenter', 'alignLeft', 'alignRight' ], resizeOptions: [ { name: 'resizeImage:original', label: 'Original size', value: null }, { name: 'resizeImage:50', label: '50%', value: '50' }, { name: 'resizeImage:75', label: '75%', value: '75' } ], toolbar: [ 'imageTextAlternative', 'toggleImageCaption', '|', 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', 'imageStyle:side', '|', 'resizeImage', '|', 'ckboxImageEdit' ], insert: { integrations: [ 'insertImageViaUrl' ] } }, comments: { editorConfig: { extraPlugins: [ Bold, Italic, Underline, List ] } }, placeholder: 'Type the content here!', language: 'en' }; // Enable the `SourceEditing` plugin for ClassicEditor only. if ( Editor === ClassicEditor ) { Editor.builtinPlugins.push( SourceEditing ); Editor.defaultConfig.toolbar.push( '|', 'sourceEditing' ); } // Enable the `Pagination` plugin for DecoupledEditor only. if ( Editor === DecoupledEditor ) { Editor.builtinPlugins.push( Pagination ); Editor.defaultConfig.toolbar.unshift( 'sourceEditing', '|' ); Editor.defaultConfig.pagination = { // A4 pageWidth: '21cm', pageHeight: '29.7cm', pageMargins: { top: '20mm', bottom: '20mm', right: '12mm', left: '12mm' } }; } } ClassicEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script> -
与使用预定义构建不同，现在您可以通过添加或删除插件来自定义编辑器。但是，在执行此操作之前，您应该测试编辑器以确保它按预期工作。
# 带有全局变量的 CDN
-
首先删除包含旧构建的
<script>标签。<script src="https://cdn.ckeditor.com/ckeditor5/<VERSION>/classic/ckeditor.js"></script> -
添加
<link>和<script>标签以包含编辑器的样式和代码。2.1 如果您只使用开源功能
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" /> <script src="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.umd.js"></script>2.2 如果您还使用我们商业产品的付费功能
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" /> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.css" /> <script src="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.umd.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.umd.js"></script> -
替换包含初始化代码的旧
<script>标签，具体取决于您使用的构建。经典编辑器
之前
<script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script>之后
<script> const { ClassicEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } = CKEDITOR; class Editor extends ClassicEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>内联编辑器
之前
<script> InlineEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script> const { InlineEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } = CKEDITOR; class Editor extends InlineEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>气球编辑器
之前
<script> BalloonEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script> const { BalloonEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } = CKEDITOR; class Editor extends BalloonEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>气球块编辑器
之前
<script> BalloonEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script> const { BalloonEditor, Essentials, CKFinderUploadAdapter, Autoformat, BlockToolbar, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } = CKEDITOR; /* Create an additional stylesheet file with the given content: .ck.ck-block-toolbar-button { transform: translateX( calc(-1 * var(--ck-spacing-large)) ); } */ class Editor extends BalloonEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, BlockToolbar, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { blockToolbar: [ 'undo', 'redo', '|', 'heading', '|', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ], toolbar: { items: [ 'bold', 'italic', 'link' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>分离式文档编辑器
之前
<script> DecoupledEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script> const { DecoupledEditor, Essentials, Alignment, FontSize, FontFamily, FontColor, FontBackgroundColor, CKFinderUploadAdapter, Autoformat, Bold, Italic, Strikethrough, Underline, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, IndentBlock, Link, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } = CKEDITOR; class Editor extends DecoupledEditor { static builtinPlugins = [ Essentials, Alignment, FontSize, FontFamily, FontColor, FontBackgroundColor, CKFinderUploadAdapter, Autoformat, Bold, Italic, Strikethrough, Underline, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, Link, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'alignment', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { resizeUnit: 'px', toolbar: [ 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, list: { properties: { styles: true, startIndex: true, reversed: true } }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>多根编辑器
之前
<script> MultiRootEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script> const { MultiRootEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, CloudServices } = CKEDITOR; class Editor extends MultiRootEditor { static builtinPlugins = [ Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation ]; static defaultConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ] }, image: { toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, language: 'en' }; } Editor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>超级构建
请注意，以下代码片段不包括 数学方程式和化学式 和 拼写、语法和标点符号检查 功能的插件，这些插件是旧超级构建的一部分。
如果您需要这些功能在 CDN 分发中，请 联系我们。
之前
<script> ClassicEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script>之后
<script> const { ClassicEditor: ClassicEditorBase, InlineEditor: InlineEditorBase, BalloonEditor: BalloonEditorBase, DecoupledEditor: DecoupledEditorBase, CKFinderUploadAdapter, Alignment, Autoformat, Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Code, BlockQuote, CKBox, CKBoxImageEdit, CKFinder, CloudServices, CodeBlock, EasyImage, Essentials, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, AutoImage, ImageResize, ImageUpload, ImageInsert, PictureEditing, Indent, IndentBlock, TextPartLanguage, Link, AutoLink, LinkImage, List, ListProperties, TodoList, MediaEmbed, Paragraph, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, Highlight, HorizontalLine, HtmlEmbed, GeneralHtmlSupport, HtmlComment, Mention, PageBreak, PasteFromOffice, RemoveFormat, StandardEditingMode, ShowBlocks, Style, SourceEditing, SpecialCharacters, SpecialCharactersEssentials, Table, TableToolbar, TableCellProperties, TableProperties, TableCaption, TableColumnResize, TextTransformation, WordCount, Base64UploadAdapter } = CKEDITOR; const { AIAssistant, OpenAITextAdapter, CaseChange, Comments, ExportPdf, ExportWord, MultiLevelList, Pagination, RealTimeCollaborativeComments, RealTimeCollaborativeRevisionHistory, RealTimeCollaborativeTrackChanges, RevisionHistory, TrackChanges, TrackChangesData } = CKEDITOR_PREMIUM_FEATURES; class ClassicEditor extends ClassicEditorBase {} class InlineEditor extends InlineEditorBase {} class BalloonEditor extends BalloonEditorBase {} class DecoupledEditor extends DecoupledEditorBase {} for ( const Editor of [ ClassicEditor, InlineEditor, BalloonEditor, DecoupledEditor ] ) { // Plugins to include in the build. Editor.builtinPlugins = [ AIAssistant, OpenAITextAdapter, Base64UploadAdapter, Alignment, Autoformat, Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Code, BlockQuote, CKBox, CKBoxImageEdit, CKFinder, CKFinderUploadAdapter, CloudServices, CodeBlock, Comments, EasyImage, Essentials, ExportPdf, ExportWord, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, AutoImage, ImageResize, ImageUpload, ImageInsert, PictureEditing, Indent, IndentBlock, TextPartLanguage, Link, AutoLink, LinkImage, List, ListProperties, TodoList, MultiLevelList, MediaEmbed, Paragraph, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, Highlight, HorizontalLine, HtmlEmbed, GeneralHtmlSupport, HtmlComment, Mention, PageBreak, PasteFromOffice, Pagination, RealTimeCollaborativeComments, RealTimeCollaborativeRevisionHistory, RealTimeCollaborativeTrackChanges, PresenceList, RemoveFormat, RevisionHistory, StandardEditingMode, ShowBlocks, Style, SpecialCharacters, SpecialCharactersEssentials, Table, TableToolbar, TableCellProperties, TableProperties, TableCaption, TableColumnResize, TrackChanges, TrackChangesData, TextTransformation, WordCount, DocumentOutline, TableOfContents, FormatPainter, Template, SlashCommand, PasteFromOfficeEnhanced, CaseChange ]; Editor.defaultConfig = { toolbar: [ 'aiCommands', 'aiAssistant', '|', // Productivity pack. 'tableOfContents', 'formatPainter', 'insertTemplate', 'caseChange', '|', 'pagination', '|', 'trackChanges', 'revisionHistory', 'comment', '|', 'heading', 'style', '|', 'removeFormat', 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'link', '|', 'highlight', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'bulletedList', 'numberedList', 'multiLevelList', 'todoList', '|', 'blockQuote', 'uploadImage', 'insertTable', 'mediaEmbed', 'codeBlock', '|', 'htmlEmbed', '|', 'alignment', 'outdent', 'indent', '|', 'pageBreak', 'horizontalLine', 'specialCharacters', '|', 'textPartLanguage', '|', 'showBlocks', '|', 'undo', 'redo', 'findAndReplace' ], table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption' ] }, image: { styles: [ 'alignCenter', 'alignLeft', 'alignRight' ], resizeOptions: [ { name: 'resizeImage:original', label: 'Original size', value: null }, { name: 'resizeImage:50', label: '50%', value: '50' }, { name: 'resizeImage:75', label: '75%', value: '75' } ], toolbar: [ 'imageTextAlternative', 'toggleImageCaption', '|', 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', 'imageStyle:side', '|', 'resizeImage', '|', 'ckboxImageEdit' ], insert: { integrations: [ 'insertImageViaUrl' ] } }, comments: { editorConfig: { extraPlugins: [ Bold, Italic, Underline, List ] } }, placeholder: 'Type the content here!', language: 'en' }; // Enable the `SourceEditing` plugin for ClassicEditor only. if ( Editor === ClassicEditor ) { Editor.builtinPlugins.push( SourceEditing ); Editor.defaultConfig.toolbar.push( '|', 'sourceEditing' ); } // Enable the `Pagination` plugin for DecoupledEditor only. if ( Editor === DecoupledEditor ) { Editor.builtinPlugins.push( Pagination ); Editor.defaultConfig.toolbar.unshift( 'sourceEditing', '|' ); Editor.defaultConfig.pagination = { // A4 pageWidth: '21cm', pageHeight: '29.7cm', pageMargins: { top: '20mm', bottom: '20mm', right: '12mm', left: '12mm' } }; } } ClassicEditor .create( /* Configuration */ ) .catch( error => console.error( error ) ); </script> -
与使用预定义构建不同，现在您可以通过添加或删除插件来自定义编辑器。但是，在执行此操作之前，您应该测试编辑器以确保它按预期工作。
我们每天都在努力使我们的文档完整。您是否发现过时的信息？有什么东西丢失了吗？请通过我们的 问题跟踪器 报告。
随着 42.0.0 版的发布，我们已经重写了许多文档以反映新的导入路径和功能。感谢您的反馈，这将帮助我们确保文档的准确性和完整性。