今天给大家分享一款不错的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,今天的分享就到这里。感兴趣的话,可以去了解一下哈~
,