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

ianzhi 2018-11-26 552

每一个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">
    &lt;p&gt;Here goes the initial content of the editor.&lt;/p&gt;
</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">
    &lt;p&gt;Here goes the initial content of the editor.&lt;/p&gt;
</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">
    &lt;p&gt;Here goes the initial content of the editor.&lt;/p&gt;
</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文档。

评论