CKEditor 5
made with Vuejs

CKEditor 5

这是一个基于Vue的富文本编辑框组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

CKEditor 5是一个基于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

npm i @ckeditor/ckeditor5-build-classic

Yarn

yarn add @ckeditor/ckeditor5-build-classic

浏览器

<script src="https://cdn.ckeditor.com/ckeditor5/20.0.0/classic/ckeditor.js"></script>

使用

引入

ES5:

const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );

ES6:

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

初始化

HTML :

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

js代码:

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

示例

Classic模式:

image.png

Balloon模式:

image.png

Balloon Block模式:

image.png

Inline模式:

image.png

Document模式:

image.png

作者

CKEditor

@ckeditor

相关项目

这是一个基于SVG的星级评分组件。
这是一个基于Vue.js简单的开关组件。
这是一个高度可定制的评级控制组件。
这是一个基于Vue的emoji图标反馈组件。
这是一个具有自动完成功能的简单下拉组件。
这是一个可以显示行内Markdown的Quasar UI应用扩展组件。
这是一个用于格式化和验证电话号码输入框组件。