Vue 2.x 使用CKEditor 的入坑

最新推荐文章于 2024-06-26 11:28:19 发布
最新推荐文章于 2024-06-26 11:28:19 发布
阅读量537 收藏 1
点赞数
文章标签： javascript webpack ViewUI
原文链接：https://segmentfault.com/a/1190000017931488
版权

Vue 2.x 使用CKEditor 的入坑到放弃

最近在构思自己的博客，后台编辑文章的时候想用富文本编辑器，看了几个比较火的富文本编辑器，最后选择了CKEditor，一个老牌编辑器厂商，ck5看这很不错，但是在使用过程中遇到了写问题，不知道怎么解决，在网上找了好久，也没有找到发现答案。尝试了下官方给的demo好像也是存在问题的，也可能是我姿势不对。换了下4发现是好的，然后就入坑ck4了，整体来说，就用户体验上，ck4的界面和功能是输给5的，但是好在我能把需要的功能配置出来。

官方也给了快速上手的参考文档。
下面是我的使用配置：

1.在index.html 引入官方的cdn

clipboard.png

2.配置webpack，我使用的是cli3.0是在vue.config.js配置

clipboard.png

3.然后在使用的页面

clipboard.png

weixin_34301132
关注
VUE2.x 使用CKEditor5 按需引入 + 自定义上传图片
qq_43554420的博客
05-11 1930
本指南假定您使用Vue CLI 3+作为样板
VUE3.X使用最新版swiper小结
lynnpaul的博客
04-14 7439
Vue版本： Swiper版本： Vue3的安装、环境搭建及创建项目不再赘述，已Swiper安装开始。先上几个连接： Vue3.x官网：https://v3.cn.vuejs.org/guide/installation.html； Swiper官网：https://swiperjs.com/vue； Swiper配置选项：https://www.swiper.com.cn/api/； Swiper GitHub地址：https://github.com/surmon-china/vue
vueckeditor是一个用于Vuejs2的Ckeditor编辑器
08-07
vue-ckeditor是一个用于Vue.js 2的Ckeditor编辑器
ckeditor vue2_Ckeditor用于Vue.js 2
cuk5340的博客
07-26 992
ckeditor vue2 维克迪克特 (vue-ckeditor) Ckeditor using for Vue.js 2. Ckeditor用于Vue.js 2。 要求 (Requirements) Ckeditor >= 4Ckeditor > = 4 Vue.js >= 2Vue.js > = 2 安装 (Install) CDN (CDN) <sc...
vue2使用CKEditor 4富文本
qq_60654563的博客
06-26 1225
CKEditor 4富文本官方说已经不维护了，相当于报废的产品，但是基本的功能还是可以用的，用在vue里面基本没有什么问题网上很多的安装CKEditor 4步骤，但是亲身试用没用直接下载包好用。
探索 Vue.js 的强大文本编辑器 —— vue-ckeditor2
gitblog_00099的博客
06-04 319
探索 Vue.js 的强大文本编辑器 —— vue-ckeditor2 vue-ckeditor2CKEditor 4 wrapper by Vue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-ckeditor2 在寻找一个为您的Vue.js应用量身定制的高效、灵活且强大的富文本编辑器吗？那么，vue-ckeditor2正是您不可或缺的选择。本篇文章...
vue-ckeditor2：Vue.js的CKEditor 4包装器
02-23
维克迪克特 Ckeditor用于Vue.js 2 要求 > = 4 > = 2 安装 CDN < script src =" https://unpkg.com/vue-ckeditor2 " > </ script > NPM $ npm install vue-ckeditor2 --save 用法 本文档适用于v2.0 +。 如果您要查找旧版本，请在文档 成分 然后在您的组件中： < template> < div> < vue-ckeditor v-model = " content " : config = " config " @ blur = " onBlur ($event) " @ focus = " onFocus ($event) " @ contentDom = " on
ckeditor5-vue-Vue.js的官方CKEditor 5 Rich Text编辑器组件。-Vue.js开发
05-27
Vue.js的CKEditor 5 RTF编辑器组件Vue.js的官方CKEditor 5 RTF编辑器组件。 开发人员文档:open_book:请参阅“适用于Vue.js的富CKEditor 5富文本编辑器组件”。官方文档适用于Vue.js的CKEditor 5富文本编辑器组件。...
ckeditor5-vue:官方CKEditor 5 Vue.js组件
05-02
适用于Vue.js的CKEditor 5 RTF编辑器组件3+ :warning: 该存储库包含Vue.js 3+的CKEditor 5组件。 较低Vue.js版本的组件位于另一个存储库- 。 Vue.js的官方 RTF编辑器组件。 :open_book: 请参阅中的指南以了解...
vue2使用自定义ckeditor插件完成富文本编辑器快速集成
爱意迷了眼丶的博客
07-17 1808
1. package.json 下载依赖。2. main.js 注册。3. App.vue 使用。
CKEditor5-Custom-Build
09-06
集成了以下模块： Essentials,UploadAdapter,Autoformat,Bold,Italic,BlockQuote,EasyImage,Heading,Image,ImageCaption,ImageStyle,ImageToolbar,ImageUpload,Link,List,Paragraph,Alignment,Font,Highlight,Table,Underline,Strikethrough,Code
通过ckeditor组件在vue2中实现上传图片
Heartnottowake的博客
04-12 710
2，下载sdk，https://ckeditor.com/ckeditor-5/online-builder/#，打开这个地址，配完就可以下载。3，启动sdk，运行npm install ,npm run build,在build文件夹下就有一个ckeditor.js。1，配置图片上传，其实就是imageUpload这个插件，首先在组件ckeditor添加属性config。直接将这个js放到我们的项目public下，通过script引入即可。5，在我们的组件中引入即可，这样上传图片就完成了，整体代码。
Vue 2.x 使用CKEditor 的入坑（后续）
weixin_34112900的博客
01-24 1041
上篇文章记录了vue如何引入ckeditor4，这篇主要记录下ckeditor数据获取等，1.实现了编辑器初始化完成后赋值，可用于编辑新的文章2.监听编辑器内容改变，实时获取最新数据，用于保存附上老夫的demo <template> <div class="editor"> ...
vue2集成ckeditor5
Wangzx的博客
05-12 4836
ckeditor5官方提供了不同的编辑器类型，本文只介绍classic类型。 最简方式：ckeditor5-build-classic 最简方式是引入ckeditor5-build-classic组件，但是富文本只包含最基础的功能，可能不满足使用需求。且当用户在ckeditor5-build-classic组件基础上添加其他组件时，会报重复引入错误。因此建议使用第二种方法。 <template> <div id="app"> <ckeditor
Vue2 安装 简单使用 ckeditor5 classic
weixin_45591598的博客
07-29 1491
ckeditor5 classic
vue2使用ckeditor4富文本，超详细，超多插件！
qq_35031494的博客
07-05 2450
vue2使用ckeditor4富文本，超详细，超多插件！
Vue 使用CKEditor
贾斯丁的博客
03-22 306
调整组件高度
vue2 引入ckeditor富文本
zhang804633234的专栏
04-29 739
在main.js 注册全局组件。
VUE2.x 使用CKEditor教程
最新发布
09-09
Vue2.x 使用CKEditor的教程可以分为以下几个步骤： 1. 安装CKEditor 首先，你需要在你的Vue项目中安装CKEditor。可以通过npm或者yarn来进行安装： ```bash npm install ckeditor4-vue # 或者 yarn add ckeditor4-vue ``` 2. 引入CKEditor 在你的Vue组件中引入CKEditor组件并注册。你可以在单个组件中局部注册，也可以在全局范围内注册。 ```javascript // 如果是在单个组件中局部注册 import CKEditor from 'ckeditor4-vue'; export default { components: { CKEditor }, // ... } ``` 3. 使用CKEditor 在你的Vue模板中使用CKEditor组件，并通过v-model进行双向数据绑定。 ```html <template> <div> <ck-editor v-model="editorData" :config="editorConfig" ></ck-editor> </div> </template> <script> import CKEditor from 'ckeditor4-vue'; export default { components: { CKEditor }, data() { return { editorData: '', editorConfig: { // 这里可以设置CKEditor的配置项，例如工具栏等 } }; }, // ... }; </script> ``` 4. 配置CKEditor（可选） 根据需要配置CKEditor的各种参数，例如工具栏配置、插件加载等。CKEditor的配置项非常丰富，可以在[CKEditor官方文档](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html)中找到详细的配置说明。 通过以上步骤，你可以在Vue2.x项目中成功集成并使用CKEditor。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值