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

今天给大家分享一款不错的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 ); } );

  • Classic模式

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

  • Balloon模式

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

  • Balloon Block模式

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

  • Inline模式

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

  • Document模式

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

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

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页