Change background image
LOVE quotion

Bắt đầu từ 4.53' thứ Hai ngày 17/10/2011


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

kẻ đương thời

#1zEditor 1.1 Empty zEditor 1.1

kẻ đương thời
kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tác giả: Zero
Quyền lợi: Bạn được quyền sử dụng miễn phí mod nếu bạn tôn trọng công sức của tác giả
Phiên bản: 1.1 (26-01-2013)

Chức năng:
- Rất nhẹ (~8kb).
- Gửi bài, sửa bài, quote bài, xem trước, chọn smiley, và chọn màu không chuyển trang
- Nâng cấp chức năng chọn màu của FM
- Cập nhật bài mới không chuyển trang sau khi gửi và chỉnh sửa
- Viết dành cho punBB, phpBB3, và Invision
- Viết đặc biệt dành cho người không chuyên về javascript
- Có thể chỉnh sửa 100% giao diện và thành phần
- Những buttons đang có: Bold, Italic, Underline, Strike, Color, Smily, Tag
- Thích hợp với skin fmvi version 3

Chức năng sắp tới cho phiên bản 1.2:
- Hỗ trợ multi-quote
- Hỗ trợ chức năng upload ảnh zEditor 1.1 3043157 và video zEditor 1.1 3359622911
- Giới hạn ký tự tối thiểu?

Chức năng cho những phiên bản tiếp theo:
- Hỗ trợ gửi tin nhắn vào inbox và vào wall
- Hỗ trợ nhiều giao diện (người dùng có thể tự cài và đòi hỏi kiến thức về css)
- Làm bbcode riêng cho chức năng Tag (sử dụng thẻ [tag])
- Thêm chức năng upload ảnh (sử dụng host được nhiều người gợi ý nhất)
- Hỗ trợ trong viết tin nhắn (maybe)
- "Tweak" css và javascript
.......... (Ai có ý tưởng gì hay thì comment zEditor 1.1 757869165 )

Showcase:

Bình thường

zEditor 1.1 Firesh10
Xem trước

zEditor 1.1 Firesh11
Color picker

zEditor 1.1 Firesh12
Smiley

zEditor 1.1 Firesh13

Hướng dẫn:

Mod được viết dựa trên phiên bản MẶC ĐỊNH của phpbb3, invision và punbb (mặc định: viewtopic_body chưa được chỉnh sửa bằng template và script). Chỉ hướng dẫn chỉnh sửa cho skin fmvi ver 3. Mấy skin còn lại tự mò.

Cấu trúc mặc định của punbb:

zEditor 1.1 Captur10
Mod này sẽ không bao giờ hỗ trợ phpbb2, ai hỏi = spam -> BAN
- General -> Messages and e-mails -> Configuration -> Allow quick reply: Yes
- General -> Forum -> Security -> Unauthorize unofficial forms to post messages and private messages on the forum: No
- Modules -> HTML & JAVASCRIPT -> Javascript codes management -> Create a new javascript -> Placement: In the topics

Code:
// zEditor 1.1 by Zero © FMVI.VN
// Disclaimer: You are free to use this mod as long as you give the credit to the creator
// Quyền lợi: Bạn được quyền sử dụng miễn phí mod nếu bạn tôn trọng công sức của tác giả
var version = 'punbb'; // punbb or phpbb3 or invision
var post = '.post-options'; // .post-options (punbb) or .profile-icons (phpbb3) or .posting-icons (invision)
var post_body = '.entry-content'; // .entry-content (punbb) or .content (phpbb3) or .post-entry (invision)
var post_inbody = 'div div:first'; // div div:first (punbb) or div:first (phpbb3 and invision)
var reply_text = 'Mode: Reply';
var edit_text = 'Mode: Edit';
var quote_text = 'Mode: Quote';
var preview_text = 'Mode: Preview';
var reply_button = 'Reply';
var loading_text = 'Loading...';
// MODIFY IF YOURE USING CUSTOM PUNBB BOARD AND WANT TO USE TAG FEATURE
var custom_tag = '.postbody';
var custom_tag1 = '.username';
///////////////////////////////////////////////////////////////////////////////
$.getScript('http://misc-scripts.googlecode.com/files/selix-by-blide-design.js');
var editor;
var mode;
var textarea;
var zeditor = {
    ready: function () {
        textarea = document.getElementById('editor-textarea');
        qreply = document.getElementById('quick_reply');
        $('.h3:contains("Quick reply:")').remove();
        editor = document.getElementById('zd-editor-form');
        mode = document.getElementById('editor-mode');
        editor.tid.value = qreply.tid.value;
        editor.t.value = qreply.t.value;
        editor.lt.value = qreply.lt.value;
        editor.notify.value = qreply.notify.value;
        zeditor.button();
    },
    load: function () {
        $(post  ' a[href*="quote"], '  post  ' a[href*="editpost"]').click(function (a) {
            $('#zd-edit').load(this.href  ' textarea:last', function () {
                textarea.value = this.firstChild.value;
                textarea.focus();
            });
            a.preventDefault();
        });
    },
    button: function () {
        a = (version == 'punbb' || version == 'phpbb3') ? '.post' : '.post.clearfix';
        $(a).each(function () {
            var id = $(this).find(post  ' a[href*="quote"]').attr('href').split('p=')[1].replace('&mode=quote', '');
            $(this).find(post  ' a[href*="quote"]').attr('onclick', 'zeditor.start(\'quote\', \''  id  '\')');
            $(this).find(post  ' a[href*="quote"]').before('<a class="editor-reply" href="#reply" onclick="zeditor.start(\'reply\', \''  id  '\')">'  reply_button  '</a>');
            $(this).find(post  ' a[href*="editpost"]').attr('onclick', 'zeditor.start(\'edit\', \''  id  '\')');
        });
        zeditor.load();
    },
    add: function (x, y) {
        textarea.focus();
        selix.wrap(textarea, x, y, true);
    },
    find: function (a) {
        a = a.substring(a.indexOf("<a href=")  9);
        b = a.indexOf('"');
        return a.substring(0, b)
    },
    newpost: function (a) {
        var b = a.split('#')[1];
        document.getElementById('zd-editor').style.display = 'none';
        if (mode.innerHTML == reply_text || mode.innerHTML == quote_text) {
            $('<div class="newreply"></div>').insertAfter('.post:last').load(a  " #p"  b, function () {
                zeditor.button();
                $('.newreply').hide().fadeIn('2000');
            });
        }
        if (mode.innerHTML == edit_text) {
            $("#zd-editor").parents(post_body).find(post_inbody).load(a  " #p"  b  " "  post_body  " "  post_inbody, function () {
                $("#zd-editor").parents(post_body).hide().fadeIn('slow');
                zeditor.button();
            });
        }
        textarea.value = '';
        editor.lt.value = b;
    },
    preview: function () {
        preview = document.getElementById('zd-preview');
        if (preview.style.display == 'block') {
            preview.style.display = 'none';
        } else {
            var form = $("form[name='zd-editor']").serialize()  "&preview=1";
            $.post('/post', form, function (data) {
                preview.style.display = 'block';
                preview.innerHTML = $(data).find(post_body).html();
            });
        }
    },
    post: function () {
        $.post('/post', $("form[name='zd-editor']").serialize()  '&post=1', function (c) {
            if (c.indexOf("Flood control") > 0) {
                alert('B?n chưa g?i đư?c do b?n v?a g?i m?t bài cách đây không lâu.');
            } else if (c.indexOf('A new message') > 0) {
                $.post('/post', $(c).find("form[name='post']").serialize()  '&post=1', function (c) {
                    var a = c.indexOf("has been sent"),
                        e = c.indexOf("entered successfully");
                    0 < a || 0 < e ? (c = c.substring(0 < a ? a : e), c = zeditor.find(c), zeditor.newpost(c)) : (alert('Error! please press F5'));
                });
            } else {
                if ($("html").attr("xml:lang") == "en") {
                    var a = c.indexOf("has been sent"),
                        e = c.indexOf("entered successfully");
                    0 < a || 0 < e ? (c = c.substring(0 < a ? a : e), c = zeditor.find(c), zeditor.newpost(c)) : (alert('Error! please press F5'))
                } else if ($("html").attr("xml:lang") == "vi") {
                    var a = c.indexOf("B?m chu?t");
                    0 < a ? (c = c.substring(a), c = zeditor.find(c), zeditor.newpost(c)) : (alert('Có l?i vui l?ng ?n F5'))
                }
            }
        });
    },
    start: function (a, b) {
        eid = document.getElementById('p'  b);
        $('#zd-editor').appendTo($(eid).find(post_body));
        document.getElementById('zd-editor').style.display = 'block';
        switch (a) {
            case "reply":
                if (mode.innerHTML == edit_text) {
                    textarea.value = '';
                    editor.mode.value = 'reply';
                    editor.p.value = '';
                }
                mode.innerHTML = reply_text;
                break;
            case "quote":
                mode.innerHTML = quote_text;
                textarea.value = loading_text;
                break;
            case "edit":
                mode.innerHTML = edit_text;
                editor.mode.value = 'editpost';
                editor.p.value = b;
                textarea.value = loading_text;
                break;
            case "preview":
                mode.innerHTML = preview_text;
                break;
        }
    },
    popup: function (a, b) {
        $('#'  b).siblings().hide();
        x = document.getElementById(b);
        if (x.style.display == 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }
        a.getAttribute('id') == null ? a.id = 'editor-button-active' : a.removeAttribute('id');
        switch (b) {
            case "zd-color":
                var c = '<table cellspacing="0" id="ddcbcolors">';
                var colors = new Array('00', '33', '66', '99', 'CC', 'FF');
                for (i = 5; i >= 0; i--) {
                    c = c  '<tr>';
                    for (j = 5; j >= 0; j--) {
                        for (k = 5; k >= 0; k--) {
                            var col = colors[j]  colors[i]  colors[k];
                            c = c  '<td style="background: #'  col  '" title="'  col  '"><div style="background:#'  col  '" onclick="zeditor.add(\'[color=#'  col  ']\', \'[/color]\');zeditor.color(this, \'hide\')" onmouseover="zeditor.color(this)"></div></td>';
                        }
                    }
                    c = c  '</tr>';
                }
                document.getElementById('zd-color').innerHTML = c  '</table>';
                break;
            case "zd-smiley":
                smiley = document.getElementById('zd-smiley');
                if (smiley.innerHTML == '') {
                    $(smiley).load('/smilies.forum?mode=smilies_frame a', function () {
                        this.innerHTML = this.innerHTML.replace(/emoticonp/g, 'zeditor.smiley');
                    });
                }
                break;
        }
    },
    color: function (a, b) {
        document.getElementById('editor-color').setAttribute('style', a.getAttribute("style"));
        if (b == 'hide') {
            document.getElementById('zd-color').setAttribute('style', 'display:none');
        }
    },
    smiley: function (a) {
        textarea.value  = a;
        textarea.focus();
        document.getElementById('zd-smiley').style.display = 'none';
    },
    tag: function (a) {
        version == 'punbb' || version == 'phpbb3' ? (version == 'punbb' ? (b = custom_tag, c = custom_tag1) : (b = '.post', c = '.postprofile')) : (b = '.post.online', c = '.postprofile-details.postdetails');
        var e = $(a).parents(b).find(c  ' a[href^="/u"]').has('span');
        document.getElementById('editor-textarea').value  = '[url='  location.host  $(e).attr('href')  ']'  $(e).text()  '[/url]';
    },

};
document.write('<div id="zd-editor" style="display:none"><div id="zd-edit" style="display:none"></div><form id="zd-editor-form" name="zd-editor" method="post" action="/post"><div id="editor-top"><div id="editor-tool"><a onclick="zeditor.add(\'[b]\',\'[/b]\')" class="editor-button-outer" title="Bold"><span id="editor-bold" class="editor-button">&nbsp;</span></a><a onclick="zeditor.add(\'[i]\',\'[/i]\')"  class="editor-button-outer" title="Italic"><span id="editor-italic" class="editor-button">&nbsp;</span></a><a onclick="zeditor.add(\'[u]\',\'[/u]\')"  class="editor-button-outer" title="Underline"><span id="editor-underline" class="editor-button">&nbsp;</span></a><a onclick="zeditor.add(\'[strike]\',\'[/strike]\')"  class="editor-button-outer" title="Strike"><span id="editor-strike" class="editor-button">&nbsp;</span></a>
<a class="editor-button-outer" title="Color" onclick="zeditor.popup(this, \'zd-color\')"><span id="editor-color" class="editor-button"></span></a>
<a class="editor-button-outer" title="Color" onclick="zeditor.popup(this, \'zd-smiley\')"><span id="editor-smiley" class="editor-button"></span></a><a class="editor-button-outer" title="Tag" onclick="zeditor.tag(this)"><span id="editor-tag" class="editor-button"></span></a><div><div id="zd-color" style="display:none"></div><div id="zd-smiley" style="display:none"></div></div></div></div><div id="outer-preview"><div id="zd-preview" ondblclick="$(this).hide()"></div><textarea name="message" id="editor-textarea" style="position: relative; width: 100%; height: 98%;"></textarea></div><div id="editor-data"><input type="hidden" value="" name="attach_sig"><input type="hidden" value="reply" name="mode"><input type="hidden" value="" name="tid"><input type="hidden" value="" name="t"><input type="hidden" value="" name="lt"><input type="hidden" value="" name="notify"><input type="hidden" value="" name="p"></div><div id="editor-post-tool"><div id="editor-post-button"><input onclick="zeditor.preview();return false" id="editor-preview-button" value="Preview" name="preview" type="submit" /><input type="submit" value="Send" name="post"  id="editor-send-button" onclick="zeditor.post();return false"></div><div id="editor-mode"></div></div></form></div>');

$(function () {
    zeditor.ready();
});

Tuỳ chỉnh phiên bản forum của bạn
Vào javascript vừa tạo -> Tìm var version -> Thay giá trị bằng phiên bản forum của bạn (mặc định: punbb)
Nếu bạn muốn 'việt hoá' thì thay giá trị của var reply_text, var edit_text, var quote_text, var preview_text, var reply_button, var loading_text bằng từ mà bạn muốn (có hỗ trợ html).
Đổi giá trị của var version, var post, var post_body, var post_inbody nếu bạn chuyển phiên bản.
Giá trị của var reply_button là nội dụng của nút reply (có hỗ trợ html).
Nick phải có màu thì chức năng Tag mới hoạt động
- Display -> Pictures and Colors -> Colors -> Css Stylesheet

Code:
/* Editor ------*/
#ddcbcolors div {
  height: 12px;
  width: 12px;
  cursor: pointer;
}

#zd-editor {
  background-color: #EFEFEF;
  border-radius: 5px 5px 5px 5px;
  margin: 15px 40px 15px;
  padding: 20px 10px;
}

#outer-preview {
  position: relative;
  height: 200px;
  width: 100%;
}

#editor-mode, #editor-post-button {
  display: inline-block;
}

#editor-mode {
  float: right;
}

#zd-preview {
  background-color: #CCCCCC;
  border: 1px solid #6EA2C7;
  cursor: pointer;
  display: none;
  height: 100%;
  margin-right: auto;
  margin-top: 3px;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
  padding: 1px;
  position: absolute;
  width: 100%;
  z-index: 9;
}

#editor-post-tool {
  margin-top: 10px;
}

#zd-editor textarea {
  width: 100%;
  resize: none;
  height: 200px;
}

.editor-button-outer:hover, #editor-button-active {
  background-color: #DCDCDC;
  border-radius: 4px;
}

.editor-button {
  background-image: url("http://glue.readthedocs.org/en/latest/_images/famfamfam1.png");
  background-repeat: no-repeat;
  height: 16px;
  margin-top: 1px;
  width: 16px;
  display: block;
}

#zd-smiley, #zd-color {
  background-color: #EFEFEF;
  border: 1px solid #6EA2C7;
  margin-top: 35px;
  max-height: 150px;
  max-width: 500px;
  overflow: auto;
  padding: 5px;
  position: absolute;
  z-index: 999;
  margin-left: 5px;
}

#zd-smiley {
  margin-left: 130px;
}

.editor-button-outer {
  display: block;
  float: left;
  padding: 4px;
  margin-bottom: 4px;
  cursor: pointer;
}

#editor-color {
  background-image: none !important;
  background-color: #000;
  border-radius: 4px;
}

#editor-bold {
  background-position: -129px -144px;
}

#editor-italic {
  background-position: -143px -80px;
}

#editor-underline {
  background-position: -128px -64px;
}

#editor-strike {
  background-position: -128px -112px;
}

#editor-smiley {
  background-position: -224px -384px;
}

#editor-tag {
  background-position: -33px -96px;
}

#editor-top {
  margin-bottom: 4px;
  height: 20px;
  margin-top: -15px;
}

#quick_reply {
  display: none !important;
}

Hướng dẫn cho skin fmvi ver3:
Làm tất cả bước ở trên -> Vào sửa lại script
Sửa giá trị của những variable sau đây: (Giá trị là thành phần ở giữa 2 dấu ')
var custom_tag1 -> .writer
var post -> .options-button
Vào Display -> Templates -> viewtopic_body -> tìm và xoá

Code:
<div id="_comments" class="main-content blog_comments" style="margin-top: 10px;">
<div class="post">
<div class="blog_comment-avatar repZ">
<img alt="" src="http://r12.imgfast.net/users/1215/11/75/00/avatars/27-90.jpg">
</div>
<div class="postbody">
<p class="nonchange" style="color:#000">
Chỉ chấp nhận bình luận bằng tiếng Việt có dấu, những bình luận sai
<a href="/h163-noi-quy-fmvi#rules" target="_blank" style="color:#216A8C">qui định</a>
sẽ bị xóa. Bình luận phải dài hơn
<span id="gioihanrep" style="color:red">20</span>
ký tự.
<span class="closeFMvi_like" onclick="$('#_comments').hide()" style="margin-right: 7px"></span>
</p>
<span class="comment-content">
<div class="post-entry" style="padding: 0; border: 1px solid #DDD;">
<div class="entry-content" style="padding-bottom: 0;width: 765px;position: relative;">
<textarea id="noidungQR" style="font-size: 1.2em; width: 765px; border: 0px; margin: 0px; height: 51px; " rows="3" cols="95"></textarea>
</div>
<input type="submit" style="position: absolute; top: 48px; right: 20px;" value="Send" name="post" onclick="replyfmvi()">
</div>
</span>
<span class="dialog"></span>
</div>
</div>
</div>

Updates:


  • 15-01-2013

    • Bắt đầu phát triển lại dự án bỏ dở vào hè 2012

  • 17-01-2013

    • Thêm chức năng smiley và color
    • Nâng cấp chức năng preview
    • Rút gọn script và css...

  • 21-01-2013

    • Rút gọn 5% của script
    • Viết lại chức năng preview

  • 22-01-2013

    • Thêm một vài functions mới
    • Sửa lại css cho chức năng preview
    • Thêm hỗ trợ cho phpbb3 và invision
    • Thêm vào dòng script cho phpbb3 và invision. Rút gọn tới mức có thể @_@

  • 25-01-2013

    • Phát hảnh phiên bản 1.0
    • Rút gọn if statement

  • 26-01-2013

    • Cập nhật phiên bản hotfix vì quên thêm nút reply zEditor 1.1 3494493907
    • Cập nhật phiên bản 1.1
    • Sửa css cho smiley và chọn màu không cho 'nằm' trên editor nữa
    • Thêm variable loading_text
    • Chọn màu và smiley sẽ có hiệu ứng :hover khi đang được chọn
    • Rê chuột vào màu sẽ hiện lên mã màu và đổi màu nút chọn màu
    • Thêm function color

  • 01-02-2013

    • Thêm chức năng giới hạn ký tự
    • Thêm var word_count
    • Sựa lại chức năng tạo hiệu ứng :hover



Bình luận/ Gợi ý: Tại đây
Báo lỗi: http://www.fmvi.vn/t864-bao-loi-zeditor
Hỗ trợ: http://www.fmvi.vn/t865-moi-thac-mac-ve-zeditor

Được viết bởi Zero © FMVI.VN

Khi share, nhớ kèm theo tên tác giả và link bài viết. Thanks.

_________________
Quan nhất thời, Dân vạn đại !
      

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Quyền hạn của bạn

Bạn không có quyền trả lời bài viết
free counters



  • Đoàn Ngọc Khánh

    mobile phone 098 376 5575


    Đỗ Quang Thảo

    mobile phone 090 301 9666


    Nguyễn Văn Của

    mobile phone 090 372 1401


    IP address signature
    Free forum | ©phpBB | Free forum support | Liên hệ | Báo cáo lạm dụng | Thảo luận mới nhất