Froala编辑器使用经历
Froala编辑器使用经历（版本2.8.5）
写在前面
若非必要，尽量不要修改源码，如果一定要修改，最好做好记录，否则未来升级的时候会很痛苦
碰到的问题
不可使用i标签
编辑器会将 i 标签替换为em，因为这俩都代表的是斜体，但是当使用i标签作为样式的修改点时，就会出现问题，需要做相应的修改，否则会出现样式差异
如果非使用i标签不可，需要修改froala_editor.min.js以及froala_editor.pkgd.min.js（如果两个都引入使用了的话），搜索HTML5Map，搜索得到以下代码：
be.FE.HTML5Map = { B: "STRONG", I: "EM", STRIKE: "S" },将I: "EM",注释即可反之，如果想要禁止在编辑器中出现某些标签，则可以在此处添加替换，比如不需要
p标签，想要将其替换为span，那么就可以在这个地方加上：P: "SPAN"但是有一点比较尴尬的是，不是每一个应用场景下都不需要，如果真这么干了，估计就得拷贝文件了，但是这样做有点不靠谱，看下有没有什么好的方法可以在初始化编辑器的时候动态修改。
setTimeout和自定义按钮
场景：如果将编辑器放入一个模态框（或者是一个使用时才临时加载的地方），当模态框打开时，我们做编辑器的初始化动作。但是有时候DOM元素未全部加载完成（尤其是编辑器容器未初始化完成时），编辑器是无法进行初始化的，这种情况下，我习惯性的在初始化之前判断容器元素是否存在，如果不存在，则使用setTimeout延时执行初始化。这种操作下，可以保证编辑器可以初始化成功，但是后面发现一个问题，那就是自定义的按钮未加载出来（或者就是未创建成功）。
将注册按钮写在初始化编辑器之前
initialized未触发
场景：编辑器已初始化（或者说已经可以在页面中看到编辑器了），但是监听的
initialized并未生效，官网写法如下：
$('.selector').on('froalaEditor.initialized', function (e, editor) { // Do something here. });这里需要注意一个顺序问题，
initialized的绑定应该在初始化编辑器器之前：
function init_edit(){$('.selector').on('froalaEditor.initialized', function (e, editor) {console.log("初始化完成");})$('.selector').froalaEditor({}) ;
}
注：这种需要注意顺序的情况，出现在从一个函数中进行编辑器的初始化（自己选择编辑器初始化的节点），如果是在页面加载完成后就直接初始化编辑器，那么不会出现这个问题。
//可以正常捕获initialized
<script>$('.selector').froalaEditor({}) ;$('.selector').on('froalaEditor.initialized', function (e, editor) {console.log("初始化完成");})
</script>
但是仍然建议将初始化的回调函数写到编辑器初始化之前
图标后跟文字
只需要图标时这样写没有问题
<i class="fa fa-clock-o" aria-hidden="true"></i>但是如果需要在图标后跟文字的话
<i class="fa fa-clock-o" aria-hidden="true">测试文字</i>则需要设置宽度自适应：
/*工具栏按钮宽度自适应*/
.fr-toolbar .fr-command.fr-btn{width: auto !important;
}/*图标宽度自适应*/
.fr-toolbar .fr-command.fr-btn i{width: auto !important;
}
改变help提示内容
help提示的内容与我们实际使用的会有出入，所以需要修改下：
打开froala_editor.pkgd.min.js，搜索helpSets，做相应的替换即可
修改默认的快捷键
现象：使用Ctrl+s时，召唤出的是删除线
需求：使用Ctrl+s时执行自己的方法（如保存内容）
实现：找到绑定快剪辑的位置所在：打开froala_editor.pkgd.min.js，搜索内容：
be.FE.RegisterShortcut，找到下图代码：
表格相关
阻止表格插件中表格的按键响应
比如实现这样的功能：单击一个单元格的时候，不弹出相关操作。
如果是在编辑器中对按键消息进行监听，可以捕捉到，但是就算在这个地方屏蔽了，还是会有弹出框，因为弹出框这个操作在编辑器获得按键消息前已经执行完成了，所以必须要在之前就将想要屏蔽的消息屏蔽掉才行。
打开table.min.js，搜索代码keydown，在下方执行想要的操作即可。如果要在这里获取页面中其它元素的css属性，不可使用jq进行操作，需要使用js，获取css属性可参考以下语句：
computedStyle = document.defaultView.getComputedStyle(select_item, null)
在创建表格的时候给表格添加属性
场景： 在前端创建了表格之后，将html传到后台进行pdf的生成，生成的pdf文件中，表格线不可见，经测试，如果给表格加上border="1"的属性，生成的pdf则是正常的，因此决定在表格创建时，给表格添加border属性
在froala_editor.pkgd.min.js，搜索“table.insert”，然后找到定义在15926行的函数（insert），然后在那边加上需要的属性即可
找不到15926行的insert，可通过浏览器前端js调试跳转到该函数，然后再在js文件中找相对应的函数进行修改
阻止单击表格单元格时弹出表格操作工具条
现象：在鼠标左键单击表格的单元格时，会弹出表格的工具条，如下图：
需求：鼠标左键单击时不弹出工具条，单独对一个单元格进行操作时，使用鼠标右键单击可以唤出工具条，但是对多个单元格操作时，需要自动显示单元格
需求实现：使用鼠标右键单击唤出工具条
1.先阻止浏览器默认的右键操作，使用froala自定义设置中的禁止右键点击：
disableRightClick: true
2.添加鼠标右键响应：
u()方式在table初始化中定义，用于显示工具条，额外添加一个not_right_click参数，是因为之后有一个方法会移除fr-selected-cell，到时需要使用这个参数进行判断***（代码添加位置稍后会进行说明）***左键单击时不弹出工具条
原代码：
I(e) || 1 != Q().length ? 0 < Q().length && (T.selection.isCollapsed() ? u() : L()) : L()可以通过搜索这段代码定位该方法的位置，最初发现这个是在单步调试的环境下，通过调用栈的情况找到的
修改后的代码：
Q().length用来获取已选择的单元格长度，主要在原代码的基础上进行了一个长度的判断，如果大于1才显示工具条，这就实现了单击不显示，而选取多个单元格时还是可以自动弹出工具条
判断事件是否是发生在编辑器内的表格里
在使用遇到一个问题，如果在编辑器的同一页面也有table，那么，点击外部table的事件也会分发到froala内，因为我在之前此处做了处理，当时并没有考虑到同一页面的table也会对被froala监听，导致出现了点小问题。
处理方式：使用
I(e)进行判断，如果是在编辑器内部，则返回td对象，否则会返回null
指定工具栏的渲染位置
搜索MODULES.toolbar
这个插件所做的就是工具栏相关的东西经过调试以及代码阅读，此处应该是做的类似初始化的操作：
我在其中插入了一句代码（见上图），即页面中如果有指定的工具栏渲染位置，那么就将工具栏渲染到该处（如果需要，也可以在append之前先清理掉里面的内容），如果JQuery代码无法执行，那么可以用js来做，也是容易的，此处就不再赘述一开始还担心工具栏和编辑区是否有什么关联，移动了编辑区的位置（从编辑区的上头移动到了其他地方），是否会带来一些bug，庆幸的是经过这段时间的使用，暂时还没发现问题，作者既然将工具栏做成了一个插件，估计也会考虑这种情况的吧。
问题：在编辑器内输入内容后，编辑器相关计算无响应
计算未响应包括但不限于：undo无变化，字数统计无变化、键盘事件无响应（keydown/keyup）等
一开始是怀疑keyup事件被其它js处理且终止，导致编辑器内未接收到相关事件。经过调试，并非如此，最终经过一系列的对比、排查才发现最终的问题
问题原因：
在初始化的div处，我给加了一个 ***
contenteditable="true"***，把这个属性删除之后再初始化编辑器，相关计算恢复正常未去查看源码是在哪个地方做了这种判断，有兴趣的小伙伴可以在这个思路上尝试下
未完待续
如有错误，烦请指出
Froala编辑器使用经历相关推荐
- Froala V4.0.18 Crack Froala 编辑器
Froala V4.0.18:复制和粘贴图像变得更好,还有更多! 2023 年 3 月 25 日 最忠实用户 编辑器,新版本 发表评论 Froala Editor团队很高兴地宣布发布Froala Ed ...
- 所见即所得html5编辑器,一个漂亮的所见即所得(WYSIWYG)富文本编辑器:Froala
本文翻译来自wysiwyg-editor,大家想看原文可以点击此链接. 介绍 WYSIWYG HTML编辑器是一款有史以来最强大的JavaScript富文本编辑器之一.它采用了最新的技术,并利用jQu ...
- JavaScript 所见所得文本编辑器 Froala Editor 4.0.17Crack
Froala Editor v4.0.17 清除格式工具现在可以从粘贴的内容中删除内联样式. 2023 年 1 月 24 日 - 9:07新版本 特征 清除格式工具现在可以从粘贴的内容中删除内联样式. ...
- Froala Editor JavaScript WYSIWYG HTML 编辑器
Froala Editor JavaScript WYSIWYG HTML 多用途.易于使用的 WYSIWYG 编辑器,优雅 每次点击,我们都会让网络编辑变得更简单.更强大.更愉快 安全.快速.智能和 ...
- 毕业论文编辑器软件制作经历与思考2
这一系列的文章主要记录作者在开发下面网站中的毕业论文编辑器的经历以及一些思考. www.biyelunwenbjq.cn 在得知有些学校要求学生一定要提交Word文档的噩耗后,本人条件反射地喊出了&q ...
- android 富文本框架_五种JavaScript富文本编辑器，总有一款适合你
全文共2099字,预计学习时长4分钟 也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商 ...
- 所见即所得编辑器_Froala所见即所得编辑器
所见即所得编辑器 Froala WYSIWYG Editor Froala Editor is a lightweight WYSIWYG rich text editor with a nice f ...
- 五种JavaScript富文本编辑器,总有一款适合你
也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商业机密. 在这样的情况下,如果想知道& ...
- 完美Crack：Froala Editor 4.0.16 Patch
基于 Web 的 JavaScript/HTML WYSIWYG 文本编辑器. Froala Editor 是一个用 JavaScript 编写的轻量级 WYSIWYG HTML 编辑器,可为您的应用 ...
- Froala Editor 插入的表格 页面展示问题 样式消失
在froala编辑器里 显示表格样式如下: 但是获取的html,拿出来显示 样式却丢了 处理方法: 在显示界面 引入 froala_style.min.css文件 绘制html的区域的容器 引用 fr ...
最新文章
- 机器人大潮中暗藏多少伪命题
- 华农软件工程实验报告_华南农业大学15年软件工程复习提纲
- Android使用 LruCache 缓存图片
- 解决php写入mysql乱码问题汇总
- 【Scratch】青少年蓝桥杯_每日一题_2.17_城堡
- skywalking链路追踪在微服务架构中的使用
- Spring 的优点
- Java 实现 淘宝秒杀 聚划算 自己主动提醒 源代码
- vba 跳到下一个循环_VBA野知识分享：从一个数组中取部分值生成新数组，不使用循环的思路...
- 【Python 必会技巧】使用 split() 方法对字符串进行切片
- C++11六大函数（构造函数，移动构造函数，移动赋值操作符，复制构造函数，赋值操作符，析构函数）
- APP自动化测试系列之Appium介绍及运行原理
- linux获取打开串口失败的原因,linux – 从串口读取失败
- 适用于连续资源块的数组空闲链表的算法
- 【李宏毅机器学习】05：概率生成模型Probabilistic Generative Model
- 在matlab中产生dsp程序学习
- android read_phone_state 代码,android - 用户10102和当前进程都没有android.permission.READ_PHONE_STATE - 堆栈内存溢出...
- VLAN的原理及配置
- xml读取出现中文乱码
- 浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!