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把版权信息插入到了编辑器中。更具体的细节有兴趣请自己读源码，我也没有在仔细看。

*在声明一下，请支持正版，上面分析过程仅供学习使用！

Froala Editor 2.8.1破解过程

猜你喜欢