当前位置：网站首页 > 技术教程 > 正文

基于 vue.js 富文本编辑框CKEditor 5

csdh11 2024-12-25 10:52 2 浏览

今天给大家分享一款不错的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，今天的分享就到这里。感兴趣的话，可以去了解一下哈~

ckeditor4中文文档

上一篇：CKEditor5 v23.1发布，支持嵌入Raw HTML
下一篇：HTML 编辑器 CKEditor 5 v18.0.0 发布，改进对表格和列表的支持

相关推荐

SpringBoot集成grpc实现微服务 springboot集成weblogic: 前言传统的SpringCloud实现微服务的方案中，我们通常都是使用SpringCloudOpenFeign组件以RESTFULAPI的调用方式来完成微服务之间的RPC调用；使用RESTFULA...

使用RealESRGAN制作本地图片变清晰脚本: 不知道这个以前，想让图片变清晰要不使用手机上的美图秀秀，要不使用网页，非常麻烦，这个就非常方便了，不必担心隐私泄露，如果实在担心，虚拟机里面断网运行它。下载RealESRGANhttps://gith...

AndroidStudio_Android使用OkHttp发起Http请求: 这个okHttp的使用,其实网络上有很多的案例的,但是,如果以前没用过,copy别人的直接用的话,可以发现要么导包导不进来,要么,人家给的代码也不完整,这里自己整理一下.1.引入OkHttp的jar...

避免用Apache Beanutils进行属性的copy。why?让我们一起一探究竟: 在实际的项目开发中，对象间赋值普遍存在，随着双十一、秒杀等电商过程愈加复杂，数据量也在不断攀升，效率问题，浮出水面。问：如果是你来写对象间赋值的代码，你会怎么做？...

Mysql最全笔记，快速入门，干货满满，爆肝: 目录一、MySQL的重要性二、MySQL介绍三、软件的服务架构四、MySQL的安装五、SQL语句六、数据库相关（DDL）七、表相关八、DML相关（表中数据）九、DQL（重点）十、数据完...

Flume日志采集系统--初体验 flume:构建高可用、可扩展的海量日志采集系统: 这两天看了一下Flume的开发文档，并且体验了下Flume的使用。本文就从如下的几个方面讲述下我的使用心得：初体验——与Logstash的对比安装部署启动教程参数与实例分析Flume初体验Flume...

用Python开发GUI实战教程:图片转换素描画工具: python作为胶水语言，它几乎是无所不能的，但个人一直觉得在GUI开发方面，python可以算作是短板了，为什么？因为性能…python的性能问题，往往出现在其他编程语言对其的鄙夷中。但不管如何py...

java面试之基础(面试不要错过哦) java面试大全及答案: java基础面试题1.jre，jdk，jvm之间的区别是什么？2.Java中一个char类型是否可以存储一个汉字？3.Java的数据类型？4.自动类型转换规则是什么？5.运算符优先级顺序是什么？6.i...

IntelliJ IDEA与Eclipse中lombok插件的安装和使用: IntelliJIDEA与Eclipse中lombok插件的安装和使用...

魔兽世界9.1 刻希亚寻找宝箱、稀有WA(转自nga): WA导入后，一旦你进入刻希亚，WA就会自动提示宝箱、稀有怪物位...

Java安全编码军规 javascript安全编码: 规则1：对外部输入必须进行严格校验【说明】软件最为普遍的缺陷就是对来自客户端或者外部环境的数据没有进行正确的合法性校验。这种缺陷可以导致几乎所有的程序弱点，例如Dos、命令注入、SQL注入、数据破坏、...

SpringBoot实现MySQL数据库自动备份管理系统: 最近写了一个MySQL数据库自动、手动备份管理系统开源项目，想跟大家分享一下，项目地址：https://gitee.com/asurplus/db-backup...

Java微服务实现商城系统架构设计与实现(业务,规划,设计,实现): Java微服务实现商城系统架构设计与实现(业务,规划,设计,实现)目录...

JMicro微服务Hello World 微服务 web: 概述JMicro是本人开发的基于Java实现的微服务框架，前两天发布0.0.3正式版本，并已发布到maven中央仓库。项目源码github：https://github.com/mynewworldy...

福建新画卷，把福建成绩“画”给你看: ...

一周热门

最近发表

首页
收录
顶部