富文本编辑器 ck-editor5 的使用

已于 2022-12-05 13:49:10 修改
阅读量1.8w 收藏 45
点赞数 12
分类专栏： 前端 文章标签： 前端 javascript vue
于 2022-12-05 12:33:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LueLueLue77/article/details/128184379
版权

最近在项目中需要用到富文本编辑器，据说ck-editor5很不错，于是就使用它了，不过在期间也遇到了很多问题，这里记录下。

一、引入ck-editor5

文档地址：Predefined builds - CKEditor 5 Documentation

这里有个坑，我最初是根据文档执行下面的npm命令下载的，最后捣腾了半天发现里面功能不全，就是一个简单版本的ck-editor

所以不推荐使用

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

推荐引入方式：

 自定义配置自己所需要的功能生成build文件然后在项目中引入

自定义配置地址：CKEditor 5 Online Builder | Create your own editor in 5 steps

1. 选择一个自己喜欢的风格 - 这里我选择第一个 

最低0.47元/天 解锁文章
富文本编辑器CKEditor
Calor13的博客
06-23 476
toolbar: {items: [],})
react使用CKEditor5，两种使用方式（在线构建器和从源代码构建）。附富文本国际化
weixin_47592804的博客
04-24 2485
react CKEditor5使用配置 两种使用方式（在线构建器和从源代码构建） 附国际化
富文本编辑器CKEditor 5的使用
热门推荐
zou8944的博客
07-08 6万+
记录了CKEditor的简单使用方法
CKEDITOR编辑器：PDF内容导入与编辑全攻略
最新发布
weixin_52041354的博客
03-26 620
要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.net core功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentOS,中标麒麟,银河麒麟,统信UOS,信创国产化操作系统。
CKEditor5基本使用
weixin_33726313的博客
07-04 1093
1. CKEditor5基本介绍 CKEditor5的用法和CKEditor4.0版本完全不同，而网上几乎没有比较完整的教程，而官网教程又都是英语，比较难入门，所以在使用CKEditor5的时候踩了许多坑，把自己踩坑过程简单写一下。 2. 基本使用 1. 下载CKEditor5库 官方教程有CDN，npm， Zip download三种获取方式，但这三种方式获取的都是打...
ckeditor5快速使用
xiao1215fei的专栏
04-01 2168
ckeditor官网提供了可以个人定制的方式，然后将地址好的包下载到本地，即可立即使用，定制方式如下： 打开官网定制页面：https://ckeditor.com/ckeditor-5/online-builder/ 第一步：选择一个编辑器的类型，本人选择的是文件类型的编辑器：Decoupled document； 第二步：选择编辑器中需要用到的工具及插件； 第三步：选择工具栏中要显示的工具； 第四步：选择默认的语言； 第五步：开始build； 第六步：下载build后的包
CKEditor5的使用
qq_44820964的博客
11-18 763
1、先下载CKEditor5的zip包，结构如下 https://ckeditor.com/ckeditor-5/download/ 2、先引用ckeditor.js，再写script，textarea的id要和script中要寻找的id一致 <textarea id="editor"/>编辑文本</textarea> <script src="${pageContext.request.contextPath}/ckeditor5-build-classic/ckedito
Vue3中快速简单使用CKEditor 5富文本编辑器
张先生的前端日志
09-08 9194
CKEditor 5就是内嵌在网页中的一个富文本编辑器工具接下来带你快速熟悉CKEditor 5在Vue3中简单使用
富文本编辑器的使用1——CKEditor5编辑器
weixin_43259189的博客
11-24 1787
在项目中遇到要类似编辑Word表格内容样式的需求，运用了CKEditor5编辑器，可对编辑器里面内容进行编辑
vue中使用vue-quill-editor富文本编辑器，自定义toolbar，图片上传到七牛
baozisss的博客
08-11 3035
一、npm 安装 vue-quill-editor  二、在main.js中引入 import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dis...
CKEditor5 基本使用
weixin_30432579的博客
01-11 649
1.引入 <script type="text/javascript" src="/plugin/ckeditor5/ckeditor.js"></script> 2.html <div class="form-group col-lg-12"> <label class="control-label col-lg-3 text-right"&...
CKEditor的使用
weixin_33688840的博客
04-16 189
简介CKEditor是一个富文本编辑器。是一种内嵌于网站中，呈现一种所见即所得的页面效果。常见于博客类型网站、或者电商网站管理系统中对商品文案的编辑功能。基本使用1、首先，下载地址：https://ckeditor.com/ckeditor-4/download/ 下载之后将下载包中的js和css导入项目中。2、然后，写一个简单的带一个textarea的页面。<html><hea...
Laravel 5.2 使用ckeditor
HOOLOO的专栏
04-05 3232
1，如何上传图片。 在页面中，配置ckeditor时加上上传文件，配置即可打开ckeditor的上传图片功能。 CKEDITOR.replace( 'content', { language: 'zh-cn', height: 450, filebrowserBrowseUrl: '{{url('
ckeditor 使用说明，手把手，详细步骤： ckeditor-5 online-builder，持续更新中~~
_1531613221
05-06 2813
ckeditor 使用说明，手把手，详细步骤： ckeditor-5 online-builder，持续更新中~~
强烈推荐: CKEditor 5 经典编辑器 —— 极致编辑体验的革新者
gitblog_00027的博客
06-16 1327
???? 强烈推荐: CKEditor 5 经典编辑器 —— 极致编辑体验的革新者 项目地址:https://gitcode.com/gh_mirrors/ck/ckeditor5-build-classic 在当今数字化时代，一款优秀的文本编辑器不仅可以提高工作效率，还能为用户提供更佳的创作环境。在此背景下，我们向大家隆重推荐 CKEditor 5 的经典编辑器构建（以下简称“CKEditor 5”）...
ckeditor5使用教程
09-26
CKEditor 5是一个现代的富文本编辑器，它提供了丰富的功能和自定义选项，适合构建复杂的Web内容编辑体验。以下是使用CKEditor 5的基本步骤： 1. **安装**: - 可以通过npm包管理器安装 (`npm install @ckeditor/ckeditor5-build-classic`), 或者从CDN加载库。 2. **初始化编辑器**: 在HTML中添加编辑器元素，并在JavaScript中实例化编辑器： ```html <textarea id="editor"></textarea> ``` ```javascript import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; ClassicEditor.create(document.querySelector('#editor'), { toolbar: 'full', // 使用预设的全功能工具栏 }); ``` 3. **配置选项**: CKEditor 5允许你调整各种设置，比如字体、颜色、格式等，可以查阅官方文档了解详细配置。 4. **事件处理**: 可以监听编辑器的事件，如`instanceReady`表示编辑器准备就绪，`contentChanged`当内容发生变化时触发。 ```javascript editor.on('instanceReady', (event) => { console.log('Editor is ready!'); }); editor.on('contentChange', () => { console.log('Content has been changed.'); }); ```
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值