CKEditor 5 v11.2.0 发布，可以直接复制 Word 文档

CKEditor 5 v11.2.0 发布了，CKEditor 是一个网页在线文字编辑器，特点是高性能与可扩展。

此版本带来了期待已久的 Office 粘贴支持，例如可以直接复制 Microsoft Word 的文档，还集成了 CKFinder 文件上传器，此外，完善了图像上传文档，改进了移动设备上的 UI，并引入了许多其它功能和改进。

复制 Word 文档

此新功能允许粘贴 Microsoft Word 中的内容并保留原始结构和格式，包括基本文本样式、标题级别、链接、列表、表格和图像等。

集成 CKFinder

CKFinder 是一个文件管理器和上传器，它是 CKEditor 4 的一个关键特性，现在已经集成到了此版本的 CKEditor 5 中。集成之后允许将图像以及文件链接插入到编辑内容中。

其它变更

插件开发者需要关注一下，Position、Range 和 Writer 引擎类 API 已经发生变化。在此版本中，对 @ckeditor/ckeditor5-engine 软件包中的公共 API 进行了一些重大更改，view 和 model 中不再开放 Position 和 Range 类的各种方法，例如Position#createAt()、Position#createFromParentAndOffset()、Range#createIn() 和Range#createCollapsedAt()。它们已被相应的方法替换，例如 createPositionAt( parent, offset )、createRangeIn() 和createRange( position )。

比如之前的写法：

import Position from '@ckeditor/ckeditor5-engine/src/model/position';
import Range from '@ckeditor/ckeditor5-engine/src/model/range';

// ...

editor.model.change( writer =&gt; {
    const imageElement = writer.createElement( 'image', {
        src: 'https://example.com/image.jpg'
    } );

    // Insert the image at the current selection location.
    editor.model.insertContent( imageElement, editor.model.document.selection );

    const paragraph = writer.createElement( 'paragraph' );
    const insertPosition = Position.createAfter( imageElement );

    writer.insert( paragraph, insertPosition );

    // Set the selection in the &lt;paragraph&gt;.
    writer.setSelection( Range.createIn( paragraph ) );
} );

import Position from '@ckeditor/ckeditor5-engine/src/model/position';

import Range from '@ckeditor/ckeditor5-engine/src/model/range';

// ...

editor.model.change( writer => {

const imageElement = writer.createElement( 'image', {

src: 'https://example.com/image.jpg'

} );

// Insert the image at the current selection location.

editor.model.insertContent( imageElement, editor.model.document.selection );

const paragraph = writer.createElement( 'paragraph' );

const insertPosition = Position.createAfter( imageElement );

writer.insert( paragraph, insertPosition );

// Set the selection in the <paragraph>.

writer.setSelection( Range.createIn( paragraph ) );

} );

现在这样写：

// Imports from `@ckeditor/ckeditor5-engine` are no longer needed.

// ...

editor.model.change( writer =&gt; {
    const imageElement = writer.createElement( 'image', {
        src: 'https://example.com/image.jpg'
    } );

    editor.model.insertContent( imageElement );

    const paragraph = writer.createElement( 'paragraph' );

    // Writer#createPositionAfter() instead of Position#createAfter().
    const insertPosition = writer.createPositionAfter( imageElement );

    writer.insert( paragraph, insertPosition );

    // Writer#createRangeIn() instead of Range#createIn().
    writer.setSelection( writer.createRangeIn( paragraph ) );
} );