ZzQuickPreview - Mở chức năng xem trước nhanh không chuyển trang

Thông điệp [Trang 1 trong tổng số 1 trang]

1 ZzQuickPreview - Mở chức năng xem trước nhanh không chuyển trang 13/12/2014, 3:49 pm

KHCN

Thành viên xuất sắc

Bài viết : 613
Uy tín : 35
Tham gia : 24/04/2012
Phương châm : Con người là số 1

ZzQuickPreview phiên bản OldEditor giúp bạn mở chức năng xem trước khi trả lời nhanh, không bị chuyển trang.

Sử dụng javascript chuyển đổi BBcode sang HTML nên có thể đáp ứng hiển thị gần như ngay lập tức. Đây cũng chính là ưu điểm lớn nhất của ZzQuickPreviewso với những chức năng tương tự khác hiện có.

Ngoài ra, bạn cũng có thể chọn chế độ tải xem trước kiểu thông dụng.[/size]

ZzQuickPreview - Mở chức năng xem trước nhanh không chuyển trang 0ndZjA5

Giao diện ZzQuickPreview OldEditor

Hướng dẫn

Bước 1: Thêm vào CSS

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet:

Code:: /* Zzpreview by devs.forumvi.com */ #Zzpreview{position:fixed;top:0;left:0;bottom:0;right:0;z-index:30000;display:none;background:rgba(0, 0, 0, 0.7)} #Zzpreview_post{width:700px;min-height:300px;max-height:500px;overflow:auto;background:#FFF;border:3px solid #333;margin:0 auto;padding:10px 20px} #Zzpreview > p.h2{color:#BDBDBD;height:40px;line-height:40px;background:#111;border-bottom:3px solid #0085FF;margin-bottom:30px;text-align:right} #Zzpreview .Zzpreview_title{font-weight:700;display:block;background:#0085FF;color:#FFF;font-size:1.23em;margin:0 10px;padding:0 15px} #Zzpreview > div.center > input.Zzpreview_button{border:1px solid;height:34px!important;line-height:32px;margin:10px;padding:0 15px!important} #Zzpreview .Zzpreview_close{display:block;height:40px;background:url(http://i.imgur.com/iHYRssG.png) no-repeat center center transparent;width:40px;text-indent:9999px;position:absolute;right:0;top:0} #Zzpreview .Zzpreview_close:hover{background-color:#EC4545} .Zzpreview_get label:hover{color:#FFFFFF;cursor:pointer} #Zzpreview_post ol,#Zzpreview_post ul{margin-left:30px}

Bước 2: Tạo file javascript mới

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript

Không check vào mục Placement.

Code:: var bbcodeParser = {}; (function () { function d(c, b) { return (c + "").replace(RegExp("[.\\\\+*?\\[\\^\\]$(){}=!<>|:\" + (b || "") + "-]", "g"), "\\$&") } var f = /{[A-Z_]+[0-9]*}/g; bbcodeParser.tokens = { URL: "((?:(?:[a-z][a-z\\d+\\-.]*:\\/{2}(?:(?:[a-z0-9\\-._~\\!$&'*+,;=:@|]+|%[\\dA-F]{2})+|[0-9.]+|\\[[a-z0-9.]+:[a-z0-9.]+:[a-z0-9.:]+\\])(?::\\d*)?(?:\\/(?:[a-z0-9\\-._~\\!$&'*+,;=:@|]+|%[\\dA-F]{2})*)*(?:\\?(?:[a-z0-9\\-._~\\!$&'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?(?:#(?:[a-z0-9\\-._~\\!$&'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?)|(?:www\\.(?:[a-z0-9\\-._~\\!$&'*+,;=:@|]+|%[\\dA-F]{2})+(?::\\d*)?(?:\\/(?:[a-z0-9\\-._~\\!$&'*+,;=:@|]+|%[\\dA-F]{2})*)*(?:\\?(?:[a-z0-9\\-._~\\!$&'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?(?:#(?:[a-z0-9\\-._~\\!$&'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?)))", LOCAL_URL: "((?:[a-z0-9-._~!$&'()*+,;=:@|]+|%[dA-F]{2})*(?:/(?:[a-z0-9-._~!$&'()*+,;=:@|]+|%[dA-F]{2})*)*(?:?(?:[a-z0-9-._~!$&'()*+,;=:@/?|]+|%[dA-F]{2})*)?(?:#(?:[a-z0-9-._~!$&'()*+,;=:@/?|]+|%[dA-F]{2})*)?)", EMAIL: "((?:[\\w!#$%&'*+-/=?^`{|}~]+.)*(?:[\\w!#$%'*+-/=?^`{|}~]|&)+@(?:(?:(?:(?:(?:[a-z0-9]{1}[a-z0-9-]{0,62}[a-z0-9]{1})|[a-z]).)+[a-z]{2,6})|(?:\\d{1,3}.){3}\\d{1,3}(?::\\d{1,5})?))", TEXT: "([\\s\\S]*?)", SIMPLETEXT: "([a-zA-Z0-9-+.,_ ]+)", INTTEXT: "([a-zA-Z0-9-+,_. ]+)", IDENTIFIER: "([a-zA-Z0-9-_]+)", COLOR: "([a-z]+|#[0-9abcdef]+)", NUMBER: "([0-9]+)" }; bbcodeParser.bbcode_matches = []; bbcodeParser.html_tpls = []; bbcodeParser.html_matches = []; bbcodeParser.bbcode_tpls = []; bbcodeParser._getRegEx = function (c) { var b = c.match(f), e = 0, a = ""; if (0 >= b.length) return RegExp(d(c), "g"); for (; e < b.length; e += 1) { var h = b[e].replace(/[{}0-9]/g, ""); bbcodeParser.tokens[h] && (a += d(c.substr(0, c.indexOf(b[e]))) + bbcodeParser.tokens[h], c = c.substr(c.indexOf(b[e]) + b[e].length)) } a += d(c); return RegExp(a, "gi") }; bbcodeParser._getTpls = function (c) { var b = c.match(f), e = 0, a = "", d = {}, k = 0; if (0 >= b.length) return c; for (; e < b.length; e += 1) { var l = b[e].replace(/[{}0-9]/g, ""), g; d[b[e]] ? g = d[b[e]] : (g = k += 1, d[b[e]] = g); bbcodeParser.tokens[l] && (a += c.substr(0, c.indexOf(b[e])) + "$" + g, c = c.substr(c.indexOf(b[e]) + b[e].length)) } return a + c }; bbcodeParser.addBBCode = function (c, b) { bbcodeParser.bbcode_matches.push(bbcodeParser._getRegEx(c)); bbcodeParser.html_tpls.push(bbcodeParser._getTpls(b)); bbcodeParser.html_matches.push(bbcodeParser._getRegEx(b)); bbcodeParser.bbcode_tpls.push(bbcodeParser._getTpls(c)) }; bbcodeParser.bbcodeToHtml = function (c) { for (var b = 0; b < bbcodeParser.bbcode_matches.length; b += 1) c = c.replace(bbcodeParser.bbcode_matches[b], bbcodeParser.html_tpls[b]); return c }; bbcodeParser.htmlToBBCode = function (c) { for (var b = 0; b < bbcodeParser.html_matches.length; b += 1) c = c.replace(bbcodeParser.html_matches[b], bbcodeParser.bbcode_tpls[b]); return c } })(); (function (d) { function f(e) { return e = e.replace(b, function (a) { var b = c[a]; return '<img class="smiley_FB" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="' + a.replace(/"/, """) + '" style="background-position:' + b + '" />' }) } var c = {}, b = RegExp((/\bO:\)\B|\bo\.O\b|\bO\.o\b|\b8\|\B|\b8\)\B|\b3:\)\B|\B($y$\B|\B:3\b|\B:\'$\B|\B:\(\B|\B:O\b|\B:D\b|\B>:\(\B|\B<3\b|\B\^_\^\B|\B:\*\B|\B:v\b|\B<\("$\B|\B:poop:\B|\B:putnam:\B|\B$\^\^\^$\B|\B:\)\B|\B-_-\B|\B:P\b|\B:\/\B|\B>:O\b|\B;\)\B|\B:\|\]\B)/ + /\B:fb([0-9]|[1-9][0-9]|1[0-9][0-9]|20[0-9]):\B/).replace("//", "|").replace(/^\/|\/$/g, ""), "g"); (function () { for (var b = 0, a, d = 0; 239 > d; d++) { switch (d) { case 210: a = "o.O"; break; case 211: a = "O.o"; break; case 212: a = ":'("; break; case 213: a = "3:)"; break; case 214: a = ":("; break; case 215: a = ":O"; break; case 216: a = "8)"; break; case 217: a = ":D"; break; case 218: a = ">:("; break; case 219: a = "<3"; break; case 220: a = "^_^"; break; case 221: a = ":*"; break; case 222: a = ":v"; break; case 223: a = '<(")'; break; case 224: a = ":poop:"; break; case 225: a = ":putnam:"; break; case 226: a = "(^^^)"; break; case 227: a = ":)"; break; case 228: a = "-_-"; break; case 229: a = "8|"; break; case 230: a = ":P"; break; case 231: a = ":/"; break; case 232: a = ">:O"; break; case 233: a = ";)"; break; case 234: a = "(y)"; break; case 235: a = ":3"; break; case 236: a = ":|]"; break; case 237: a = "O:)"; break; default: a = ":fb" + d + ":" } b -= 17; c[a] = "0 " + b + "px" } })(); d._zzEmoFb = function () { d("#Zzpreview_post").html(function (b, a) { return f(a) }); d("#Zzpreview_post code .smiley_FB").replaceWith(function () { return this.alt }) } })(jQuery); bbcodeParser.addBBCode("[b]{TEXT}[/b]", "<strong>{TEXT}</strong>"); bbcodeParser.addBBCode("[i]{TEXT}[/i]", "<i>{TEXT}</i>"); bbcodeParser.addBBCode("[u]{TEXT}[/u]", "<u>{TEXT}</u>"); bbcodeParser.addBBCode("[strike]{TEXT}[/strike]", "<strike>{TEXT}</strike>"); bbcodeParser.addBBCode("[left]{TEXT}[/left]", '<div align="left">{TEXT}</div>'); bbcodeParser.addBBCode("[right]{TEXT}[/right]", '<div align="right">{TEXT}</div>'); bbcodeParser.addBBCode("[center]{TEXT}[/center]", '<div align="center">{TEXT}</div>'); bbcodeParser.addBBCode("[justify]{TEXT}[/justify]", '<div align="justify">{TEXT}</div>'); bbcodeParser.addBBCode("[size={NUMBER}]{TEXT}[/size]", '<span style="font-size: {NUMBER}px; line-height: normal">{TEXT}</span>'); bbcodeParser.addBBCode("[color={COLOR}]{TEXT}[/color]", '<font color="{COLOR}">{TEXT}</font>'); bbcodeParser.addBBCode("[font={SIMPLETEXT}]{TEXT}[/font]", '<font face="{SIMPLETEXT}">{TEXT}</font>'); bbcodeParser.addBBCode("[list]{TEXT}[/list]", "<ul>{TEXT}</ul>"); bbcodeParser.addBBCode("[list={IDENTIFIER}]{TEXT}[/list]", '<ol type="{IDENTIFIER}">{TEXT}</ol>'); bbcodeParser.addBBCode("[*]{TEXT}", "<li>{TEXT}"); bbcodeParser.addBBCode("[hr]{TEXT}", "<hr />{TEXT}"); bbcodeParser.addBBCode("[code]{TEXT}[/code]", '<dl class="codebox"><dt>Code:</dt><dd class="cont_code"><code>{TEXT}</code></dd></dl>'); bbcodeParser.addBBCode("[quote]{TEXT}[/quote]", "<blockquote><div>{TEXT}</div></blockquote>"); bbcodeParser.addBBCode('[quote="{SIMPLETEXT}"]{TEXT}[/quote]', "<blockquote><div><cite>{SIMPLETEXT} đã viết:</cite>{TEXT}</div></blockquote>"); bbcodeParser.addBBCode("[spoiler]{TEXT}[/spoiler]", '<dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content">{TEXT}</div></dd></dl>'); bbcodeParser.addBBCode("[spoiler={TEXT1}]{TEXT2}[/spoiler]", '<dl class="codebox spoiler"><dt style="cursor: pointer;">{TEXT1}:</dt><dd><div class="spoiler_content">{TEXT2}</div></dd></dl>'); bbcodeParser.addBBCode("[hide]{TEXT}[/hide]", '<dl class="codebox hidecode"><dd>{TEXT}</dd></dl>'); bbcodeParser.addBBCode("[table{TEXT1}]{TEXT2}[/table]", "<table{TEXT1}>{TEXT2}</table>"); bbcodeParser.addBBCode("[tr{TEXT1}]{TEXT2}[/tr]", "<tr{TEXT1}>{TEXT2}</tr>"); bbcodeParser.addBBCode("[td{TEXT1}]{TEXT2}[/td]", "<td{TEXT1}>{TEXT2}</td>"); bbcodeParser.addBBCode("[img]{URL}[/img]", '<img src="{URL}" alt="" />'); bbcodeParser.addBBCode("[img({NUMBER1}px,{NUMBER2}px)]{URL}[/img]", '<img src="{URL}" style="width: {NUMBER1}px;height: {NUMBER2}px" alt="" />'); bbcodeParser.addBBCode("[url]{URL}[/url]", '<a href="{URL}" target="_blank" rel="nofollow">{URL}</a>'); bbcodeParser.addBBCode("[url={URL}]{TEXT}[/url]", '<a href="{URL}" target="_blank" rel="nofollow">{TEXT}</a>'); bbcodeParser.addBBCode("[flash({NUMBER1},{NUMBER2})]{URL}[/flash]", '<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="{URL}" width="{NUMBER1}" height="{NUMBER2}" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit">'); bbcodeParser.addBBCode("[youtube]{IDENTIFIER}[/youtube]", '<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/{IDENTIFIER}" width="425" height="350" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit">'); bbcodeParser.addBBCode("[dailymotion]{IDENTIFIER}[/dailymotion]", '<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.dailymotion.com/swf/{IDENTIFIER}" width="425" height="350" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit" allowscriptaccess="always" allowfullscreen="true"'); bbcodeParser.addBBCode("[sub]{TEXT}[/sub]", "<sub>{TEXT}</sub>"); bbcodeParser.addBBCode("[sup]{TEXT}[/sup]", "<sup>{TEXT}</sup>"); bbcodeParser.addBBCode("[scroll]{TEXT}[/scroll]", "<span><marquee>{TEXT}</marquee></span>"); bbcodeParser.addBBCode("[updown]{TEXT}[/updown]", '<marquee direction="up" scrollamount="1" style="height: 60px;">{TEXT}</marquee>'); bbcodeParser.addBBCode("[flipv]{TEXT}[/flipv]", '<span class="flipV">{TEXT}</span>'); bbcodeParser.addBBCode("[fliph]{TEXT}[/fliph]", '<span class="flipH">{TEXT}</span>'); bbcodeParser.addBBCode("[fade]{TEXT}[/fade]", '<span class="fade">{TEXT}</span>'); bbcodeParser.addBBCode("[blur]{TEXT}[/blur]", '<span class="blur">{TEXT}</span>'); $("#quick_reply input[name='preview']").click(function (d) { d.preventDefault(); d = $("#text_editor_textarea"); 3 >= d.val().length ? alert("Bài viết quá ngắn!") : ($("#Zzpreview").length || ($("body").append('<div id="Zzpreview" style="z-index: 30000;"><p class="h2"><span class="Zzpreview_title left">Xem trước</span><span class="Zzpreview_get left"><label><input type="checkbox" id="getPreview" style="vertical-align: middle;" checked /> Tải dữ liệu</label></span><a href="#quickreply" class="Zzpreview_close">Đóng</a></p><div class="post-entry"><div class="entry-content"><div id="Zzpreview_post"><img src="http://i.imgur.com/m3NXDa6.gif" alt="loading..." /> Đang tải dữ liệu...</div></div></div><div class="center"><input type="button" class="Zzpreview_full Zzpreview_button" value="Dùng đầy đủ chức năng"> <input type="button" class="Zzpreview_submit Zzpreview_button" value="Gửi bài"></div></div>'), $("#Zzpreview_post").width($(".entry-content:first").width()), "true" == my_getcookie("Zzpreview_check") && $("#getPreview").prop("checked", !0)), $("#Zzpreview_post").html('<img src="http://i.imgur.com/m3NXDa6.gif" alt="loading..." /> Đang tải dữ liệu...'), $("#getPreview").prop("checked") ? $.post("/post", { mode: "reply", notify: 1, preview: 1, t: $("#quick_reply input[name='t']").val(), message: $("#text_editor_textarea").val() }, function (d) { $("#Zzpreview_post").html($(d).find(".entry-content:first").html()); $._zzEmoFb() }) : (d = d.val(), d = d.replace(/[<>]/g, function (d) { return { "<": "<", ">": ">" }[d] }), d = d.replace(/\n/g, "<br />"), $("#Zzpreview_post").html(bbcodeParser.bbcodeToHtml(d)), $("#Zzpreview_post code").html(function () { return bbcodeParser.htmlToBBCode($(this).html()) }), $._zzEmoFb()), $("#Zzpreview").fadeIn()) }); $(document).on("change", "#getPreview", function () { my_setcookie("Zzpreview_check", $("#getPreview").prop("checked"), !0) }); $(document).on("click", ".Zzpreview_full", function () { $("#quick_reply").attr("action", "/post?preview=1").submit() }); $(document).on("click", ".Zzpreview_submit", function () { $("#quick_reply input[name='post']").click() }); $(document).on("click", ".Zzpreview_close", function () { $("#Zzpreview").fadeOut() });

ACP >> Display >> Templates >> QLTT >> viewtopic_body

Tìm:

Code:: <script src="<JS-2>" type="text/javascript"></script>   <script src="<JS-3>" type="text/javascript"></script>

Thêm vào bên dưới file javascript <JS-2>:

Code:: <script src="<Link-JS>" type="text/javascript"></script>

Thay <Link-JS> bằng liên kết file javascript vừa tạo ở trên.

Lưu ý: <JS-2> và <JS-3> chỉ là vị trí đánh dấu file js như trong hướng dẫn OldEditor Editor thuần BBcode.

Ghi chú: Code dùng trong bài viết này có sử dụng phpBB BBCode Javascript Parser của wGEric.

Zzbaivong

Thông điệp [Trang 1 trong tổng số 1 trang]