今天给大家分享一款不错的Vue图文编辑器组件CKEditor5。

ckeditor5 基于Vue的富文本编辑框组件，易于定制，具有现代UI和基于插件的模块化体系结构，提供了原生的CKEditor 5 Vue.js集成。

总共有5种不同的风格。

@ckeditor/ckeditor5-build-classic
@ckeditor/ckeditor5-build-inline
@ckeditor/ckeditor5-build-balloon
@ckeditor/ckeditor5-build-balloon-block
@ckeditor/ckeditor5-build-decoupled-document

这里仅介绍@ckeditor/ckeditor5-build-classic，其他风格类似。

安装

$ npm i @ckeditor/ckeditor5-build-classic

引入

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

<div id="editor">
    <p>Here goes the initial content of the editor.</p>
</div>

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

• Classic模式

• Balloon模式

• Balloon Block模式

• Inline模式

• Document模式

# 文档地址
https://ckeditor.com/docs/ckeditor5/

# 仓库地址
https://github.com/ckeditor/ckeditor5-vue

ok，今天的分享就到这里。感兴趣的话，可以去了解一下哈~