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"***，把这个属性删除之后再初始化编辑器，相关计算恢复正常

未去查看源码是在哪个地方做了这种判断，有兴趣的小伙伴可以在这个思路上尝试下

未完待续

如有错误，烦请指出