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

  Bài viết hay nhất1
ZzQuickPreview phiên bản [You must be registered and logged in to see this link.] 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 ZzQuickPreview so 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.

[You must be registered and logged in to see this image.]
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(/\"/, "&quot;") + '" 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">&nbsp;<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>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<script src="<JS-3>" type="text/javascript"></script>
<!-- END switch_user_logged_out -->
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><JS-3> chỉ là vị trí đánh dấu file js như trong hướng dẫn [You must be registered and logged in to see this link.].

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


Zzbaivong
  Bài viết hay nhất2
đã test, rất nuột :3
  Bài viết hay nhất3
haha đúng như dự đoán hum này share. Tks huynh nhé ! OldEditor ngày càng nhiều mod ngon
  Bài viết hay nhất4
phần xem trước không chạy smile fb - (^^^) (^^^) - test tại Devs luôn :)
  Bài viết hay nhất5
[You must be registered and logged in to see this link.]
anhoang_qn wrote:phần xem trước không chạy smile fb - (^^^) (^^^) - test tại Devs luôn :)
Đã fix, cập nhật link js nhé!
  Bài viết hay nhất6
thêm link js mới hay đổi file js cũ?
  Bài viết hay nhất7
[You must be registered and logged in to see this link.]
truongchun wrote:thêm link js mới hay đổi file js cũ?
Đổi file cũ, đã cập nhật trong bài hướng dẫn.
Nên tạo file js riêng cho diễn đàn bạn.
  Bài viết hay nhất8
Làm thế nào để member mặc định check vào ô "tải dữ liệu"
  Bài viết hay nhất9
Tìm trong code js:
Code:
<input type="checkbox" id="getPreview" />
Sửa thành:
Code:
<input type="checkbox" id="getPreview" checked />
  Bài viết hay nhất10
bác baivong của em nó thiếu width mà hông biết thêm ở đâu với lại nó không tắt đèn :D .... bác xem dùm em !

[You must be registered and logged in to see this image.]

Demo: [You must be registered and logged in to see this link.]

ID: test123
Pass: test123456789
  Bài viết hay nhất11
Thêm vào CSS:
Code:
#Zzpreview {background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.7)}
#Zzpreview > div.center > input.Zzpreview_button {background: #2153FF}
#Zzpreview > div.center > input.Zzpreview_button:hover {background: #333}
  Bài viết hay nhất12
[You must be registered and logged in to see this image.] Em làm đủ mọi bước nhưng nó bị thế này, mong Ad giúp!!!
  Bài viết hay nhất13
[You must be registered and logged in to see this link.]
nghiahungdn2000 wrote:[You must be registered and logged in to see this image.] Em làm đủ mọi bước nhưng nó bị thế này, mong Ad giúp!!!
bạn xem lại phần chèn css nhé , k dc thì cho xin cái link
  Bài viết hay nhất14
link đây anh:
[You must be registered and logged in to see this link.]
còn nếu anh cần nick ad thi em pm cho :v
  Bài viết hay nhất15
[You must be registered and logged in to see this link.]
nghiahungdn2000 wrote:link đây anh:
[You must be registered and logged in to see this link.]
còn nếu anh cần nick ad thi em pm cho :v
bổ sung acc test nữa nhé, lưu ý cho các lần hỏi sau này :)
  Bài viết hay nhất16
[You must be registered and logged in to see this link.]
acc: member2000
pass: matkhau
  Bài viết hay nhất17
@nghiahungdn2000: Thay lại CSS nhé!
  Bài viết hay nhất18
Dạ được rồi, nhưng nó bị mất [You must be registered and logged in to see this image.] Nó chỉ có cái phần dưới thôi!!!
  Bài viết hay nhất19
Thay lại phần javascript luôn nhé!
  Bài viết hay nhất20
Vẫn vậy anh à :'(
  Bài viết hay nhất21
Thay lại javascript nhé, đã sửa lỗi rồi đấy :v
  Bài viết hay nhất22
Anh vào forum em tét thử đi, em làm hoài k dc!!! :'(
  Bài viết hay nhất23
Dạ được rồi, do cái toolbar của forumvi, em tắt là dc, cơ mak sao của demo là chữ "đóng" màu đỏ sẵn, còn của em thì dấu "X" mà khi đưa chuột vào nó mới đỏ
  Bài viết hay nhất24
You cannot reply to topics in this forum