专栏首页野路子程序员解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题

解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题

关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题。

本文可能会对以下现象得以解决:

  1. 图片上传组件,没有 [上传] 选项卡。
  2. 资源无法加载 [imgupload] ( Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "imgupload" was not found at )
  3. 预览框默认的英文介绍,无法清空。

解决图片上传组件没有[上传]选项卡

遇到图片上传组件无法显示 上传选项卡,通过网络搜寻,遇到很多解决方案。其中一种便是通过编辑 image.js 源文件修改hidden的值为 false 或者 0 将其开放开来。

这个方案是存在问题的,本着去解决问题方向,去尝试了下。上传选项框成功展现出来了,与此同时出现了其他的问题。

即是:

  • 上传选项卡内,所渲染的form表单,并不存在action(目标地址)。
  • 选择图片文件后,点击上传至服务器,并无任何响应事件。

奇怪的是,当配置了 filebrowserImageUploadUrl 和 filebrowserImageBrowseUrl 的配置项,依然是失效状态。

同时通过查看 image.js 代码内容,也没有引用 filebrowserImageUploadUrl 配置项的地方,唯有一处使用了filebrowserImageUploadUrl。

显然这里这个组件本身是不完善的,或者是还有其他依赖组件并没有加载出来。

后来通过对比官方demo,官方demo是正常加载的,而我自己配置的却出现了很多问题。

官方DEMO https://sdk.ckeditor.com/samples/image.html

即便是我将我的配置基本上和官方配置一致(排除掉我不需要的组件),也会出现同样的问题。

当使用官方demo页引入的CKeditor4.js 时,我自己配置的编辑器一切都恢复正常。通过查看源JS文件,对比得出。

demo中使用的CKeditor4 Standard版本,而我则是采用的最小安装的Basic版本。

对比其加载的组件列表差异有哪些,可通过ckeditor.js文件搜寻  plugins= ,将所得到的值打散为数组列表。

发现一项很可疑的组件,并将其恢复到我的自定义包中,图片编辑器恢复正常,上传功能即可用。

即:filebrowser

官网介绍:https://ckeditor.com/cke4/addon/filebrowser

解决方案:安装filebrowser

最小化安装是不包含这项组件,只要将其打包加入即可,而不需要修改任何文件,最终在初始化组件时配置上 filebrowserImageUploadUrl 项即可。

解决imgupload组件报错问题

这个问题一搜都有很多的解决方案,原因就是这个文件本身不是作为一个插件使用的,只是作为一个demo演示服务端上传文件时的执行过程,以及给前端的反馈。

解决方案:修改ckeditor.js,将imgupload排除在外即可。

解决预览框默认的英文介绍无法清空。

关于初始化时的配置项和config.js配置项,一般情况下不存在优先级问题,config.js默认是没有关于这项配置的覆盖操作。

往往出现的问题是配置项为空,就会被当做无效配置。

解决方法:将空文本置换为几个空格即可。

如:

CKEDITOR.replace('editor', {
    "image_previewText":' ',
});

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 记录一次乌云漏洞裤搭建过程

    Eller
  • jjencode|JS混淆手工解析编码过程以及自定义混淆变体改装

    此前发布过关于aaencode的混淆编码,此篇文章继续说同作者的jjencode混淆编码的具体过程。

    Eller
  • 最近写了一个博客程序: QuickBlog PHP 开源的一文多发系统

    在开始之前也用到了一些其他类似的系统,区别大概就是非开源的商业化产品不安全,无法进行自我数据存储管理。开源的产品部署起来总有一些问题或者有很多自己想实现的点没有...

    Eller
  • nodejs的session管理

    在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下)。因此,在需要保存用户...

    无邪Z
  • Android卡顿优化 | ANR分析与实战(附ANR-WatchDog源码分析及实战、与AndroidPerformanceMonitor的区别)

    运行程序,等到程序ANR或崩溃, 在Terminal使用刚刚提到的命令,导出ANR的信息文件:

    凌川江雪
  • 分布式如何实现session共享

    原文:https://blog.csdn.net/sxiaobei/article/details/57086489?utm_source=copy

    良月柒
  • Shiro 集成 Spring 之会话管理

    Shiro 提供了完整的会话管理功能,可以在不依赖底层容器,不仅可以在 WEB 环境下使用 Session,还可以在 JavaSE 环境下使用,且提供了会话管理...

    一份执着✘
  • Bugly即将支持的ANR,精神哥告诉你是个什么鬼?

    上帝说要有ANR,于是Bugly就有了ANR上报,那么ANR到底是什么? 最近很多童鞋问起精神哥ANR的问题,那么这次就来聊一下,鸡爪怎么泡才好吃...

    腾讯Bugly
  • Flask session的默认将数据存储在cookie中的方式

    一般服务的session数据是在cookie处存储session的id号,然后通过id号到后端中查询session的具体数据。 为了安全,一般session数...

    Devops海洋的渔夫
  • 交互神器-最好用的Mac原型设计工具

    市场上有着大量的开发和设计工具支持在Mac上安装使用,今天给大家强烈推荐一款Mac上的原型设计工具-Mockplus,原型工具在产品开发设计中是必不可少的,无论...

    奔跑的小鹿

扫码关注云+社区

领取腾讯云代金券