1. 程式人生 > >CKEditor 5 v11.2.0 釋出,可以直接複製 Word 文件

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 => {
    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 => {
    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 ) );
} );

移動裝置上更好的 UI

改進的 UI 帶有下拉麵板定位,可確保下拉內容始終對使用者可見。還使一些 UI 元素根據環境響應,例如,連結和影象文字替代小氣球圖示現在適應螢幕的大小,使觸控按鈕更容易。


還有其它更新內容,詳情檢視釋出公告

下載地址:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html