官方关于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构建框架的使用,遇到富文本框不出现工具栏等操作的更多相关文章

  1. vue集成ckeditor富文本框,怎么获取CKEditor实例?

    CKEDITOR 版本5 ,vue集成形式 vue集成ckeditor富文本框,由于不是通过js创建的富文本对象,所以,无法取得实例对象,官方说明 官方在builds-->Getting and ...

  2. 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例

    http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...

  3. 第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框

    第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...

  4. vue中对element-ui框架中el-table的列的每一项数据进行操作

    vue中使用element table,表格参数格式化formatter 后台返回对应的数字, 那肯定不能直接显示数字,这时候就要对 表格进行数据操作 如图: 代码: methods: { //状态改 ...

  5. mvc ---- ajax 提交 (ckeditor)富文本框 提示潜在危险 Request.Form

    ajax 提交 ckeditor 中的内容怎么提交都提交不了,折腾半天,后来终于找到问题 在你的方法头上加 [HttpPost] [ValidateInput(false)] public Actio ...

  6. 打造个人IP: 开源项目网站构建框架

    前言 您是否正在寻找有关如何创建博客网站: 个人博客 或者 开源项目官网 : Dubbo, Vue.js的构建框架? 在这篇文章我将向您展示如何创建一个美观并且实用的开源博客/开源项目官网构建框架!近 ...

  7. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  8. yii2集成富文本编辑器redactor

    作者:白狼 出处:http://www.manks.top/article/yii2_redactor本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...

  9. 富文本(wangEditor框架)的使用教程

    富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...

随机推荐

  1. Smartbi大数据在金融业的应用案例

    我们平时听说的商业智能其实就是BI分析,它是一种提高企业智能化的手段和工具,既可以满足企业发展的需要,而且也可提高企业竞争力.思迈特软件Smartbi作为数据分析系统,受到了不少金融业客户的青睐.今天 ...

  2. 【C# Task】System.Threading.Channels 生产者和消费者模式

    前言 今天给大家分享一个微软官方的生产者/消费者方案的特性解决:Channel. Channel在% dotnet add package System.Threading.Channels 而在Co ...

  3. XDMCP远程连接Linux桌面

    转至:https://blog.csdn.net/u014008779/article/details/90724651 XDMCP远程连接Linux桌面 1.安装epel源(不安装会找不到light ...

  4. cmd:WIN7操作系统下cmd窗口下的复制粘贴

    1.右击cmd的顶部栏,点开属性 2.在 选项 下,勾选"快速编辑模式" 3.按住鼠标左键标注需要复制的区域 再点击一下右键,则上文的标记区域就已经被复制了,可以通过ctrl+v进 ...

  5. Python:GUI库tkinter(二)

    学习自: Python GUI之tkinter窗口视窗教程大集合(看这篇就够了) - 洪卫 - 博客园 Tkinter简明教程 - 知乎 TkDocs_官方文档 一个Tkinter库较为全面的总结,很 ...

  6. k8s全方位监控-prometheus部署

    1.k8s 监控资源对象 2. prometheus简单介绍. https://github.com/prometheus •多维数据模型:由度量名称和键值对标识的时间序列数据•PromSQL:一种灵 ...

  7. Python第一讲以及计算机基础

    本周课程安排 python基础(五天) 下周课程安排 tableau图形化表制作 下下周课程安排 spss 今日内容概要 计算机发展史 计算机主要硬件 编程与编程语言 python解释器及IDE编辑器 ...

  8. 翻译 | 解读首部 Kubernetes 纪录片

    引言 Honeypot.io 自诩为欧洲最大的技术人才招聘平台,同时提供开发者视频网站,又被称其为 "开发者的 Netflix".2022 年 1 月,该公司与 Red Hat.G ...

  9. linux文本编辑工具

    文本编辑工具VIM vim 主要有三种工作模式,分别是命令模式.插入模式和编辑模式,输入 vim 文件名 我们可以进入命令模式,输入字符 i或者a或者o我们可以进入插入模式,进入插入模式之后我们可以进 ...

  10. RxJS中高阶操作符的全面讲解:switchMap,mergeMap,concatMap,exhaustMap

    RxJS中高阶映射操作符的全面讲解:switchMap, mergeMap, concatMap (and exhaustMap) 原文链接:https://blog.angular-universi ...