Bài gửi
Tiền
ThanksThiện Pk
![[code] zEditor 1.4 Empty](https://2img.net/i/empty.gif)
[code] zEditor 1.4
on 14/12/2013Thiện Pk
loading...
![[code] zEditor 1.4 Zzhd](https://2img.net/r/ihimizer/img690/4538/zzhd.jpg)
Tác giả: Zero
Quyền lợi: Bạn được quyền sử dụng miễn phí mod nếu bạn coi trọng bản quyền
Phiên bản: 1.4
Phiên bản cũ: https://code.google.com/p/z-editor/
Chức năng:
- Rất nhẹ (~8kb)
- Hiện dưới mỗi bài viết
- 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
- 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
- Chỉnh sửa dễ dàng 100% cho giao diện và thành phần
- Những bbcode đang có: Bold, Italic, Underline, Strike, Color, Smilies, Tag
- Không phụ thuộc vào quickreply của SCeditor
- Chỉnh sửa thông tin và buttons dễ dàng
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)
Changelog
- Code:
----------------------------- 1.3 --------------------------------
Bỏ variable reply_text, edit_text, quote_text, preview_text, reply_button, và loading_text
Thêm một object mới tên lang
Bỏ hỗ trợ nút multi-quote vì không cần thiết
Thêm hỗ trợ language cho chức năng tag
Thêm hiệu ứng đóng thanh công cụ khi sử dụng preview
Giao diện mới
Nút Preview sẽ chuyển thành Close và thanh toolbar sẽ thu nhỏ khi chức năng preview đang được sử dụng
Thêm bbcode [tag]
Hỗ trợ preview cho bbcode [tag]
---------------------------- 1.3.1 -------------------------------
Sửa css và js cho phù hợp với chrome
Thêm function mới preview_close()
Sửa lỗi không tự động hiện bài mới trên forum tiếng việt
---------------------------- 1.3.2 -------------------------------
Sửa lỗi nút chọn màu chỉ hoạt động cho 1 vài người dùng
----------------------------- 1.4 --------------------------------
Sửa chức năng edit không hoạt động trên 1 vài forum
Nâng cấp hàm zeditor.popup()
Thêm hàm zeditor.advance()
Thêm chức năng upload
Thêm chức năng advanced editor
Hướng dẫn:
[1] Tạo 1 js mới, cho cái bên dưới vào, đặt ở In all the topics
- Code:
- Code:
var version = 'punbb'; // punbb or phpbb3 or invision
var lang = {
reply: "Mode: Reply",
edit: "Mode: Edit",
quote: "Mode: Quote",
preview: "Mode: Preview",
loading: "Loading...",
flood_message: "You cannot send 2 posts at the same. Please wait",
error_message: "An unexpected error has occurred. Please refresh the page",
notify_message: "Would you like to notify",
reply_button: "Reply",
preview_button: "Preview",
advance_button: "Advanced",
close_button: "Close",
bold_button: "Bold",
italic_button: "Italic",
strike_button: "Strike",
underline_button: "Underline",
color_button: "Color",
smiley_button: "Smilies",
upload_button: "Upload",
tag_button: "Tag"
};
var editor;
var editor_mode;
var editor_post;
var editor_message;
var textarea;
var post_url;
var zeditor = {
ready: function () {
editor_post = '.post';
if (version == 'punbb') {
editor_message = '.zeditor-message';
editor_preview = '.entry-content';
editor_options = '.post-options'
}
if (version == 'phpbb3') {
editor_preview = editor_message = '.content';
editor_options = '.profile-icons'
}
if (version == 'invision') {
editor_preview = editor_message = '.post-entry';
editor_options = '.posting-icons'
}
textarea = document.getElementById('editor-textarea');
qreply = document.getElementById('quick_reply');
$('.h3:contains("Quick reply:")').remove();
editor = document.getElementById('ze-editor-form');
editor_mode = document.getElementById('editor-mode');
zeditor.button(editor_options);
for (var a = $(editor_message), i = 0, l = a.length; i < l; i++) {
a[i].innerHTML = zeditor.replace(a[i].innerHTML)
}
},
load: function () {
$(editor_options + ' a[href*="quote"], ' + editor_options + ' a[href*="editpost"]').click(function (a) {
if (this.href.indexOf('quote') > 0) {
post_url = $('a[href^="/post?t="]').first().attr("href")
} else {
post_url = this.href
}
$('#ze-edit').load(this.href + ' #text_editor_textarea', function () {
textarea.value = document.getElementById('ze-edit').firstChild.value;
textarea.focus();
zeditor.loading('off')
});
a.preventDefault();
zeditor.loading('on')
})
},
button: function (where) {
$(where).each(function () {
$(this).find('a[href*="quote"]').attr('onclick', 'zeditor.start(\'quote\', this)').before('<a class="pbutton" href="#reply" onclick="zeditor.start(\'reply\', this)">' + lang.reply_button + '</a>');
$(this).find('a[href*="editpost"]').attr('onclick', 'zeditor.start(\'edit\', this)')
});
zeditor.load()
},
start: function (a, dom) {
$('#ze-editor').appendTo($(dom).parents(editor_post).find('.zeditor'));
document.getElementById('ze-editor').style.display = 'block';
switch (a) {
case "reply":
post_url = $('a[href^="/post?t="]').first().attr("href");
editor_mode.innerHTML = lang.reply;
break;
case "quote":
editor_mode.innerHTML = lang.quote;
break;
case "edit":
editor_mode.innerHTML = lang.edit;
break
}
},
add: function (x, y) {
textarea.focus();
if (typeof (textarea) != "undefined") {
var longueur = parseInt(textarea.value.length);
var selStart = textarea.selectionStart;
var selEnd = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, selStart) + x + textarea.value.substring(selStart, selEnd) + y + textarea.value.substring(selEnd, longueur)
} else textarea.value += x + y;
textarea.focus()
},
preview: function (a) {
preview = document.getElementById('ze-preview');
if (preview.style.display == 'block') {
preview.style.display = 'none';
document.getElementById('editor-top').setAttribute('style', 'height:38px; transform: scaleY(1);-webkit-transform: scaleY(1)');
a.innerHTML = lang.preview_button
} else {
a.innerHTML = lang.close_button;
document.getElementById('editor-top').setAttribute('style', 'height:3px; transform: scaleY(0);-webkit-transform: scaleY(0)');
$.post(post_url, {
"message": textarea.value,
"preview": "Preview",
}, function (data) {
preview.style.display = 'block';
preview.innerHTML = zeditor.replace($(data).find(editor_preview).html())
})
}
},
preview_close: function (a) {
$(a).hide();
document.getElementById('editor-preview-button').innerHTML = lang.preview_button;
document.getElementById('editor-top').setAttribute('height:38px; transform: scaleY(1);-webkit-transform:scaleY(1)');
},
post: function () {
$.post(post_url, {
"message": textarea.value,
"post": "Send",
}, function (data) {
var en = "Your message has been entered successfully";
vi = "Bài của bạn đã được chuyển";
b = (data.indexOf(en) < 0) ? vi : en;
index = data.indexOf(b);
if (data.indexOf("Flood control") > 0) {
alert(lang.flood_message)
} else if (data.indexOf('A new message') > 0) {
$.post('/post', $(data).find("form[name='post']").serialize() + '&post=1', function (c) {
(index < 0) ? alert(lang.error_message) : zeditor.newpost($(c).find('p:contains("' + b + '") a:first').attr('href'))
})
} else {
(index < 0) ? alert(lang.error_message) : zeditor.newpost($(data).find('p:contains("' + b + '") a:first').attr('href'))
}
})
},
newpost: function (a) {
var b = a.split('#')[1];
document.getElementById('ze-editor').style.display = 'none';
if (editor_mode.innerHTML == lang.reply || editor_mode.innerHTML == lang.quote) {
$('<div class="zeditor-new"></div>').insertAfter(editor_post + ':last').load(a + " #p" + b, function () {
zeditor.button(editor_options + ':last');
$('.zeditor-new').hide().fadeIn('2000')
})
}
if (editor_mode.innerHTML == lang.edit) {
$('#ze-editor').parents(editor_post).find(editor_message).load(a + ' #p' + b + ' ' + editor_message + ' > *', function () {
$('#ze-editor').parents(editor_post).find(editor_message).hide().fadeIn('slow');
zeditor.button(editor_options + ':last')
})
}
textarea.value = ''
},
popup: function (a, b) {
$('#' + b).siblings().hide();
$('#' + b).toggle();
y = document.getElementById('editor-button-active');
y == null ? (a.id = 'editor-button-active') : ($('.editor-button-outer').removeAttr('id'), (a.id = 'editor-button-active') ? (a.removeAttribute('id')) : (a.id = 'editor-button-active'));
switch (b) {
case "ze-color":
var c = '<table cellspacing="0" id="ze-color-inner">';
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)"></div></td>'
}
}
c = c + '</tr>'
}
document.getElementById('ze-color').innerHTML = c + '</table>';
break;
case "ze-smiley":
smiley = document.getElementById('ze-smiley');
if (smiley.innerHTML == '') {
$(smiley).load('/smilies.forum?mode=smilies_frame', function () {
this.innerHTML = this.innerHTML.replace(/alt=\"(.*?)\"/g, 'onclick="zeditor.smiley(\'$1\')"')
})
}
break;
}
},
color: function (a) {
document.getElementById('ze-color').setAttribute('style', 'display:none')
},
smiley: function (a) {
textarea.value += a;
textarea.focus();
document.getElementById('ze-smiley').style.display = 'none'
},
tag: function (a) {
var e = $(a).parents(editor_post).find('a[href^="/u"]').eq(1).text();
document.getElementById('editor-textarea').value += '[tag]' + e + '[/tag]';
if (e.length > 0) {
if (confirm(lang.notify_message + ' ' + e + '?') == true) {
$.post('/privmsg?mode=post&post=1', {
'username[]': e,
'subject': 'You have been mentioned by ' + e,
'message': 'You have been mentioned in the following post - [url=' + window.location + ']' + document.title + '[/url]',
'post': 'Send',
'folder': 'inbox'
});
alert('Done')
}
}
},
replace: function (a) {
return a.replace(/\[tag\](.*?)\[\/tag\]/g, function (a, b) {
return '<a href="/profile?mode=viewprofile&u=' + b.replace(/ /g, "+") + '">@' + b + '</a>'
})
},
loading: function (a) {
b = document.getElementById('editor-loading');
a == 'on' ? (b.style.display = '') : (b.style.display = 'none')
},
advance: function () {
location.href = $('a[href^="/post?t="]').first().attr("href");
}
};
document.write('<div id="ze-editor" style="display:none"><div id="ze-edit" style="display:none"></div><form id="ze-editor-form" name="ze-editor" method="post" action="/post"><div id="editor-top"><div id="editor-tool"><span onclick="zeditor.add(\'[b]\',\'[/b]\')" class="editor-button-outer">' + lang.bold_button + '</span><span onclick="zeditor.add(\'[i]\',\'[/i]\')" class="editor-button-outer">' + lang.italic_button + '</span><span onclick="zeditor.add(\'[u]\',\'[/u]\')" class="editor-button-outer">' + lang.underline_button + '</span><span onclick="zeditor.add(\'[strike]\',\'[/strike]\')" class="editor-button-outer">' + lang.strike_button + '</span><span class="editor-button-outer" onclick="zeditor.popup(this, \'ze-color\')">' + lang.color_button + '</span><span class="editor-button-outer" onclick="zeditor.popup(this, \'ze-smiley\')">' + lang.smiley_button + '</span><span class="editor-button-outer" onclick="zeditor.popup(this, \'ze-upload\')">' + lang.upload_button + '</span><span class="editor-button-outer" onclick="zeditor.tag(this)">' + lang.tag_button + '</span></div><div id="editor-copyright"><a href="http://devs.forumvi.com/t88-topic">zEditor 1.4</a></div></div><div id="ze-popups"><div id="ze-color"></div><div id="ze-smiley"></div><div id="ze-upload"><iframe src="http://imageshack.us/syndicate/widget.php" frameborder="0" scrolling="no"></iframe></div></div><div id="outer-preview"><div id="ze-preview" ondblclick="zeditor.preview_close(this)"></div><div id="editor-loading" style="display: none"><img src="http://i11.servimg.com/u/f11/16/80/27/29/ajax-l10.gif" /><br>' + lang.loading + '</div><textarea name="message" id="editor-textarea"></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="lt"><input type="hidden" value="1" name="notify"></div><div id="editor-post-tool"><div id="editor-post-button"><span id="editor-send-button" onclick="zeditor.post()">Send</span><span onclick="zeditor.preview(this)" id="editor-preview-button">' + lang.preview_button + '</span><span onclick="zeditor.advance()">' + lang.advance_button + '</span></div><div id="editor-mode"></div></div></form></div>');
$(function () {
zeditor.ready()
});
[3] Vào CSS, cho cái bên dưới vào
- CSS:
- Code:
#ze-editor {
-moz-user-select: none;
-webkit-user-select: none;
background: linear-gradient(#F5F5F5, #CFD1CF);
border: 1px solid #B6B6B6;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
font-family: Verdana;
margin: 20px auto;
padding: 5px 10px;
width: 65%;
}
#editor-top {
height: 38px;
display: inline-block;
position: relative;
transition: 1s;
margin-top: 4px;
width: 100%;
}
#outer-preview {
position: relative;
height: 200px;
width: 100%;
}
#editor-mode, #editor-post-button {
display: inline-block;
}
#editor-mode {
float: right;
font-weight: bold;
color: #FFF;
text-shadow: -1px -1px 0 #B6B6B6, 1px -1px 0 #B6B6B6, -1px 1px 0 #B6B6B6, 1px 1px 0 #B6B6B6;
}
#ze-preview {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
cursor: pointer;
height: 100%;
overflow: auto;
padding: 0 4px;
position: absolute;
width: calc(100% - 8px);
z-index: 9;
display: none;
}
#ze-copyright {
float: right;
margin: 4px;
padding: 4px;
}
#editor-post-tool {
margin-top: 10px;
}
#editor-textarea {
border: 1px solid #B6B6B6;
height: 100%;
position: relative;
resize: none;
width: 100%;
}
.editor-button {
margin-top: 1px;
display: block;
}
#ze-smiley, #ze-color, #ze-upload {
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
margin: 25px 0 0 20px;
max-height: 125px;
max-width: 500px;
padding: 10px;
position: absolute;
z-index: 999;
display: none;
}
#ze-smiley {
overflow: auto
}
#ze-smiley {
margin-left: 130px;
}
#ze-color-inner div {
height: 12px;
width: 12px;
cursor: pointer;
}
.editor-button-outer, #editor-post-button span {
background: linear-gradient(#FFFFFF, #E4E4E4);
border: 1px solid #A6A6A6;
border-radius: 4px;
box-shadow: 0 10px 15px #FFFFFF inset;
color: #504F4F !important;
cursor: pointer;
display: block;
float: left;
margin: 4px;
padding: 4px;
text-shadow: 0 2px 0 #E9E9E9;
}
.editor-button-outer:hover, #editor-post-button span:hover {
color: #000 !important;
}
#quick_reply {
display: none !important;
}
#editor-loading {
background: #DCE1DE;
border-radius: 4px;
color: #FFFFFF;
font-weight: bold;
left: 50%;
margin-left: -40px;
margin-top: 50px;
padding: 5px 15px;
position: absolute;
text-align: center;
text-shadow: -1px -1px 0 #B6B6B6, 1px -1px 0 #B6B6B6, -1px 1px 0 #B6B6B6, 1px 1px 0 #B6B6B6;
z-index: 10;
border: 1px solid #B6B6B6;
}
#editor-copyright {
float: right;
margin: 4px;
padding: 4px;
}
#editor-copyright a {
text-shadow: -1px -1px 0 #B6B6B6, 1px -1px 0 #B6B6B6, -1px 1px 0 #B6B6B6, 1px 1px 0 #B6B6B6 !important;
color: #FFFFFF !important;
}
Lưu ý: Tất cả những hướng dẫn dành cho punbb ở dưới được dựa vào template mặc định của punbb. Mấy bạn nên backup viewtopic_body trước khi thực hiện.
[5.0] Vào viewtopic_body tìm {postrow.displayed.MESSAGE}, thay thành
- Code:
<span class="zeditor-message"><span>{postrow.displayed.MESSAGE}</span></span>
- Code:
<div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}" id="p{postrow.displayed.U_POST_ID}">
[5.3] Tìm <!-- BEGIN switch_signature -->, trên dòng đó có dòng </div>, cho code dưới đây ở trên dòng đó
- Code:
<div class="zeditor"></div>
[5.5] Đảm bảo mấy buttons của bài viết ({postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}) nằm trong <div class="post-options"
TIP:
- var lang chứa những từ được sử dụng trong editor, bạn chỉ cần đổi giá trị của nó thành từ mà bạn muốn hoặc ảnh. Ví dụ, mình muốn đổi nút Smilies thành nút có ảnh vá có tên "Hình vui" thì mình sẽ đổi smiley_button: "Smilies", thành smiley_button: "<img src='https://2img.net/i/fa/i/smiles/icon_biggrin.png' title='Hình vui' />",
Viết bởi Zero
NgUÔN: devs
Cảm ơn bạn đã bình chọn ! 
No Comment.