froala富文本编辑器的使用

74 阅读 0 评论 49 点赞

我是靠谱客的博主正直饼干，最近开发中收集的这篇文章主要介绍froala富文本编辑器的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

froala富文本编辑器是一款超好用的编辑器，之前使用的wangeditor，但同一行无法插入多张图片且图片大小无法修改，更换更好用的富文本编辑器，在网上找了很多编辑器，最终选用了 froala ，很强大也很美观，但网上关于froala的文档却很少，使用过程中踩了很多坑，在这里记录下。
1、froala在服务器运行会有样式差异，商用收费；
2、froala的文件接口返回接口是固定的：

{"link":"filepath"}

3、froala全量引用文件：

<link rel="stylesheet" href="/froala/css/froala_editor.pkgd.css">
<link rel="stylesheet" href="/froala/css/dark.css">
<script type="text/javascript" src="/froala/js/froala_editor.pkgd.min.js"></script>
<script type="text/javascript" src="/froala/js/zh_cn.js"></script>

我这边做过路径修改，文件为： froala_editor.pkgd.css、dark.css、froala_editor.pkgd.min.js、zh_cn.js
官网的汉化文件有些翻译有问题，有些没有翻译，需要自己改下，默认英文，zh_cn.js文件不要求汉化可以不引入。
4、获取富文本框内容：
方法一：

editor.events.bindClick($('body'), '#save', function () {
                var fs = editor.html.get();
                editor.events.focus();
            });

方法二：jquery自带的方法

$('#edit .fr-view').html();

5、展示HTML时，样式消失
在需要展示HTML的地方引入样式文件，在展示 html 的元素内加类名 fr-view ；

6、去掉样式差异（将这段代码注释掉，2.8.1版本格式化后大概在1240行左右）

  // var d = new Image;
        // !0 === f.ul && (g(), d.src = o ? "".concat(p(L(t)), "e=").concat(i) : "".concat(p(L(t)), "u")), !0 === f.ul && (f.events.on("contentChanged", function () {
        //     (function e() {
        //         return u(b) || u(E) || h(b) || h(E)
        //     })() && g()
        // }), f.events.on("html.get", function (e) {
        //     return e + L("qD2H-9G3ioD-17qA1tE1B-8qI3A4hA-13C-11E2C1njfldD1E6pg1C-8sC3hfbkcD2G3stC-22gqgB3G2B-7vtoA4nweeD1A31A15B9uC-16A1F5dkykdc1B8dE-11bA3F2D3A9gd1E7F2tlI-8H-7vtxB2A5B2C3B2F2B5A6ldbyC4iqC-22D-17E-13mA3D2dywiB3oxlvfC1H4C2TjqbzlnI3ntB4E3qA2zaqsC6D3pmnkoE3C6D5wvuE3bwifdhB6hch1E4xibD-17dmrC1rG-7pntnF6nB-8F1D2A11C8plrkmF2F3MC-16bocqA2WwA-21ayeA1C4d1isC-22rD-13D6DfjpjtC2E6hB2G2G4A-7D2==")
        // }
        // )), f.events.on("html.set", function () {
        //     var e = f.el.querySelector('[data-f-id="pbf"]');
        //     e && T(e).remove()
        // }), f.events.on("destroy", function () {
        //     b && b.length && b.remove()
        // }, !0)