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

vue富文本代码输入框(基于vue.js富文本编辑框CKEditor)(1)

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

vue富文本代码输入框(基于vue.js富文本编辑框CKEditor)(2)

vue富文本代码输入框(基于vue.js富文本编辑框CKEditor)(3)

vue富文本代码输入框(基于vue.js富文本编辑框CKEditor)(4)

vue富文本代码输入框(基于vue.js富文本编辑框CKEditor)(5)

vue富文本代码输入框(基于vue.js富文本编辑框CKEditor)(6)

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

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

,