angular-froala-wysiwyg 富文本编辑器使用及遇到的坑

介绍：

angular-froala-wysiwyg： froala editor 的angular版本，支持Angular 2, Angular 4, Angular 5, Angular 6 and Angular 7，具体细节我就很少作介绍，具体参考：

插件仓库：https://github.com/froala/angular-froala-wysiwyg

文档api： https://www.froala.com/wysiwyg-editor/docs

以前找了不少富文本编辑器，最后选择用这个的缘由：

第一，它真的很漂亮，界面简洁耐看，不信你看：

还支持中文，全部工具参数都是可选的，你须要什么样的配置为所欲为；

第二，它的api文档真的很丰富，并且方便查阅，不信你看：

每一个参数都有解释，很容易理解

使用：

具体的使用规则我就很少作解释了，跟着GitHub里面的介绍一步一步的配置，基本上没问题的，这里只讲几个点：

编辑器使用：

<div [froalaEditor]='options' [(froalaModel)]="editorContent" (froalaModelChange)="froalaChange($event)"></div>

froalaEditor: 编辑器配置

froalaModel：编辑器双向绑定的值

froalaModelChange： 监听编辑器内容变化

经常使用的基本上就这3个

查看编辑器：

<div [froalaEditor]='options' [froalaView]="editorContent"></div>

froalaView： 编辑器显示详情内容

这里的配置实际上是可配可不配的，由于查看编辑器的详情是不显示头部的工具栏的

使用的部分大概就是这些了，通常能正常配置完成，就可使用了

遇到的坑及解决方案

其实这篇博客的重头大戏在这里，若是你在使用的过程当中也碰到了相同的问题，恭喜你，你颇有可能可以获得解决方案，我看了一下，网上这样的解决方法要么没有，要么就是太分散，很差找，官方也不给你解决！

坑坑一：

图片，视频等的上传问题：带tonken等须要校验的接口没办法上传

官方提供的方法是一个封装好的方案，提供了一些上传参数：imageUploadURL、imageUploadMethod、imageAllowedTypes、imageUploadParams等，这些只是添加接口地址，请求方式，可是却没有地方设置请求头，若是须要在请求头里面添加token怎么办呢？

图片最大上传大小为10M，若是上传的图片超过10M，编辑器的反应是什么反应都没有，惊喜不惊喜，意外不意外，那这种现象怎么杜绝呢？

解决方案：

想要在请求头加token貌似是作不到的，除非你去改源码，固然这是不推荐的，个人解决方案是这样，仅提供一种思路，将须要的token变成query参数，而后让后端去转一次，（后端：先请求的token，而后再后端再去作token对比，若是后端不肯意，那你就去求求他吧）

imageUploadURL:  '/ImgUpload?token=' + this.localToken

图片过大或者图片上传错误，一种是设置一个比较大的大小，好比设置最大20M，应该够用了：

imageMaxSize: 1024 * 1024 * 20

二是设置图片上传回调：

events: {
      // 图片上传回调
      'froalaEditor.image.uploaded': (e, editor, res) => {
        const response = JSON.parse(res);
        this.eventsService.emitMessageEvent(response.State == 1 ? this.eventsService.eventNames.EVENT_TOAST_SUCCESS : this.eventsService.eventNames.EVENT_TOAST_ERROR, response.Message);
      }
    },

成功失败均可以给他一个提示，交互可能会更好一点！

 

坑坑二：

正式上线的编辑器会提示缺乏licence，一行红色显示在最顶上，很显眼：

这么显眼的东西，是否是看着都烦，可是审查元素能够看到，编辑器都是html构成的，并且这还红色的也是标签，那就好办了，有2种结局方案：

一、全局设置display: none;

a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"] {
  display: none;
 }

彷佛这样写可以去掉这个红条，运行也没问题，绝大部分都会想到这个，别觉得万事大吉了，这样写给后面挖了一个巨大的坑，害苦了我，这里先卖个关子，后面着重介绍

二、全局设置定位

a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"] {
  position: absolute;
  top: -99999999px;
  opacity: 0;
 }

给个透明度为0是给个双保险，这个是能够的，最终的方案能够采用这个

 

坑坑三：

当全局设置编辑器licence红条样式为display:none,会引起报错：

TypeError: Cannot read property 'VOID_ELEMENTS' of null

若是有惊喜的话，还会引起别的错误，可是这个错误是绝对有的，若是你不知道是由于设置了display:none引起的，这样的错误绝对是致命的，由于你根本查找不出问题到底在哪里，我也是查找了各类可能，终于找到问题所在，源码里面有一行的意思是，若是隐藏掉版权信息，用户只能操做10次，超过10次，则编辑器会不生效，致使系统会报错，并且是致命错误，页面会卡死。

解决方案：

参考坑二的第二种方式

 

坑坑四：

编辑器编辑自定义的合同模板，并插入后台自定义的数据：

这里是合同内容，须要甲方： {{user}}

最后打印合同获得的结果：

这里是合同内容，须要甲方： 甲方爸爸

这就有点意思了，由于编辑器最终获得的是一段html的字符串，如何让angular去解析咱们设置的参数，这是一个难点！

首先要解决的是如何将参数引入到须要的地方去，好比，甲方那里这么客户使用的话，怎么知道要用user，而不是其余的，若是参数一多，别说是小白客户了，就算是程序猿本身也会有点蒙！

其次，怎么样让参数到编辑器里面去，不可能让客户去打{{ }}，而后再加对应的字段，这是反客户的操做

解决方案：

 

让参数到编辑里面去，咱们用到了几个事件：

events : {
      'froalaEditor.initialized': (e, editor) => {
        this.editor = editor;
      },
      // 添加事件，在每次按键按下时，都记录一下最后停留位置
      'froalaEditor.keyup': (e, editor, keyupEvent) => {
        this.lastEditRange = getSelection().getRangeAt(0);
      },
      // 添加事件，在每次鼠标点击时，都记录一下最后停留位置
      'froalaEditor.click': (e, editor, clickEvent) => {
        this.lastEditRange = getSelection().getRangeAt(0);
      }
    },

一个初始化，一个监听键盘事件，一个监听鼠标事件，而后存储最后停了的位置，由于在点击添加字段的时候，鼠标是离开了编辑器的，那添加字段添加到哪里去，这里就是去处所在了，这么说应该懂吧！

而后给须要的地方添加字段：

// 添加字段到编辑器
  add(string){
    this.editor.html.insert('<span class="red" style="font-size: 12px; font-weight: bold;">{{' + string + '}}</span>&nbsp&nbsp');
  }

this.editor.html.insert这个是编辑器提供的方法，自行查阅，这就很好理解了吧，想在哪里添加就在哪里添加

 解析问题解决方案，也只能提供一种思路，由于这个不是程序猿来操做的，全部操做的简单性就必需要考虑了，我如今用的是全部须要的字段用中文显示，添加也用中文，这样的话，客户就很容易知道他在某个地方添加的是什么，而后最终获得的html字符串用js各类去解析，这里也提供2种思路：

一、经过split将字符串中的中文关键字分离出来，而后替换成对应的字段名称，而后渲染到页面解析，或者直接替换成真实数据，而后渲染

二、后端提供对应的中文数据，而后根据对应的值把真实值替换上去，而后渲染，这就要你跟后台沟通了

 

总结：

插件的有点缺乏很突出，api也很详细，我以为惟一一个须要吐槽的就是没有免费版的，并且出险问题官方不会跟你解决，欢迎你们跟我交流，若是你遇到我没遇到的坑，欢迎留下评论，咱们一块儿探讨学习！

原创不易,如需转载,请注明出处,谢谢!