ZzQuickPreview phiên bản SCEditor 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 chế wysiwyg và một số tùy chỉnh BBcode 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. Chức năng này tự khởi động nếu trình duyệt không hỗ trợ wysiwyg.

Giao diện ZzQuickPreview SCEditor

Code:

/* Zzpreview by devs.forumvi.com */
#Zzpreview_overlay{position:fixed;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.85);z-index:999}
#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_overlay > p.h2{height:40px;line-height:40px;background:#111;border-bottom:3px solid #0085FF;margin-bottom:30px;text-align:right}
#Zzpreview_overlay .Zzpreview_title{font-weight:700;display:block;background:#0085FF;color:#FFF;font-size:1.23em;margin:0 10px;padding:0 15px}
#Zzpreview_overlay > div.center > input.Zzpreview_button{border:1px solid;height:34px!important;line-height:32px;color:#FFF;background:#0085FF;margin:10px;padding:0 15px!important}
#Zzpreview_overlay > div.center > input.Zzpreview_button:hover{cursor:pointer;background:#444}
#Zzpreview_overlay .Zzpreview_close{display:inline-block;height:40px;background:red;color:#FFF;font-weight:700;padding:0 15px}
.Zzpreview_close:hover,.Zzpreview_get:hover{color:#FF0;cursor:pointer}
#Zzpreview_post ol,#Zzpreview_post ul{margin-left:30px}

Code:

$(function () {
   $(function () {
      $("#quick_reply input[name='preview']").click(function (b) {
         b.preventDefault();
         b = $("#text_editor_textarea").sceditor("instance");
         3 >= b.val().length ? alert("Bài viết quá ngắn!") : ($("#Zzpreview_overlay").length || ($("body").append('<div id="Zzpreview_overlay"><p class="h2"><span class="Zzpreview_title left">Xem trước</span><span class="Zzpreview_get left"><label><input type="checkbox" id="getPreview" /> 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...'), $.sceditor.isWysiwygSupported && !$("#getPreview").prop("checked") ? (b.toggleSourceMode(), b.inSourceMode() && b.toggleSourceMode(), $("#Zzpreview_post").html(b.getBody().clone().html()), $("#Zzpreview_post > div:not([align])").replaceWith(function () {
               return $(this).html().replace(/<br>$/g,
                  "") + "<br />"
            }), $("#Zzpreview_post").html(function () {
               var a = $(this).html(),
                  a = a.replace(/(\[spoiler="(.*)"\])/g, '<dl class="codebox spoiler"><dt style="cursor: pointer;">$2:</dt><dd><div class="spoiler_content">'),
                  a = a.replace(/(\[spoiler\])/g, '<dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content">'),
                  a = a.replace(/(\[\/spoiler\])/g, "</div></dd></dl>"),
                  a = a.replace(/\[hide\]/g, '<dl class="codebox hidecode"><dd>');
               return a = a.replace(/\[\/hide\]/g, "</dd></dl>")
            }),
            $("#Zzpreview_post code").wrap('<dl class="codebox"><dd class="cont_code"></dd></dl>').parent("dd").before("<dt>Code:</dt>")) : $.post("/post", {
            mode: "reply",
            notify: 1,
            preview: 1,
            t: $("#quick_reply input[name='t']").val(),
            message: $("#text_editor_textarea").sceditor("instance").val()
         }, function (a) {
            $("#Zzpreview_post").html($(a).find(".entry-content:first").html())
         }), $("#Zzpreview_overlay").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_overlay").fadeOut()
      })
   })
});

SCEditor đang sử dụng đã được forumotion tùy biến, bổ sung một số BBcode riêng như dailymotion, scroll, rand...
Bên cạnh đó, forumotion cũng lược bỏ một số tính năng và BBcode như emal, print, maximize
Bài viết này sẽ hướng dẫn bạn cách xắp xếp lại toolbar theo ý thích, và bổ sung các tính năng, BBcode ẩn.

Toolbar đã tùy biến

Code:

{SCEDITOR}

Code:

<script type="text/javascript">
//<![CDATA[
$(function () {
   $("#text_editor_textarea").sceditor("instance").destroy();
   try {
      FA.SCEditor = {
         sourceMode: bSourceMode
      };
      $("#text_editor_textarea").sceditor({
         locale: locale,
         width: ($.sceditor.ie <= 9) ? '' : '100%',
         height: height,
         plugins: plugin,
         toolbar: 'TOOLBAR',
         style: cssFile,
         rtl: isRtl,
         emoticonsEnabled: emoticonsEnabled,
         emoticonsCompat: true,
         emoticonsRoot: "",
         emoticons: {
            dropdown: smileys
         },
         emoticonsURL: iframeSrc
      });
      var editor = $("#text_editor_textarea").sceditor("instance");
      editor.toggleSourceMode();
      editor.sourceMode(FA.SCEditor.sourceMode);
      if (FA.SCEditor.sourceMode) $("a.sceditor-button-source").addClass("hover");
      if (plugin === 'bbcode') {
         FA_SCEditor.functions.showHideToolbarElements();
         if (!bSourceMode && editor.getSourceEditorValue().length) editor.setWysiwygEditorValue(editor.getSourceEditorValue() + '<br />')
      }
   } catch (e) {
      if (typeof (console) != 'undefined') {
         console.error(e)
      }
   }
   try {
      if (typeof (addSmileyPane) != 'undefined') {
         addSmileyPane()
      }
   } catch (e) {
      if (typeof (console) != 'undefined') {
         console.error(e)
      }
   }
});
//]]>
</script>

Code:

bold,italic,underline,strike|left,center,right,justify|bulletlist,orderedlist,horizontalrule|quote,code,faspoiler,fahide,table|servimg,image,email,link,unlink|youtube,dailymotion,flash|size,color,font,removeformat|date,time,pastetext,cut,copy,paste|more|subscript,superscript,fascroll,faupdown,fawow,farand|print,maximize,source

Các BBcode và chức năng có thể sử dụng trong forumotion:

Một cập nhật mới của forumotion, thay host upload ảnh của thành viên từ imageshack sang tinypic (do imageshack nâng cấp).
Có lẽ là do sơ suất, đã làm xảy ra lỗi: Không thể đóng lại khung tinypic sau khi đã mở ra.

Upload ảnh bằng tinypic

Code:

<!-- BEGIN switch_user_logged_in -->
<script type="text/javascript">
//<![CDATA[
$(document).on("click", function () {
   $(".sceditor-dropdown.sceditor-tinypic").hide();
});
$(document).on("click", ".sceditor-dropdown.sceditor-tinypic", function (e) {
   e.stopPropagation();
});
$(document).on("click", ".sceditor-button-servimg", function () {
   $(".sceditor-dropdown.sceditor-tinypic").show();
});
//]]>
</script>
<!-- END switch_user_logged_in -->

Giới hạn ký tự tối thiểu khi đăng bài cho SCEditor

Giới thiệu

Demo

Nhắc nhở khi bài viết quá ngắn

Hướng dẫn

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Code:

$(function() {  
    var min = 10,
            a;  
    $("input[name='post']").click(function() {    
        a = $("#text_editor_textarea").sceditor("instance").val().replace(/\s|\[\/?(b|i|u|strike|list(=(1|a))?|\*|quote(=".+")?|hr|code|spoiler(=[^\[\]]*)?|hide|table|tr|td|img.+\/img|flash.+\/flash|youtube.+\/youtube|dailymotion.+\/dailymotion|size(=\d+)?|color(=#.{6})?|font(=[^\[\]]*)?|url(=[^\s\[\]]*)?|rand|flipv|fliph|blur|fade|wow|sub|sup|updown|scroll|justify|right|center|left)\]/gi, '').length;    
        if (min > a) return alert("Bài viết quá ngắn!\nSố ký tự tối thiểu là " + min + " ký tự.\nBạn cần viết thêm " + (min - a) + " ký tự nữa mới có thể gửi bài."), !1  
    })
});

Nguồn

Cảnh báo khi đóng trình duyệt trong lúc đang gửi bài trên SCEditor

Giới thiệu

Demo

Cảnh báo trên trình duyệt Chrome


Cảnh báo trên trình duyệt Firefox

Hướng dẫn

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Code:

$(function() {
    $(function() {
        if ($.sceditor) {
            var $win = $(window),
                $editor = $("#text_editor_textarea").sceditor("instance"),
                firstVal = $editor.val();
            $win.on("beforeunload", function() {
                if ($editor.val() !== firstVal) return "Bài viết của bạn chưa được lưu."
            });
            $("form[name='post']").on("submit", function() {
                $win.off("beforeunload");
            });
        }
    });
});

Nguồn