ckeditor5 图片不能编辑 图片不失去焦点 ckeditor5图片bug ckeditor5遇到的坑 ckeditor列表不管用

本文主要是介绍ckeditor5 图片不能编辑 图片不失去焦点 ckeditor5图片bug ckeditor5遇到的坑 ckeditor列表不管用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

遇到的问题

首先声明一下,我面临的问题,以及我所处的环境:当前项目是后台管理系统项目,
主要用的是vue、iview、ckeditor5等。新建demo中ckeditor5运行完好,
功能都很棒,可是!搬到项目中,竟然出现很多bug,主要问题有以下几个:
1、上传图片问题:图片上传后不会出现编辑图片的按钮,一直处于聚焦状态;
2、第一个问题解决后,又发现……,图片可编辑了,但是!!!如果当前编辑器内容为空的话,直接插入图片,图片可变大小位置,可是一直处于聚焦状态,如果直接输入文字,则图片消失,最关键的是官方的demo也是如此,真是让人头秃!
3、最后还有一个小小的问题就是添加有序列表和无序列表的问题!(小我也解决了几个小时,看来智商是不够用了)

解决办法

1、第一个问题:
经过我傻傻的试了半天,终于的,找到了一个自己不能解释的解决办法,尴尬,但是管用!就是我发现如果不把编辑器组件代码ckeditor标签包含在iview的组件标签内,这个问题就不存在了!!!! 直接包含在h5标签内比如div内部,但绝对不能放在Menu等iviewUI框架标签内!如下图:

在这里插入图片描述
2、第二个问题:
说多了都是泪,直接给官方提了issues, 给的回复:
Hello, you should create a new paragraph if you want to continue editing. You can achieve it by pressing Enter while an image is focused to insert a paragraph after the image or Shift + Enter to insert a paragraph before the image.
译文:你好,如果你想继续编辑,你应该创建一个新的段落。您可以通过按Enter键来实现这一点,当图像被聚焦时,您可以在图像之后插入一个段落,或者按Shift + Enter键在图像之前插入一个段落。

3、第三个问题
因为iview.css清除了ul li ol 的margin和padding,你的base样式可能有list-style:none,记得去掉!!

直接修改下iview dist目录下 iview.css中的清除所有标签的magin和padding,把ul li ol去掉即可

博主不才,只能用这种愚笨的方法解决,如有高见,欢迎指教;-)

这篇关于ckeditor5 图片不能编辑 图片不失去焦点 ckeditor5图片bug ckeditor5遇到的坑 ckeditor列表不管用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/825037

相关文章

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片,如艺术画作、设计素材、报告图表等,提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

Python中DataFrame转列表的最全指南

《Python中DataFrame转列表的最全指南》在Python数据分析中,Pandas的DataFrame是最常用的数据结构之一,本文将为你详解5种主流DataFrame转换为列表的方法,大家可以... 目录引言一、基础转换方法解析1. tolist()直接转换法2. values.tolist()矩阵

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

python展开嵌套列表的多种方法

《python展开嵌套列表的多种方法》本文主要介绍了python展开嵌套列表的多种方法,包括for循环、列表推导式和sum函数三种方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、嵌套列表格式二、嵌套列表展开方法(一)for循环(1)for循环+append()(2)for循环+pyPhWiFd

Jackson库进行JSON 序列化时遇到了无限递归(Infinite Recursion)的问题及解决方案

《Jackson库进行JSON序列化时遇到了无限递归(InfiniteRecursion)的问题及解决方案》使用Jackson库进行JSON序列化时遇到了无限递归(InfiniteRecursi... 目录解决方案‌1. 使用 @jsonIgnore 忽略一个方向的引用2. 使用 @JsonManagedR

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现