CKEditor 生态系统文档
Search
Contribute to this guide
首页/CKEditor 5/框架

guide编辑器和配置

# 测试环境

在本教程中，我们创建了使用编辑器所需的最小设置。要继续阅读，请运行以下命令

npx -y degit ckeditor/ckeditor5-tutorials-examples/crash-course crash-course
cd crash-course

npm install
npm run dev

打开终端中显示的 URL。如果一切顺利，您应该在页面上看到一个“Hello world!”文本。

我们鼓励您按照教程中的步骤操作并亲自动手输入代码，以建立肌肉记忆和心理记忆。

# 创建编辑器

您设置的测试环境在页面上显示“Hello world!”。让我们学习第一个编辑器方法，该方法用编辑器替换此元素。

打开 src/main.js 文件并添加以下代码

// Import the editor.
import { ClassicEditor } from 'ckeditor5';

// Import the styles.
import 'ckeditor5/ckeditor5.css';

// Get the HTML element with the ID of 'app'.
const element = document.querySelector( '#app' );

// Instantiate the editor using the `create` method.
const editor = await ClassicEditor.create( element );

如您所见，create() 方法创建一个新的编辑器实例。它用编辑器 UI 替换作为第一个参数传递的 DOM 元素，并将编辑器的初始状态设置为该 DOM 元素的内容。

但是，您可能已经注意到“Hello world!”文本没有出现在编辑器中，您也无法在其中写入任何内容。这乍一看可能很奇怪，但这是设计使然。让我们通过正确的配置来解决这个问题。

# 配置

编辑器本身没有做太多事情 - 在这个阶段它只是一个空壳。赋予编辑器几乎所有功能的是插件。我们将在下一章详细讨论插件，但现在，让我们先安装两个插件，它们提供在编辑器中键入所需的最基本功能。

// Import plugins.
import { Essentials, Paragraph } from 'ckeditor5';

// Update the call to the `create()` method.
const editor = await ClassicEditor.create( element, {
    plugins: [
        Essentials,
        Paragraph
    ]
} );

如上例所示，create() 方法将配置对象作为其第二个参数。在这个对象中，我们可以传递 plugins 数组，其中包含我们想要使用的插件。

页面刷新后，您应该在编辑器中看到“Hello world!”文本，并能够在其中键入内容。

Essentials 插件添加了 Undo 和 Redo 操作。让我们将它们添加到编辑器的工具栏。

const editor = await ClassicEditor.create( element, {
    plugins: [
        Essentials,
        Paragraph
    ],

    // Add the toolbar configuration.
    toolbar: {
        items: [
            'undo',
            'redo'
        ]
    }
} );

刷新页面后，编辑器顶部应该有两个按钮。如果您在编辑器中键入内容并单击“后退箭头”按钮，您的更改应该会被移除。单击“前进箭头”按钮应该恢复这些更改。

我们刚刚更新的配置对象控制着编辑器的功能、外观和行为。如果您想更改编辑器的任何方面，很可能需要通过此对象进行更改。

# 编辑器方法

既然您可以在编辑器中键入内容，让我们测试除了 create() 之外的其他编辑器方法。将以下内容添加到 src/main.js 文件的底部。它将允许我们全局访问编辑器实例以进行测试。

// Add the global `editor` variable (only needed for debugging).
window.editor = editor;

我们将测试的四个常用方法是

# getData() 和 setData()

在浏览器中打开页面并打开控制台。在控制台中，运行以下代码

editor.getData();

它应该打印文本 <p>Hello world!</p>，这是编辑器的当前内容。请注意开头和结尾的 <p> 标签。getData() 返回编辑器生成的 HTML 内容，而不是您在 UI 中看到的内容。这将在本教程的后续章节中详细解释。

您还可以使用 setData() 方法以编程方式更改编辑器的内容。

editor.setData( '<p>Modified from the console!</p>' );

运行上面的命令应该更新编辑器的状态。请注意开头和结尾的 <p> 标签。此方法期望 HTML 作为参数，但编辑器以更友好的方式显示此内容。

# execute()

在本教程的前面步骤中，我们使用撤消和重做按钮来恢复和还原更改。让我们从控制台中做同样的事情。

在我们这样做之前，请在编辑器中键入一些内容。然后从控制台运行以下代码

editor.execute( 'undo' );

编辑器应该执行 undo 命令并将状态恢复到您更改之前的状态。现在运行 redo 命令以恢复这些更改

editor.execute( 'redo' );

# destroy()

destroy() 方法删除编辑器并清理其后遗症。这包括将其从 DOM 中移除、移除所有事件监听器等等。

从控制台运行以下命令

editor.destroy();

编辑器及其内容应该消失。此方法返回一个 Promise，因此如果您想在编辑器销毁后执行更多逻辑，则需要 await 它。

# 下一步

在下一章中，您将 详细了解插件，我们将从头开始创建一个新插件。