vue集成CKEditor构建框架的使用,遇到富文本框不出现工具栏等操作
官方关于Vue集成CKEditor富文本框的文档:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-es6-modules
先说下依赖吧,
"@ckeditor/ckeditor5-vue" 这个是使用vue集成的时候,这个依赖必不可缺,当然,如果你是直接使用script脚本引入的话,这个依赖也不是必须的,通过ckeditor在线构建出的压缩包里面就有一个例子,不过是 内联脚本 版本的。
说下我遇到的问题, 集成官方提供的ckeditor版本可以正常使用,主要就是 引入
"@ckeditor/ckeditor5-vue"依赖和 npm install --save @ckeditor/ckeditor5-build-classic 安装的版本,照文档的操作就可以正常使用,但是我认为这里面包含的ckfinder功能我不是需要的,所以,我就是用官方提供的在线构建器,选择需要的功能。

,当通过 npm folder形式进行安装后,使用的问题情况是 页面里并没有出现工具栏和悬浮菜单框,通过查看提供的例子,里面是需要配置的,所以,通过vue配置一下就可以正常使用了

总结的就一句话,官方提供的ckeditor版本可以照着官方文档就可以正常使用;而通过ckeditor提供的在线构建器构建的版本,这个配置项不可或缺,不然,页面不会出现菜单项。
这个是单文件组件的data项,Vue.use(CKEditor) 就可以使用这个组件了
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
至关重要的一句话啊,放在了API中说明。。。

vue集成CKEditor构建框架的使用,遇到富文本框不出现工具栏等操作的更多相关文章
- vue集成ckeditor富文本框,怎么获取CKEditor实例?
CKEDITOR 版本5 ,vue集成形式 vue集成ckeditor富文本框,由于不是通过js创建的富文本对象,所以,无法取得实例对象,官方说明 官方在builds-->Getting and ...
- 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例
http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...
- 第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框
第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...
- vue中对element-ui框架中el-table的列的每一项数据进行操作
vue中使用element table,表格参数格式化formatter 后台返回对应的数字, 那肯定不能直接显示数字,这时候就要对 表格进行数据操作 如图: 代码: methods: { //状态改 ...
- mvc ---- ajax 提交 (ckeditor)富文本框 提示潜在危险 Request.Form
ajax 提交 ckeditor 中的内容怎么提交都提交不了,折腾半天,后来终于找到问题 在你的方法头上加 [HttpPost] [ValidateInput(false)] public Actio ...
- 打造个人IP: 开源项目网站构建框架
前言 您是否正在寻找有关如何创建博客网站: 个人博客 或者 开源项目官网 : Dubbo, Vue.js的构建框架? 在这篇文章我将向您展示如何创建一个美观并且实用的开源博客/开源项目官网构建框架!近 ...
- vue集成百度富文本编辑器
1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...
- yii2集成富文本编辑器redactor
作者:白狼 出处:http://www.manks.top/article/yii2_redactor本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...
- 富文本(wangEditor框架)的使用教程
富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...
随机推荐
- json系列(三)cjson,rapidjson,yyjson解析性能对比
前言 本篇对cjson,rapidjson,yyjson三种json反序列化工具的性能进行对比. 有json样本数据如下: 实验环境: cpu:Xeon cpu主频:2.20GHz 以下示例均未对字段 ...
- R数据分析:样本量计算的底层逻辑与实操,pwr包
样本量问题真的是好多人的老大难,是很多同学科研入门第一个拦路虎,今天给本科同学改大创标书又遇到这个问题,我想想不止是本科生对这个问题不会,很多同学从上研究生到最后脱离科研估计也没能把这个问题弄得很明白 ...
- C#淘汰的知识点
.NET 5+ 中已过时的功能 数组淘汰 .NET Framework 2以上的版本中,ArrayList可以说已经被淘汰了,应该用泛型类中的List<T> https://www.cnb ...
- vmware启动报错:Failed to load SELinux policy. Freezing
修改 : SELINUX=disabled 正确 误修改: SELINUXTYPE=disabled 错误 导致无法开机 错误结果 重启后 机器就报 Failed to load SELi ...
- idea教程--使用mave创建普通java项目
1.点击箭头所示的"Create New Project"选项 2.勾选图示所示的"Create From Archetype"复选框,在下面的下拉选项中我们选 ...
- AtCoder Beginner Contest 242 题解
目录 C - 1111gal password D - ABC Transform E - (∀x∀) F - Black and White Rooks G - Range Pairing Quer ...
- Java:List(二)——List、ArrayList、LinkedList
List 模块:java.util.List 说明 List接口,表明一个序列 用法:List <E> ①直接用List承接一个ArrayList或LinkedList List < ...
- JAVA String、StringBuilder、和StringBuffer的区别,及如何使用
目录 String类 一.String类的理解和创建对象 二.String类创建的方式 两种创建String对象的区别 测试题 三.String常用方法 四.StringBuffer类 1.Strin ...
- JZ-045-扑克牌顺子
扑克牌顺子 题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张_)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的 ...
- PHP Curl Accept-Encoding: gzip乱码问题解决
在使用php curl对接hugegraph的过程中,发现向gremlin发送结果返回乱码,截图如下: 发现返回乱码的乱码请求中有Accept-Encoding: gzip,即返回的内容采用了gzip ...