基础API指南 - 集成方法 - 构建文档 - ckeditor 5中文文档

每一个CKEditor 5构建版本提供一个不同的编辑器类，用来创建编辑器实例：

• Classic editor – Classic编辑器
• Inline editor – Inline编辑器
• Balloon editor – Balloon编辑器
• Document editor – Decoupled编辑器

文档中的大多数例子使用Classic编辑器，其他的构建版本使用方法与此一致。

一个CKEditor 5构建版本编译了一个具体的编辑器类和一些插件。在你的应用中使用编辑器，使用构建版本是最简单的方法。但是你也可以直接使用editor classes和插件去创建一个更合适的版本。

创建编辑器

不管悬着什么构建版本，创建编辑器都是使用静态方法create()。

示例 —— Classic编辑器

在你的html页面中添加CKEditor用来替换的元素：

<textarea name="content" id="editor">

    <p>Here goes the initial content of the editor.</p>

</textarea>

之后调用ClassicEditor.create()来用Classic编辑器替换<textarea>元素：

ClassicEditor

.create( document.querySelector( '#editor' ) )

.then( editor => {

console.log( editor );

} )

    .catch( error => {

console.error( error );

} );

这样，<textarea>元素就会被隐藏并用编辑器替换。 <textarea>数据用于初始化编辑器内容。 可以以相同的方式使用<div>元素。

示例 —— Inline编辑器

与前面的示例类似，添加CKEditor应该初始化到页面的元素：

<div id="editor">

    <p>Here goes the initial content of the editor.</p>

</div>

Then call InlineEditor.create() to attach Inline editor to the <div> element:

InlineEditor

.create( document.querySelector( '#editor' ) )

.then( editor => {

console.log( editor );

} )

    .catch( error => {

console.error( error );

} );

示例 —— Balloon编辑器

该过程与Inline编辑器相同。 唯一的区别是你需要使用BalloonEditor.create()方法。

添加CKEditor应初始化到您的页面的元素：

<div id="editor">

    <p>Here goes the initial content of the editor.</p>

</div>

然后调用BalloonEditor.create()将Balloon编辑器附加到<div>元素：

BalloonEditor

.create( document.querySelector( '#editor' ) )

.then( editor => {

console.log( editor );

} )

    .catch( error => {

console.error( error );

} );

示例 —— Decoupled编辑器

添加CKEditor应初始化到工具栏和可编辑区的元素到页面：

<!-- The toolbar will be rendered in this container. -->

<div id="toolbar-container"></div>

<!-- This container will become the editable. -->

<div id="editor">

    <p>This is the initial editor content.</p>

</div>

然后调用DecoupledEditor.create()方法，使用工具栏创建一个Decoupled编辑器实例，并在两个单独的容器中创建工具栏和编辑区实例：

DecoupledEditor

.create( document.querySelector( '#editor' ) )

    .then( editor => {

const toolbarContainer = document.querySelector( '#toolbar-container' );

toolbarContainer.appendChild( editor.ui.view.toolbar.element );

} )

    .catch( error => {

console.error( error );

} );

每个编辑器类都可以在create()方法中接受不同的参数，并且可以以不同的方式处理初始化。 例如，经典编辑器将使用编辑器替换给定元素，而内联编辑器将使用给定元素初始化其上的编辑器。 请参阅每个编辑器的文档以了解详细信息。

编辑器类的接口也不是强制的。 由于编辑器的不同实现在功能方面可能有很大差异，因此编辑器类实现者可以完全自由地使用API。 因此，本指南中的示例可能不适用于某些编辑器类。

与编辑器交互

创建编辑器后，可以通过其API与其进行交互。 上面例子中的编辑器变量应该启用它。

设置编辑器数据内容

To replace the editor content with new data, use the setData() method:

用新数据替换编辑器内容，请使用setData()方法。

editor.setData( '<p>Some text.</p>' );

获取编辑器数据

获取编辑器如果由于任何原因需要检索编辑器内容，例如通过Ajax调用将其发送到服务器，请使用getData()方法：

const data = editor.getData();

销毁编辑器

在现代应用程序中，通常通过JavaScript以交互方式从页面创建和删除元素。 在这种情况下，应使用destroy()方法销毁CKEditor实例：

editor.destroy()

.catch( error => {

console.log( error );

} );

一旦销毁，编辑器实例使用的资源就会被释放，用于创建编辑器的原始元素会自动显示和更新，以反映最终的编辑器数据。

监听修改

Document#change:data

当文档以编辑器数据中“可见”的方式更改时，将触发此事件。 还有一组更改，例如选择位置更改，标记更改，这些更改不会影响editor.getData（）的结果。 要收听所有这些更改，您可以使用更广泛的Document #change事件。

UMD support

因为构建版本是使用UMD模块分发，编辑器可以使用多种方法检索：

• 通过CommonJS兼容的加载器（例如webpack或Browserify）
• 通过RequireJS（或者其他的AMD库）
• 如果上面的加载器都不可用，你可以使用全局命名空间

例如：

// In the CommonJS environment.

const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );

ClassicEditor.create( ... ); // [Function]

// If AMD is present, you can do this.

require( [ 'path/to/ckeditor5-build-classic/build/ckeditor' ], ClassicEditor => {

ClassicEditor.create( ... ); // [Function]

} );

// As a global variable.

ClassicEditor.create( ... ); // [Function]

// As an ES6 module (if using webpack or Rollup).

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor.create( ... ); // [Function]

想要获取更多信息？

CKEditor 提供了丰富的API与剪辑器交互。获取更多信息请查阅API文档。

文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476870

文章版权归作者所有，转载请保留此声明。