百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 博客教程 > 正文

富文本编辑器wangEditor迁移CKEditor前后效果对比

connygpt 2024-10-05 14:49 7 浏览

一、背景

富文本编辑器wangEditor的工具栏如图所示

富文本编辑器CKEditor4工具栏如图所示

二、wangEditor编辑器存在问题

1. 字号和字体设置不友好

客服反馈无法快速通过工具栏图标找到设置字号、字体的功能

老版编辑器设置字体(或字号)与许多主流编辑器及Office软件操作有所不同,不支持先设置字体(或字号)再进行输入文字,只能先选中目标文字,再设置字体(或字号)。

2. 无法满足后期功能扩展

2.1 未使用模块化思维组织源代码 全部代码都在一个文件里面。

2.2 没有自己的事件机制 不易控制同一事件不同回调之前的优先级、同类回调函数的取消等,比如扩展粘贴场景时,可能需要避免兼容之前已有的回调。

2.3 没有对编辑器内容的插入过程的控制流程 无法在编辑器setData的过程中对原始数据进行修改、过滤等操作。

三、迁移成新版编辑器CKEditor4的优点

1. 能平稳迁移

CKEditor4天生支持将编辑区域嵌套iframe中,与老版本编辑器改造后效果一致,符合原有项目中的样式隔离要求。

2. 内置插件符合业务场景

有格式刷插件

表格插件支持通过右键菜单调整表格

3. 容易扩展

3.1 内置插件机制 可将不同的业务需求写成独立的插件。

3.2 内置事件机制 能设置事件响应的优先级,控制回调执行顺序,干预和调整默认执行结果。

3.3 通过配置项控制getData和setData 可以通过配置项组合成不同的filter,对编辑器内容和设置的过程进行控制。

四、迁移前后效果对比

1. 支持格式刷

2. 表格粘贴效果更接近复制源样式

复制源

wangEditor编辑器粘贴效果

CKEditor4粘贴效果

3. 支持调整表格

支持对编辑器中的表格进行调整(暂未开放)

4. 支持调整图片排版、拖拽

wangEditor编辑器效果

CKEditor4编辑器效果

相关推荐

自学Python,写一个挨打的游戏代码来初识While循环

自学Python的第11天。旋转~跳跃~,我~闭着眼!学完循环,沐浴着while的光芒,闲来无事和同事一起扯皮,我说:“编程语言好神奇,一个小小的循环,竟然在生活中也可以找到原理和例子”,同事也...

常用的 Python 工具与资源,你知道几个?

最近几年你会发现,越来越多的人开始学习Python,工欲善其事必先利其器,今天纬软小编就跟大家分享一些常用的Python工具与资源,记得收藏哦!不然下次就找不到我了。1、PycharmPychar...

一张思维导图概括Python的基本语法, 一周的学习成果都在里面了

一周总结不知不觉已经自学Python一周的时间了,这一周,从认识Python到安装Python,再到基本语法和基本数据类型,对于小白的我来说无比艰辛的,充满坎坷。最主要的是每天学习时间有限。只...

三日速成python?打工人,小心钱包,别当韭菜

随着人工智能的热度越来越高,许多非计算机专业的同学们也都纷纷投入到学习编程的道路上来。而Python,作为一种相对比较容易上手的语言,也越来越受欢迎。网络上各类网课层出不穷,各式广告令人眼花缭乱。某些...

Python自动化软件测试怎么学?路线和方法都在这里了

Python自动化测试是指使用Python编程语言和相关工具,对软件系统进行自动化测试的过程。学习Python自动化测试需要掌握以下技术:Python编程语言:学习Python自动化测试需要先掌握Py...

Python从放弃到入门:公众号历史文章爬取为例谈快速学习技能

这篇文章不谈江流所专研的营销与运营,而聊一聊技能学习之路,聊一聊Python这门最简单的编程语言该如何学习,我完成的第一个Python项目,将任意公众号的所有历史文章导出成PDF电子书。或许我这个Py...

【黑客必会】python学习计划

阅读Python文档从Python官方网站上下载并阅读Python最新版本的文档(中文版),这是学习Python的最好方式。对于每个新概念和想法,请尝试运行一些代码片段,并检查生成的输出。这将帮助您更...

公布了!2025CDA考试安排

CDA数据分析师报考流程数据分析师是指在不同行业中专门从事行业数据搜集、整理、分析依据数据作出行业研究评估的专业人员CDA证书分为1-3级,中英文双证就业面广,含金量高!!?报考条件:满18...

一文搞懂全排列、组合、子集问题(经典回溯递归)

原创公众号:【bigsai】头条号:程序员bigsai前言Hello,大家好,我是bigsai,longtimenosee!在刷题和面试过程中,我们经常遇到一些排列组合类的问题,而全排列、组合...

「西法带你学算法」一次搞定前缀和

我花了几天时间,从力扣中精选了五道相同思想的题目,来帮助大家解套,如果觉得文章对你有用,记得点赞分享,让我看到你的认可,有动力继续做下去。467.环绕字符串中唯一的子字符串[1](中等)795.区...

平均数的5种方法,你用过几种方法?

平均数,看似很简单的东西,其实里面包含着很多学问。今天,分享5种经常会用到的平均数方法。1.算术平均法用到最多的莫过于算术平均法,考试平均分、平均工资等等,都是用到这个。=AVERAGE(B2:B11...

【干货收藏】如何最简单、通俗地理解决策树分类算法?

决策树(Decisiontree)是基于已知各种情况(特征取值)的基础上,通过构建树型决策结构来进行分析的一种方式,是常用的有监督的分类算法。决策树算法是机器学习中的一种经典算法,它通过一系列的规则...

面试必备:回溯算法详解

我们刷leetcode的时候,经常会遇到回溯算法类型题目。回溯算法是五大基本算法之一,一般大厂也喜欢问。今天跟大家一起来学习回溯算法的套路,文章如果有不正确的地方,欢迎大家指出哈,感谢感谢~什么是回溯...

「机器学习」决策树——ID3、C4.5、CART(非常详细)

决策树是一个非常常见并且优秀的机器学习算法,它易于理解、可解释性强,其可作为分类算法,也可用于回归模型。本文将分三篇介绍决策树,第一篇介绍基本树(包括ID3、C4.5、CART),第二篇介绍Ran...

大话AI算法: 决策树

所谓的决策树算法,通俗的说就是建立一个树形的结构,通过这个结构去一层一层的筛选判断问题是否好坏的算法。比如判断一个西瓜是否好瓜,有20条西瓜的样本提供给你,让你根据这20条(通过机器学习)建立起...