ckeditor5支持html,CKEditor 5富文本编辑器使用教程(一)

如果你正在开发博客网站,正愁于用什么插件来做文章编辑,那么可以考虑使用CKEditor。

一般设计文章编辑都希望用的富文本编辑器有以下功能

样式丰富,便于设置文本样式

扩展方便,可以对富文本进行功能扩展,实现需要的功能

可定制化,富文本的样式可以定制以适应于各个场景

我的网站https://SamYoc(https://www.samyoc.com)富文本编辑器使用的正是CKEditor,不过用的是CKEditor 4。但是今天我们要说的是CKEditor 5。

CKEditor 5对于CKEditor 4来说,有着显著的提高

更加美观,视觉上看确实如此

定制化程度高

组件化建设程度更高

那么话不多说,先来看看CKEditor的几种形态。

Classic editor (经典版)

经典版的顶部会常驻工具栏。

b329e1807d4b25362127ab540f619391.png

Inline editor(内联版)

这个形态的编辑器与classic的相比最大的不同在于顶部的工具栏不会常驻,用户只要进入编辑状态,才会显示出工具栏,就像这样。但是工具栏只会浮动出现在顶部

e034ff59df4cce72f8066b9b0c843c7a.png

Balloon block editor

这个形态是顶部工具栏也不会常驻,但是和Inline editor不同点在于,工具栏的位置是跟随你的编辑光标位置动态变化。而且左侧有一个音符,点击这个音符可以弹出工具栏。

bcbb9d40823ec27ff4391605ecb60dd7.png

Balloon editor

这个形态和Balloon block editor是一样的,不同点在于左侧没有了这个音符。

b2fb41a10c07c1c53df5080acbdec61f.png

下面再来看一下最基础的使用。有以下几种使用方式

1. 无脑使用,插件里提供什么,我就用什么

这是一种比较懒的使用方式,要做的事情也是极其简单的,下面以Classic Editor为例。

在你的HTML页面中加一个textarea元素,CKEditor会对它做处理:

加载 classic editor build (here CDN location is used):

ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => {

console.error( error );

} );

示例:

CKEditor 5 – Classic editor

Classic editor

This is some sample content.

ClassicEditor

.create( document.querySelector( '#editor' ) )

.catch( error => {

console.error( error );

} );

ES6版本

npm install --save @ckeditor/ckeditor5-build-classic

现在在你的代码中import:

// Using ES6 imports:

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

// Or CJS imports:

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

使用方法:

ClassicEditor

.create( document.querySelector( '#editor' ) )

.then( editor => {

console.log( editor );

} )

.catch( error => {

console.error( error );

} );

2.定制化,增加自定义插件,使用指定插件

将会在下一篇揭晓...

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值