[GOeditor] GOeditor 1.5

  Bài viết hay nhất1
GOeditor - Quick Editor
Written by : Get_Over
Giao diện :




Code:

Tính năng chính :
+ Hỗ trợ bbcode
+ Trả lời nhanh không chuyển trang
+ Preview nhanh

Cập nhật sau bản 1.5 :
+ Chỉnh lại CSS
+ Tự động focus giữa bbcode
+ Làm lại smile và color
+ Gửi tin nhắn nhanh đến tường
+ Quote nhanh (Cái này riêng)

Hướng dẫn :
Mình viết hướng dẫn dựa trên viewtopic punbb mặc định còn 2 phiên bản phpbb3Invision mình sẽ convert sau

Bước 1 : ACP --> QLTT --> Forum --> Security
Unauthorize unofficial forms to post messages and private messages on the forum : Không


Bước 2 : ACP --> Messages and e-mails --> Cấu hình diễn đàn

Allow Quick Reply : Không


Bước 3 : ACP --> Display --> CSS :

Trong CSS tìm : #GOeditor và tìm thông số width:70% thay 70% thành độ dài để phù hợp với forum bạn

Code:
#GO-quickrep .repnotice{background-color:#d9ffd1;background-image:url(http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png);background-position:10px center;background-repeat:no-repeat;border:1px solid #36bf00;display:block;font-size:15px;font-weight:700;height:40px;line-height:35px;margin:20px auto;padding:5px;text-align:center;width:50%}
#GO-quickrep .previewdata{background:#fcfcfc;border:1.5px solid #D5D5D5;margin:20px auto;width:97%}
#GO-quickrep .buttonrep #sendrep:focus,#GO-quickrep .buttonrep #preview:focus,#GO-quickrep #backpreview:focus,#GO-quickrep .buttonrep #re-advance:focus{outline:none}
#GO-quickrep #repsmile{background:#F7F7F7;border:1px solid #D5D5D5;display:none;margin-left:15%;margin-top:35px;min-height:100px;padding:3px;position:absolute;width:600px}
#GO-quickrep #repcolour td{border:1px solid #AAA;float:left;height:13px;margin:0 2px 2px 0;outline:0 none;width:13px}
#GO-quickrep #repcolour table:last-child{background-color:transparent!important}
#GO-quickrep #repcolour{background:#F7F7F7;border:1px solid #D5D5D5;display:none;margin-left:20%;margin-top:35px;max-width:400px;min-height:100px;padding:3px;position:absolute}
#GO-quickrep .go-bbcodeimg,#GO-quickrep .senddata{background:#fff;border:1px solid #D5D5D5;color:#000;display:none;height:100px;margin-top:20px;padding:3px;position:absolute;width:230px}
#GO-quickrep #bbcodeimg,#GOdata{border-radius:none;display:block;margin-left:auto;margin-right:auto;margin-top:10px;min-height:20px!important;outline:none;padding:5px;width:70%!important}
#GO-quickrep #gorep{border:1px solid #B6B6B6;border-radius:none;display:block;margin:auto;min-height:200px!important;outline:none;width:97%!important}
#GO-quickrep .buttonimg,#GO-quickrep .buttonwall{background-color:#2797f2!important;border:none;color:#fff!important;cursor:pointer;display:block;font-size:12px;font-weight:700;height:25px;margin:10px auto;min-width:50px;padding:0 10px}
#GO-quickrep .buttonrep #sendrep,#GO-quickrep #backpreview{margin-left:1.5%}
#GO-quickrep .buttonrep #re-advance{-moz-transition:all .2s ease;-ms-transition:all .2s ease;-webkit-transition:all .2s ease;background-color:#000!important;color:#FFF!important;float:right!important;margin-right:1.5%;o-transition:all .2s ease;transition:all .2s ease}
#GO-quickrep #backpreview{margin-top:-20px}
#GO-quickrep .buttonrep #sendrep,#GO-quickrep .buttonrep #preview,#GO-quickrep .buttonrep #re-advance,#GO-quickrep #backpreview{background-color:#2797f2;border:none;color:#fff;cursor:pointer;display:inline-block;font-size:15px;font-weight:700;height:40px;min-width:80px;padding:0 10px}
#GO-quickrep .buttonrep #sendrep:hover,#GO-quickrep .buttonrep #preview:hover,#GO-quickrep #backpreview:hover,.buttonimg:hover{background-color:#7fc5ff;color:#fff}
#GO-quickrep .bbcode{border:none;color:#fff;cursor:pointer;display:block;font-size:12px;font-weight:700;height:30px;margin:auto;width:97%}
#GO-quickrep .bbcode span{-moz-border-radius:2px;-moz-box-shadow:inset 0 7px 10px #FFF;-webkit-border-radius:2px;-webkit-box-shadow:inset 0 7px 10px #FFF;border:1px solid #CCC;border-radius:2px;box-shadow:inset 0 7px 10px #FFF;color:#888;cursor:pointer;display:block;float:left;margin-right:3px;padding:4px 10px;text-shadow:0 1px #FFF}
#GO-quickrep .bbcode span:hover{border:1px solid #006adb;color:#000}
#GO-quickrep .buttonrep #re-advance:hover{background-color:#2797f2!important;color:#FFF!important}
#GO-quickrep textarea:focus,#GO-quickrep #bbcodeimg:focus{border:1px solid #0081eb!important;outline:none}
#GOeditor{background: #f5f5f5;border:1px solid #B6B6B6;box-shadow:0 0 3px rgba(0,0,0,0.15);margin:auto;min-height:50px;padding:5px;width:70%}
#GO-quickrep #backpreview,#GO-quickrep .repnotice,#GO-quickrep #repcolour form tr:first-child,#repcolour td:first-child,#repcolour td:nth-child(2),#repcolour td:nth-child(3){display:none}
Bước 4 : ACP --> Modules --> Javascript :
Title : GOeditor - Quick Editor
Place : In the topic

Spoiler:
Code:
$(function () {

// // // // // // // // // // // // // // // // // // // // GOeditor  © Get Over - doannamthai // // // // // // // // // // // // // // // // // // // //

// // // // // // STRUCTURE // // // // // //
    if ($('a[href*="inbox"]').length) {
        var z = $('a[href*="mode=reply"]').attr("href");

        function insertBBcode(editor, tagstart, tagend) {
            var selectedText = document.selection ? document.selection.createRange().text : editor.value.substring(editor.selectionStart, editor.selectionEnd);
            var newText = '[' + tagstart + ']' + selectedText + '[/' + tagend + ']';
            if (document.selection) {
                editor.focus();
                var st = getCaret(editor) + tagstart.length + 2;
                document.selection.createRange().text = newText;
                var range = editor.createTextRange();
                range.collapse(true);
                range.moveStart('character', st);
                range.moveEnd('character', selectedText.length);
                range.select();
                editor.focus();
            } else {
                var st = editor.selectionStart + tagstart.length + 2;
                var end = editor.selectionEnd + tagstart.length + 2;
                editor.value = editor.value.substring(0, editor.selectionStart) + newText + editor.value.substring(editor.selectionEnd, editor.value.length);
                editor.focus();
                editor.setSelectionRange(st, end)
            }
        }

        function getCaret(editor) {
            editor.focus();
            var r = document.selection.createRange();
            if (r == null) {
                return 0;
            }
            var re = editor.createTextRange(),
                rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);

            var add_newlines = 0;
            for (var i = 0; i < rc.text.length; i++) {
                if (rc.text.substr(i, 2) == '\r\n') {
                    add_newlines += 2;
                    i++;
                }
            }
            return rc.text.length + add_newlines;
        }
        $(".pun-crumbs:last").after('<div id="GOeditor"><form id="GO-quickrep" action="/post"  method="post" name="GOeditor"><div  class="repnotice" ></div><div style="display:none;" class="previewdata"></div><br><input type="submit"  id="backpreview"  style="display:none;" value="Back"/><div class="GO-post"><textarea id="gorep" placeholder="Bình luận..." name="GOpost"></textarea><div><br><div class= "bbcode"><span class = "repbbcode" title = "Bold" value="b" style="font-weight:bold" >B</span><span class = "repbbcode" title="Italic" value="i" style="font-style: italic">I</span><span class = "repbbcode" title="Underline" value="u" style="text-decoration: underline">U</span><span class = "repbbcode" title="Strikethrough" value ="strike" style="text-decoration: line-through;font-weight:bold">S</span><span class = "repbbcode" title="Code" value="code">Code</span><span class = "repbbcode" title="Quote" value="quote">Quote</span><span class = "repbbcode2" id="repimg" title="Imagine" value="img">IMG</span><div class="go-bbcodeimg" style="display:none;margin-top: 27px;"><input type="text" id="bbcodeimg" placeholder="Nhập url..."><input type="button" style = "margin-top: 15px;" class="buttonimg" value="Insert"></div><span class = "repbbcode-smile" title="Smile" >Smiles</span><span class = "repbbcode-colour" title="Colour" >Colour</span><span class = "GOwall" title="Send message to user\'s wall">Wall</span><div class="senddata" style="display:none;margin-top: 27px;"><input type="text" id="GOdata" placeholder="Nhập tên..."><input type="button" style = "margin-top: 15px;" class="buttonwall" value="OK"></div></div><br><div class = "buttonrep"><input type="submit"  id= "sendrep" value="Send"></input>\n<input type="submit"  id="preview" value="Preview"><input type="hidden" name="notify" value="1"></input><input type="hidden" name="t" value=""><input type="hidden" name="mode" value="reply"><input type="submit" name="preview" id="re-advance" value="Full Editor"></input><br><br><div class="golreply" style="display:none"><img src="http://i57.servimg.com/u/f57/15/64/85/86/ajax-l10.gif"/></div></div></form></div>');
// // // // // // STRUCTURE // // // // // //

// // // // // // BBCODE // // // // // //
        var x = $(".GO-post textarea")[0];
        var GOpost = $("[name='GOpost']").get(0);
        $(".repbbcode").on("click", function () {
            var a = $(this).attr("value");
            insertBBcode(GOpost, a, a);
        });
        $(".repbbcode-smile").click(function () {
            $(this).after('<div id ="repsmile"></div>');
            $(this).before('<span class = "smiletoggle" title="Smiles">Smiles</span>').remove();
            $("#repsmile").show();
            $("#repsmile").load("/smilies.forum?mode=smilies_frame", function () {
                $("#repsmile").contents().find("img").click(function () {
                    var c = $(this).attr("alt");
                    $("#gorep").focus();
                    $("#gorep").val($("#gorep").val() + c);
                    return false;
                });
            });
            $(".smiletoggle").click(function () {
                $("#repsmile").toggle();
            })
        });
        $("#GO-quickrep input[name='t']").val(z.substring("8", z.lastIndexOf("&mode=reply")));
        $("#repimg").click(function () {
            var f = $(".go-bbcodeimg").css("display");
            if (f == 'none') {
                $(".go-bbcodeimg").css({
                    "left": $(this).position().left,
                    "top": $(this).position().top,
                }).show();
            } else {
                $(".go-bbcodeimg").hide();
            }
        });
        $(".buttonimg").click(function () {
            var i = $(".go-bbcodeimg #bbcodeimg").val();
            if (i.length > 0) {
                $("#gorep").focus();
                $("#gorep").val($("#gorep").val() + '[img]' + i + '[/img]');
            } else {
                insertBBcode(GOpost, 'img', 'img');
            }
        });
        $(".GOwall").click(function () {
            var f = $(".senddata").css("display");
            if (f == 'none') {
                $(".senddata").css({
                    "left": $(this).position().left,
                    "top": $(this).position().top,
                }).show();
            } else {
                $(".senddata").hide();
            }
        });
        $(".buttonwall").click(function () {
            var g = $(".GOwall").css({
                "background": "",
                "border": "",
                "color": ""
            });
            var s = $("#GOdata").val();
            if (s.length > 0) {
                $.get("/search?mode=searchuser&search_username=" + s + "&search=OK", function (e) {
                    if ($(e).find("form option").text().search(s) >= 0) {
                        $(".senddata").hide();
                        $(".GOwall").css({
                            "background": "#8fff57",
                            "border": "1px solid #006adb",
                            "color": "#000000"
                        });
                    } else {
                        alert("Tên người dùng không tồn tại");
                        $("#GOdata").val("");
                        g;
                    }
                });
            } else {
                g;
                $(".senddata").hide();
            }
        });
        $(".repbbcode-colour").click(function () {
            $(this).after('<div id ="repcolour"></div>');
            $(this).before('<span class="colourtoggle" title="Colour">Colour</span>').remove();
            $("#repcolour").show();
            $("#repcolour").load("/chatbox/chatbox_selectcolor.htm", function () {
                $("#repcolour").contents().find("td").click(function () {
                    var m = $(this).attr("bgcolor");
                    insertBBcode(GOpost, 'color=' + m, 'color');
                });
            });
            $(".colourtoggle").click(function () {
                $("#repcolour").toggle();
            })
        });
// // // // // // BBCODE // // // // // //

// // // // // // Quick Reply - Quick Preview // // // // // //

        $("#preview").click(function (v) {
            v.preventDefault();
            var value = $("#gorep").val().replace(/\s/g, '').length;
            if (10 <= value && value <= 1500) {
                $(".golreply").show();
                $.post(z, {
                    "message": $("#gorep").val(),
                    "preview": "Preview"
                }, function (b) {
                    $(".GO-post").fadeOut(300);
                    $(".golreply").fadeOut(300);
                    $("#backpreview").fadeIn(1000);
                    $(".previewdata").fadeIn(1000);
                    $(".previewdata").html($(b).find(".post:first .postbody:first"));
                    $("#backpreview").click(function (t) {
                        t.preventDefault();
                        $(this).hide();
                        $(".previewdata").hide();
                        $(".GO-post").fadeIn(1500);
                    });
                });
                $(".repnotice").fadeOut(1000);
            } else if (10 > value) {
                $(".repnotice").fadeIn(500);
                $(".repnotice").html("Lỗi!\nBạn phải nhập <font color='red'>" + (10 - value) + "</font> ký tự nữa")
            } else if (1500 < value) {
                $(".repnotice").fadeIn(500);
                $(".repnotice").html("Lỗi! Bài viết quá dài \nBạn không được nhập quá 1500 ký tự")
            }
        });
        $("#sendrep").click(function (v) {
            v.preventDefault();
            if ($("#GOdata").val().length < 1) {
                var value = $("#gorep").val().replace(/\s/g, '').length;
                if (10 <= value && value <= 1500) {
                    $(".golreply").show();
                    $.post(z, {
                        "message": $("#gorep").val(),
                        "post": "Send",
                        "attach_sig": "1"
                    }, function (t) {
                        if (t.indexOf("Flood") != -1 && $("html").attr("xml:lang") == "vi") {
                            $(".repnotice").fadeIn(500);
                            $(".repnotice").html("Lỗi!\nBạn phải chờ 5 giây mới có thể gửi bài");
                            $(".golreply").hide();
                        } else if ($(t).find(".message a").length) {
                            var f = $(t).find(".message a:first").attr('href');
                            location.href = f;
                            $.get(f, function (z) {
                                $(z).find(".post:last").hide().insertAfter(".post:last").slideDown(400);
                            });
                            $("#gorep").val("");
                            $(".golreply").hide();
                            $(".repnotice").fadeOut(1000);
                        }
                    });
                } else if (10 > value) {
                    $(".repnotice").fadeIn(500);
                    $(".repnotice").html("Lỗi!\nBạn phải nhập <font color='red'>" + (10 - value) + "</font> ký tự nữa")
                } else if (1500 < value) {
                    $(".repnotice").fadeIn(500);
                    $(".repnotice").html("Lỗi! Bài viết quá dài \nBạn không được nhập quá 1500 ký tự")
                }
            } else {
                $(".golreply").show();
                var u = $("#GOdata").val();
                $.post("/privmsg?mode=post_profile", {
                    subject: "Tin nhắn",
                    message: $("#gorep").val(),
                    username: $("#GOdata").val(),
                    mode: "post_profile",
                    folder: "profile",
                    post: "Send"
                }).done(function () {
                    $(".golreply").hide();
                    $("#gorep").val("");
                    $("#GOdata").val("");
                    $(".GOwall").css({
                        "background": "",
                        "border": "",
                        "color": ""
                    });
                    alert("Tin nhắn đã được gửi đến " + u);
                });
            }
        });
    }

// // // // // // Quick Reply - Quick Preview // // // // // //

// // // // // // // // // // // // // // // // // // // // GOeditor  © Get Over - doannamthai // // // // // // // // // // // // // // // // // // // //

});

[Plugin] Quick Quote for GOeditor 1.5

JS :
Spoiler:
Code:
$(function () {
// [Plugin] Quick Quote for GOeditor 1.5 - Please don't remove this copyright ;
        $('a[href*="mode=quote"]').click(function (v) {
v.preventDefault();
                $.get($(this).attr('href') , function (a) {
        var datatext = $(a).find('#text_editor_textarea[name="message"]').val();
        $("#gorep").focus();
        $("#gorep").val(datatext);
                });
                $('html,body').stop().animate({
                        scrollTop: $('#GOeditor').offset().top
                    }, 1500);
               
            });
});
GOeditor  © Get Over - doannamthai
  Bài viết hay nhất2
Preview hình như không có hoạt động bác ơi ;d
Nếu dùng GOEditor thì những đoạn js thêm bbcode không có tác dụng nữa bác nhỉ
  Bài viết hay nhất3
Demo như 1!
  Bài viết hay nhất4
có cái gì đó không đúng, e làm từ bước 1 đến 4, k bỏ xót 1 bước, nhưng cái khung của e nó hình vuông (k fải chử nhật như demo), cái button gữi bài 1 nữa xanh 1 nữa đen, gữi bài nhanh thì k đc, fải f5 mới hiện bài :(
  Bài viết hay nhất5

@anhoang_qn wrote:có cái gì đó không đúng, e làm từ bước 1 đến 4, k bỏ xót 1 bước, nhưng cái khung của e nó hình vuông (k fải chử nhật như demo), cái button gữi bài 1 nữa xanh 1 nữa đen, gữi bài nhanh thì k đc, fải f5 mới hiện bài :(
1 . CSS sử dụng % nên động rộng nó sẽ tùy thuộc vào chiều rộng của forum
2 . Chỉ áp dụng cho punbb
3 . Linh forum + nick test
  Bài viết hay nhất6

VectorY wrote:Preview hình như không có hoạt động bác ơi ;d
Nếu dùng GOEditor thì những đoạn js thêm bbcode không có tác dụng nữa bác nhỉ
Cho mình xin link forum + nick test (nhớ mình mới viết cho punbb)
  Bài viết hay nhất7

@Get_Over wrote:
@anhoang_qn wrote:có cái gì đó không đúng, e làm từ bước 1 đến 4, k bỏ xót 1 bước, nhưng cái khung của e nó hình vuông (k fải chử nhật như demo), cái button gữi bài 1 nữa xanh 1 nữa đen, gữi bài nhanh thì k đc, fải f5 mới hiện bài :(
1 . CSS sử dụng % nên động rộng nó sẽ tùy thuộc vào chiều rộng của forum
2 . Chỉ áp dụng cho punbb
3 . Linh forum + nick test
e dùng punbb
độ rộng 900
link forum : http://k12504.ohmylife.net/forum
nick test : TheVinh_K12504
pass : thevinha9
  Bài viết hay nhất8

@anhoang_qn wrote:
@Get_Over wrote:
@anhoang_qn wrote:có cái gì đó không đúng, e làm từ bước 1 đến 4, k bỏ xót 1 bước, nhưng cái khung của e nó hình vuông (k fải chử nhật như demo), cái button gữi bài 1 nữa xanh 1 nữa đen, gữi bài nhanh thì k đc, fải f5 mới hiện bài :(
1 . CSS sử dụng % nên động rộng nó sẽ tùy thuộc vào chiều rộng của forum
2 . Chỉ áp dụng cho punbb
3 . Linh forum + nick test
e dùng punbb
độ rộng 900
link forum : http://k12504.ohmylife.net/forum
nick test : TheVinh_K12504
pass : thevinha9
Tìm trong js đoạn :
Code:
$(z).find(".post:last").hide().insertAfter(".post:last").slideDown(400);
Thay bằng
Code:
$(z).find(".post1:first").hide().insertBefore(".post1:first").slideUp(400);
(Vi bạn dùng view đổi class post và nó ngược lại so vs view thường)

Trong CSS tìm :
Code:
#GO-quickrep{background:#fcfcfc;border:1px solid #D5D5D5;display:block;margin:10px auto;max-width:50%;padding:50px}
Đổi max-width:50% thành max-width:70%
  Bài viết hay nhất9
à, nhưng mà mấy cái button 1 nữa đen nữa xanh thì chưa biết fix sao hết :(
  Bài viết hay nhất10
được rồi, vào css tìm
Code:
{ background: #212121 url(http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png)
và xoá nó đi :), tks bác
  Bài viết hay nhất11
mà huynh ơi, e quên mất, chưa fix cái gữi bài k chuyển trang, e có gữi bài mà bài nó k hiện, fải f5 thì nó mới chịu hiện :(
  Bài viết hay nhất12

@anhoang_qn wrote:được rồi, vào css tìm
Code:
{ background: #212121 url(http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png)
và xoá nó đi :), tks bác
Tại sao thử bôi đen chữ rồi dùng bbcode lại không được nhỉ ??? Bên mình thử nghiệm vẫn xài tốt
  Bài viết hay nhất13

@anhoang_qn wrote:mà huynh ơi, e quên mất, chưa fix cái gữi bài k chuyển trang, e có gữi bài mà bài nó k hiện, fải f5 thì nó mới chịu hiện :(
Bạn thử dung đoạn này xem

$(z).find(".post1:first").hide().insertBefore(".post1:first").slideDown(400);
  Bài viết hay nhất14
k đc huynh ơi :(
  Bài viết hay nhất15

@anhoang_qn wrote:k đc huynh ơi :(
Bạn chỉnh lại view rồi thế thì dùng đoạn này nhé

Tìm : trong js :
Code:
$(z).find(".post:last").hide().insertAfter(".post:last").slideDown(400);
thay bằng

Code:
$(z).find(".post1:last").hide().insertAfter(".post1:last").slideDown(400);
  Bài viết hay nhất16
đã thành công, tks bác
  Bài viết hay nhất17

@Get_Over wrote:
VectorY wrote:Preview hình như không có hoạt động bác ơi ;d
Nếu dùng GOEditor thì những đoạn js thêm bbcode không có tác dụng nữa bác nhỉ
Cho mình xin link forum + nick test (nhớ mình mới viết cho punbb)
Forum: http://fcamusement.us.to
nick: FCATest
mk: fcatest123

Mọi thứ vẫn bình thường ngoài việc không hiện phần xem trước
  Bài viết hay nhất18

VectorY wrote:
@Get_Over wrote:
VectorY wrote:Preview hình như không có hoạt động bác ơi ;d
Nếu dùng GOEditor thì những đoạn js thêm bbcode không có tác dụng nữa bác nhỉ
Cho mình xin link forum + nick test (nhớ mình mới viết cho punbb)
Forum: http://fcamusement.us.to
nick: FCATest
mk: fcatest123

Mọi thứ vẫn bình thường ngoài việc không hiện phần xem trước
Tìm

$(".previewdata").html($(b).find("form .post:first .postbody:first"));

Đổi thành
Code:
$(".previewdata").html($(b).find("form .post:first .entry-content"));
xem có được không vì bạn css nhiều quá
  Bài viết hay nhất19
Cái quote nhanh còn dùng đc không ạ?
  Bài viết hay nhất20

@KirigayaKazuto wrote:Cái quote nhanh còn dùng đc không ạ?
Sẽ viết lại sau
  Bài viết hay nhất21
' '~ Ẩn với khách nữa ' '~
  Bài viết hay nhất22
ơ mà chung qui lại là vẫn chưa xài đc hả :(
  Bài viết hay nhất23
@^: Được rồi ' '~ Hâm à ' '~
  Bài viết hay nhất24
Topic hot nhất devs mà lâu cập nhật thế nhỉ ^^!
  Bài viết hay nhất25
Đã cập nhật 1.5
  Bài viết hay nhất26
You cannot reply to topics in this forum