vue富文本代码输入框(基于vue.js富文本编辑框CKEditor)
今天给大家分享一款不错的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,今天的分享就到这里。感兴趣的话,可以去了解一下哈~
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com