Froala Editor 2.8.1破解过程
岳京
这个编辑器功能很强大，文档也很规范，但会有版权问题，下面破解过程仅供个人学习使用，请购买正版版权。
以froala_editor.pkgd.min.js这个文件为例，版本是2.8.1，去官网自己下载。用sublime text的JsFormat插件格式化以后一共大概13309行代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<title>Froala Editor Examples</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<style>
.fr-wrapper > div[style*='z-index: 9999'] {
/*position: absolute;
top: -10000px;
opacity: 0;*/
display: none;
}
</style>
</head>
<body>
<section>
<h1>Froala Editor Examples</h1>
<textarea style="height: 500px"></textarea>
</section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/froala_editor.pkgd.min.js"></script>
<script>
$(function() {
$('textarea').froalaEditor()
});
</script>
</body>方法1：
如果我们直接用css的display:none去隐藏它的版权信息，会出现问题，就是你操作10次之后，编辑器会自动换成一个textarea。所以，我们可以不用display:none去隐藏，而换成position: absolute;top: -10000px;opacity: 0;用上面这组css是可以的，但是需要自己调试一下输入内容的css去补上面的空白空间。
方法2：
就用display:none去隐藏，然后去改代码，只需改一个字符即可。用编辑器搜索var c = new Image，然后会看到下面
!0 === f.ul
只需把===改成!==就好了。
至于还有没有其他限制，暂时不知道，反正上面使用10次变成textarea的限制是没了。
===========================
下面简单说一下原理：
_init: function() {
var e = f.o_win.FEK;
try {
e = e || localStorage && localStorage.FEK
} catch (E) {}
e = f.opts.key || e || [""];
var t = v(h("ziRA1E3B9pA5B-11D-11xg1A3ZB5D1D4B-11ED2EG2pdeoC1clIH4wB-22yQD5uF4YE3E3A9=="));
"string" == typeof e && (e = [e]);
for (var n, r, i, a = !(f.ul = !0), o = 0, s = 0; s < e.length; s++) {
var l = (r = e[s], 3 === (i = (v(r) || "").split("|")).length ? i : [null, null, v(r) || ""]),
d = l[2];
if (d === v(h(v("mcVRDoB1BGILD7YFe1BTXBA7B6=="))) || 0 <= d.indexOf(u, d.length - u.length) || C(u)) {
if (!(null === (n = l[1]) || new Date(n) < new Date(v("OB1F1A4D3I1A15A11D3E6B5=="))) || C(u)) {
f.ul = !1;
break
}
a = !0, p = "RCZB17botVG4A-8yzia1C4A5DG3CD2cFB4qflmCE4I2FB1SC7F6PE4WE3RD6e2A4c1D3d1E2E3ehxdGE3CE2IB2LC1HG2LE1QA3QC7B-13cC-9epmkjc1B4e1C4pgjgvkOC5E1eNE1HB2LD2B-13WD5tvabUA5a1A4f1A2G3C2A-21cihKE3FE2DB2cccJE1iC-7G-7tD-17tVD6A-9qC-7QC7a1E4B4je1E3E2G2ecmsAA1xH-8HB11C1D1lgzQA3dTB8od1D4XE3ohb1B4E4D3mbLA10NA7C-21d1genodKC11PD9PE5tA-8UI3ZC5XB5B-11qXF2F-7wtwjAG3NA1IB1OD1HC1RD4QJ4evUF2D5XG2G4XA8pqocH1F3G2J2hcpHC4D1MD4C1MB8PD5klcQD1A8A6e2A3ed1E2A24A7HC5C3qA-9tiA-61dcC3MD1LE1D4SA3A9ZZXSE4g1C3Pa2C5ufbcGI3I2B4skLF2CA1vxB-22wgUC4kdH-8cVB5iwe1A2D3H3G-7DD5JC2ED2OH2JB10D3C2xHE1KA29PB11wdC-11C4cixb2C7a1C4YYE3B2A15uB-21wpCA1MF1NuC-21dyzD6pPG4I-7pmjc1A4yte1F3B-22yvCC3VbC-7qC-22qNE2hC1vH-8zad1RF6WF3DpI-7C8A-16hpf1F3D2ylalB-13BB2lpA-63IB3uOF6D5G4gabC-21UD2A3PH4ZA20B11b2C6ED4A2H3I1A15DB4KD2laC-8LA5B8B7==", o = l[0] || -1
}
}
var c = new Image;
!0 === f.ul && (A(), c.src = a ? h(v(t)) + "e=" + o : h(v(t)) + "u"), !0 === f.ul && f.events.on("contentChanged", function() {
(b(g) || b(m) || T(g) || T(m)) && A()
}), f.events.on("destroy", function() {
g && g.length && g.remove()
}, !0)
}
}上面这段代码是它的初始化函数，我们会看到它首先判断!0===f.ul，如果等的话，会继续执行后面的语句，其中监听了contentChanged事件，就是说你的编辑器每次改变内容都会执行这个回调函数，在回调函数里又执行了(b(g) || b(m) || T(g) || T(m)) && A()这段代码。这段代码最重要的作用就是检查你是否用display:none隐藏了版权信息，以及是否已经操作了10次内容。
function b(e) {
return !(!e || "block" === e.css("display") || (e.remove(), 0))
}
function T(e) {
return e && 0 === f.$box.find(e).length
}
var e = 0;
function A() {
if (10 < e && (f[h(v("0ppecjvc=="))](), setTimeout(function() {
Ee.FE = null
}, 10)), !f.$box) return !1;
f.$wp.prepend(v(h(v(p)))), g = f.$wp.find("> div:first"), m = g.find("> a"), "rtl" == f.opts.direction && g.css("left", "auto").css("right", 0).attr("direction", "rtl"), e++
}b函数和T函数就不用说了吧，检查版权信息的div样式，在A函数里面可以明显的看到10 < e，用来判断操作次数，然后用prepend把版权信息插入到了编辑器中。更具体的细节有兴趣请自己读源码，我也没有在仔细看。
*在声明一下，请支持正版，上面分析过程仅供学习使用！
类似资料：