(Legacy) 快速入门
⚠️ 我们更改了安装方法，此 Legacy 指南是为了方便用户使用而保留的。如果您正在寻找最新的 CKEditor 5 安装说明，请参阅最新版本的 CKEditor 5 快速入门 指南。
# 介绍
在本指南中，您将找到运行即用型 CKEditor 5 的最快捷最简单的方法，只需最少的努力 - 通过从 CDN 运行编辑器。
# 运行一个简单的编辑器
使用 CKEditor 5 构建创建编辑器非常简单，可以用两个步骤描述
- 通过
<script>标签加载所需的编辑器。 - 调用静态
create()方法来创建编辑器。
让我们以运行一个经典编辑器构建为例。在您的 HTML 页面中添加一个元素，该元素将用作 CKEditor 实例的占位符
<div id="editor"></div>
加载经典编辑器构建（此处使用 CDN 位置）。
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
调用 ClassicEditor.create() 方法来显示编辑器。
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
# 示例实现
具有从本示例中嵌入的 CKEditor 5 的完整网页看起来像这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
这种安装方式只会提供所用构建中可用的功能。
您可以在 专用构建指南 中了解有关其他可用预定义编辑器构建的更多信息。
# 从 CDN 运行一个功能齐全的编辑器
使用 CKEditor 5 提供的丰富编辑功能 运行高级编辑器的最快方法是使用超级构建。超级构建可从 CDN 立即获取，是一个预配置的软件包，可提供对几乎所有可用插件和所有预定义编辑器类型的访问。
超级构建包含大量代码。其中大部分代码可能在您的实现中不需要。使用超级构建应被视为评估目的和测试，而不是生产环境。
我们强烈建议使用 在线构建器 方法或 从源代码构建编辑器 来创建定制且高效的生产环境解决方案。您也可以尝试 预定义构建，它们针对特定需求量身定制。
# 使用 CKEditor 5 超级构建
在超级构建中，所有编辑器类都存储在 CKEDITOR 对象下。除了这个例外，编辑器初始化与 可用构建文档 中描述的初始化没有区别。
由于超级构建包含大量插件，您可能需要使用 removePlugins 配置选项删除不需要的插件，并调整工具栏配置。还有一些插件，例如 Productivity Pack，需要许可证才能运行。您可以在 许可证密钥和激活 指南中了解有关获取和激活许可证密钥的更多信息。观察下面的配置以查看此实现。
# 示例实现
在本例中，您删除了高级协作功能和几个需要凭据才能工作的其他插件。您需要这样做，否则编辑器将抛出错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
#container {
width: 1000px;
margin: 20px auto;
}
.ck-editor__editable[role="textbox"] {
/* Editing area */
min-height: 200px;
}
.ck-content .image {
/* Block images */
max-width: 80%;
margin: 20px auto;
}
</style>
<div id="container">
<div id="editor">
</div>
</div>
<!--
The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
See https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/installation/legacy/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
-->
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/ckeditor.js"></script>
<!--
Uncomment to load the Spanish translation
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/translations/es.js"></script>
-->
<script>
// This sample still does not showcase all CKEditor 5 features (!)
// Visit https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/index.html to browse all the features.
CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/getting-started/setup/toolbar/toolbar.html#extended-toolbar-configuration-format
toolbar: {
items: [
'exportPDF','exportWord', '|',
'findAndReplace', 'selectAll', '|',
'heading', '|',
'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'outdent', 'indent', '|',
'undo', 'redo',
'-',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
'alignment', '|',
'link', 'uploadImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
'textPartLanguage', '|',
'sourceEditing'
],
shouldNotGroupWhenFull: true
},
// Changing the language of the interface requires loading the language file using the <script> tag.
// language: 'es',
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/headings.html#configuration
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
{ model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
{ model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
]
},
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
placeholder: 'Welcome to CKEditor 5!',
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
fontFamily: {
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif'
],
supportAllValues: true
},
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
fontSize: {
options: [ 10, 12, 14, 'default', 18, 20, 22 ],
supportAllValues: true
},
// Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
htmlSupport: {
allow: [
{
name: /.*/,
attributes: true,
classes: true,
styles: true
}
]
},
// Be careful with enabling previews
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/html-embed.html#content-previews
htmlEmbed: {
showPreviews: false
},
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
link: {
decorators: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/mentions.html#configuration
mention: {
feeds: [
{
marker: '@',
feed: [
'@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
'@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
'@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
'@sugar', '@sweet', '@topping', '@wafer'
],
minimumCharacters: 1
}
]
},
// The "superbuild" contains more premium features that require additional configuration, disable them below.
// Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
removePlugins: [
// These two are commercial, but you can try them out without registering to a trial.
// 'ExportPdf',
// 'ExportWord',
'AIAssistant',
'CKBox',
'CKFinder',
'EasyImage',
// This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
// Storing images as Base64 is usually a very bad idea.
// Replace it on production website with other solutions:
// https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
// 'Base64UploadAdapter',
'MultiLevelList',
'RealTimeCollaborativeComments',
'RealTimeCollaborativeTrackChanges',
'RealTimeCollaborativeRevisionHistory',
'PresenceList',
'Comments',
'TrackChanges',
'TrackChangesData',
'RevisionHistory',
'Pagination',
'WProofreader',
// Careful, with the Mathtype plugin CKEditor will not load when loading this sample
// from a local file system (file://) - load this site via HTTP server if you enable MathType.
'MathType',
// The following features are part of the Productivity Pack and require additional license.
'SlashCommand',
'Template',
'DocumentOutline',
'FormatPainter',
'TableOfContents',
'PasteFromOfficeEnhanced',
'CaseChange'
]
});
</script>
</body>
</html>
# CKEditor 5 超级构建的限制
虽然超级构建旨在提供尽可能多的功能，但其中一些插件可能会相互冲突。由于这个原因，一些需要的插件需要从超级构建中排除，因此无法通过这种方式获得
- Watchdog
- ContextWatchdog
- Context
- Title
- 受限编辑
# 运行带有 Premium 功能的功能齐全的编辑器
如果您想快速评估 CKEditor 5 的高级功能，例如实时协作、跟踪更改和修订历史记录，请注册 30 天免费试用。
注册后，您将在客户仪表板中找到运行带有 Premium 功能的编辑器的完整代码段，其中包含所有必要的配置。
# 调整 CKEditor 5 超级构建中包含的插件
您可以使用 removePlugins 配置选项关闭超级构建中可用的任何功能。有关超级构建中当前可用的所有功能的完整列表，请参阅 预定义编辑器构建 指南。删除某些功能可能会使编辑器无法使用。
我们每天都在努力使我们的文档完整。您是否发现过时的信息？是否缺少什么？请通过我们的 问题跟踪器 报告。
随着 42.0.0 版本的发布，我们重写了大量文档以反映新的导入路径和功能。感谢您的反馈，帮助我们确保文档的准确性和完整性。