CKEditor4-vue 内联编辑器 使用避雷（为你使用 CKEditor 提供新思路）

最新推荐文章于 2025-06-07 09:21:34 发布
原创 最新推荐文章于 2025-06-07 09:21:34 发布 · 1.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #ckeditor

本文档介绍了在Vue项目中使用CKEditor4-vue时遇到的问题及解决方法，包括如何选择合适的编辑器版本、在Vue中引入CKEditor、配置编辑器以及解决额外功能包的下载和手动添加问题。通过学习，读者可以掌握CKEditor4-vue的正确使用方式，避免开发过程中的困扰。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最新接到一个项目，需要使用CKEditor，多方查找资料CKEditor4/5,最后我使用CKEditor4-vue。本着使用过百度的富文本编辑器。应该很容易上手才对。在使用过程中确实踩了很多坑。在使用学习新的技术，知识的时候。发生许多问题。为以后的学习开发。打开新思路。

编辑器查找

官网 // https://ckeditor.com
官网提供三种不同的样式，我这里选用稍复杂的内联编辑器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
选取环境包的时候有两处
github 官网 https://github.com/ckeditor 提供的包比官网上面多出一种集成vue的
在这里插入图片描述

我用的版本 站在大佬的肩膀上开发（滑稽）
在这里插入图片描述

未发现的版本(写总环时的意外发现，我太粗心 了/)
在这里插入图片描述
官网的版本 https://ckeditor.com/ckeditor-4/download/?null-addons=

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue使用CKEditor4编辑器
周家大小姐
06-14 3943
官网地址https://ckeditor.com/ckeditor-4/download/输入命令 安装好后在vue页面使用 如果有报错可能是你没有我的插件解决方法:下载插件包放到public中 找到public\ckeditor\samples\index.html打开文件 皮肤安装https://ckeditor.com/docs/ckeditor4/latest/guide/dev_skins.html 点击要下载的皮肤后会出现皮肤浏览;再点击下载下载好后解压到指定的文件中,publi
ckeditor5 自定义构建+上传图片+wps 复制图文粘贴到编辑器空白丢失+去掉右下角logo+当前输入字数展示 解决记录
weixin_48969871的博客
06-04 1283
正常来说 直接新建一个plugins 文件夹 放入依赖包，然后根据文件地址引用就可以了，后面再说如何把修改代码后的依赖包上传到npm仓库 可以通过npm 直接下载，应用到项目中；npm init 初始化创建你的npm 仓库，其中name : 你的插件名称（npm install 时的插件名字）；再把webpack文件 恢复原来的代码 再进行打包命令 npm run build，成功后 就是修改后支持粘贴wps 文字+图片的编辑器依赖包了。： 项目的许可证，决定了其他人如何使用、修改和分发你的代码。
CKEditor 4 编辑器已与 Vue.js 集成
寒冰屋的专栏
02-12 2564
虽然 CKEditor 4 不是目前主要维护的分支，不过官方并没有让它落后于潮流。近日，CKEditor 团队发布了与 Vue.js 框架原生集成的 CKEditor 4。 这就意味着，开发者可以通过<ckeditor />标签以 Vue.js 组件的形式使用 CKEditor 4 ，而作为 Vue.js 的原生组件，开发者可以更快地将其应用到网站上。为了尽可能简单直观地安装使用...
CKeditor4富文本编辑器使用实战与精通
weixin_35755188的博客
06-07 646
CKeditor4是一个开源的、基于Web的所见即所得（WYSIWYG）文本编辑器，它提供了丰富的编辑功能，适用于各种Web应用程序。CKeditor4以其轻量级、高性能和强大的配置能力而闻名，使得它成为许多网站编辑和内容管理系统的首选编辑器。编辑器支持HTML编辑，提供了格式化文本、图片上传、链接管理等多种功能，使得开发者可以在不需深入了解HTML代码的情况下，快速创建内容丰富的网页。CKeditor4广泛应用于多种场景，包括但不限于博客平台、论坛、企业内容管理系统（CMS）和社区网站。
在VUE中,关于CKEditor使用
weixin_34377919的博客
10-22 383
官方文档 语言配置 代码如下 ClassicEditor .create( document.querySelector( '#editor' ), { language: 'de' // 配置语言 , 还需要去引用语言文件 , 在`@ckeditor/ckeditor5-build-decoupled-docum...
在vue中使用CKEditor4富文本编辑器
猪肉大葱水饺
09-02 3005
在vue中使用CKEditor4富文本编辑器
vue项目集成CKEditor4富文本编辑器
EverythingAtOnce的博客
12-12 1964
CKEditor4（CKEditor官方网址—可以点击直接过去），官网有ckeditor4和ckeditor5两个大的产品可以使用，我用的是CKEditor4，CKEditor 是新一代的FCKeditor，是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。
ckeditor5自定义 vue_ckeditor5,ckeditor4富文本编辑器在vue中的使用
weixin_39668408的博客
12-31 384
先介绍下ckeditor5的使用方式:安装依赖：npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic要创建编辑器实例，必须首先将编辑器构建和组件模块导入应用程序的根文件中(例如，main.js在由Vue CLI生成时)。然后，使用以下Vue.use()方法启用组件：import Vue from '...
ckeditor5-math：CKEditor 5的数学功能
02-03
您可以使用它来插入，编辑和查看数学方程式和公式。 该插件支持MathJax，KaTeX和自定义排版引擎。 目录 产品特点 TeX语法 内联和显示方程式 预览视图 多种排版引擎 具有多种输入输出格式 粘贴支持从纯文本 自动格式...
CKEditor4配置与开发详细中文说明文档
11-17
2. 然后，使用 CKEDITOR.replace 方法将 `<textarea>` 元素替换为编辑器的实例。 示例代码： ``` <textarea name="editor1"><p>Initial value.</p></textarea> CKEDITOR.replace( 'editor1' ); ``` 四、内联式...
vue 富文本编辑器 —— wangEditor
且听风吟的博客
08-26 2330
富文本编辑器wangEditor百度UEditorbootstrap-wysiwygckeditor ckeditorKindeditorTinymcevue-quill-editor 很多项目中都需要用到富文本编辑器，目前也有很多种类的富文本编辑器。我就查了一下资料，了解了一些目前常用的富文本编辑器 wangEditor http://www.wangeditor.com/index.html 国产，基于javascript和css开发的web富文本编辑器，开源免费，上传图片可以控制尺寸。重点在于它轻量，
ckeditor4 自定义组件之文字格式组件，类加粗，类下划线(vue项目).pdf
12-16
ckeditor4 自定义组件之文字格式组件，类加粗，类下划线(vue项目)
ckeditor4完整配置说明
05-06
CKeditor的完整toolbar配置说明，很多人不知道，其他它就在sample下面。我单摘出来，方便大家查看
CKEditor4富文本编辑器
03-16
FCKEditor4（ckeditor）富文本编辑器 .
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
vue2使用CKEditor 4富文本
qq_60654563的博客
06-26 2176
CKEditor 4富文本官方说已经不维护了，相当于报废的产品，但是基本的功能还是可以用的，用在vue里面基本没有什么问题网上很多的安装CKEditor 4步骤，但是亲身试用没用直接下载包好用。
富文本编辑器CKEditor4在VUE中的配置及使用
qq_45748269的博客
04-25 6781
目录 添加/删除编辑器功能 添加字体字号 设置默认字体字号 一.下载安装 第一次做富文本编辑器，经过两天的查资料和参考官方文档和同事的帮助下终于完成需求功能，下面整理了一下使用的方法。 我们的需求是这样的：需要的编辑器功能如下图，需要添加加字体，设置默认字体字号，也是最困扰我的地方！ 通过调查资料，vue项目中使用ckeditor4有两种方式，一种是去官网下载ckeditor4的包，解压放在 项目中，然后根据自己的需求，通过修改编辑器的配置文件config.js文件来添加/删除功能，
记VueJs中调用Ckeditor4一坑
JustinLee
04-03 5587
VueJs 2.3 开发一项目，过程中需要富文本编辑结果上传，在工程中index.html导入资源后，组件调用CKEDITOR.replace('editor1');初始化console.log显示如下错误。 Uncaught TypeError: Cannot set property 'dir' of undefined 这个问题很是困扰，前后翻腾了很久。把Google上这个主...
【前端】Vue中使用CKeditor作为富文本编辑器
Lifelong learning.
06-01 1065
请输入文本
推荐vue3使用的富文本编辑器
最新发布
07-31
注意：用户的问题已经明确为“推荐适用于Vue 3的富文本编辑器”，所以我们需要提供几个选项，并说明它们的特点。 推荐几个主流的Vue3富文本编辑器： 1. **VueQuill**：基于Quill的Vue3组件，Quill是一个流行的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值