First topic message reminder :
Lý do mình làm OldEditor này là vì SCEditor chứa quá nhiều lỗi định dạng văn bản và BBcode, điều này đặc biệt khó chịu với người thường xuyên viết TUT như mình, mỗi lần định cập nhật lại phải căn chỉnh lại từng dòng một.
Vì bộ bbcode cũ của forumotion dùng vB_Editor bị xóa mất một số js quan trọng, hơn nữa nó đã khá lỗi thời, nên mình dùng plugin bbCode control thiết kế bởi subBlue.
(Soạn thảo nhanh)
(Soạn thảo đầy đủ)
Một số Plugin sử dụng trong OldEditor:
Lần lượt tạo các file javascript sau.
Chú ý:
Không check mục Placement.
Nhấn Download Raw để lấy code.
1. [OldEditor] lang_vi
http://pastebin.com/xbZJgdyC
2. [OldEditor] Colpick + smileyFB + autoSave + zzImgUr + tab + fixTable
http://pastebin.com/qLJjz7Qg
Chú ý:
Thay <Client ID> (dòng 297) bằng Client ID tạo ở https://api.imgur.com/oauth2/addclient
3. [OldEditor] smileyFB
http://pastebin.com/yyXyZBAT
>> QLTT >> overall_header:
Tìm:
>> QLTT >> viewtopic_body:
Tìm:
http://pastebin.com/yEeDnpT5
Chú ý:
Thay <JS-2> (dòng 146) bằng file javascript 2 tạo ở Bước 1.
Thay <JS-3> (dòng 149) bằng file javascript 3 tạo ở Bước 1.
>> Post & Private Messages >> posting_body:
Tìm:
http://pastebin.com/w22QTcPk
Tìm và xóa:
Tìm:
Thay <JS-2> (dòng 1) bằng file javascript 2 tạo ở Bước 1.
Unauthorize unofficial forms to post messages and private messages on the forum : No
OldEditor - Editor thuần BBcode
Lý do mình làm OldEditor này là vì SCEditor chứa quá nhiều lỗi định dạng văn bản và BBcode, điều này đặc biệt khó chịu với người thường xuyên viết TUT như mình, mỗi lần định cập nhật lại phải căn chỉnh lại từng dòng một.
Vì bộ bbcode cũ của forumotion dùng vB_Editor bị xóa mất một số js quan trọng, hơn nữa nó đã khá lỗi thời, nên mình dùng plugin bbCode control thiết kế bởi subBlue.
Chức năng
Ưu điểm:- Không bị cuộn lên khi tạo BBcode.
- Giữ vùng chọn sau khi tạo BBcode nên có thể dùng nhiều BBcode liên tục mà không cần chọn lại.
- Khi chưa chọn văn bản nó sẽ xuất 1 cặp tag, thay vì từng tag ở vB_Editor.
- Hàm insert_text để chèn chuỗi vào giữa văn bản (vB_Editor không có).
Demo
(Soạn thảo nhanh)
(Soạn thảo đầy đủ)
Một số Plugin sử dụng trong OldEditor:
- colpick Color Picker: http://colpick.com/plugin
- zzEmoFb ver 0.1: http://www.devs.cf/
- zzbaivongSave ver 0.1: http://www.devs.cf/
- zzImgUr ver 1.6: http://www.devs.cf/
- Thông tin thêm:
- Code gốc của bbCode control: pastebin.com/zUyPYDjh
Mình đã lược bỏ một số hàm không sử dụng, viết lại một số BBcode dùng trong forumotion như helpline, video, table, flash, ...
Code sau khi rút gọn và chỉnh sửa: pastebin.com/4vHkqMEJ
Hướng dẫn
Bước 1
ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascriptLần lượt tạo các file javascript sau.
Chú ý:
Không check mục Placement.
Nhấn Download Raw để lấy code.
1. [OldEditor] lang_vi
http://pastebin.com/xbZJgdyC
2. [OldEditor] Colpick + smileyFB + autoSave + zzImgUr + tab + fixTable
http://pastebin.com/qLJjz7Qg
Chú ý:
Thay <Client ID> (dòng 297) bằng Client ID tạo ở https://api.imgur.com/oauth2/addclient
- Hướng dẫn đăng ký Client ID:
- Application name: Đặt tên app tùy ý
- Authorization type: Chọn dòng thứ 2 hoặc 3
- Authorization callback URL: /
- Application website: Tên miền của diễn đàn bạn
- Email: Điền email của bạn
- Description: Ghi chú cho app
- Application name: Đặt tên app tùy ý
3. [OldEditor] smileyFB
http://pastebin.com/yyXyZBAT
Bước 2
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet:- Code:
/* OldEditor Color picker by Colpick */
.colpick{position:absolute;width:346px;height:170px;overflow:hidden;display:none;font-family:Arial, Helvetica, sans-serif;background:#ebebeb;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
.colpick_color{position:absolute;left:10px;top:7px;width:156px;height:156px;overflow:hidden;outline:1px solid #aaa;cursor:crosshair}
.colpick_color_overlay1{position:absolute;left:0;top:0;width:156px;height:156px;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff',endColorstr='#00ffffff');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')";background:linear-gradient(to right,rgba(255,255,255,1), rgba(255,255,255,0))}
.colpick_color_overlay2{position:absolute;left:0;top:0;width:156px;height:156px;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000',endColorstr='#000000');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')";background:linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,1))}
.colpick_selector_outer{background:none;position:absolute;width:11px;height:11px;border:1px solid #000;border-radius:50%;margin:-6px 0 0 -6px}
.colpick_selector_inner{position:absolute;width:9px;height:9px;border:1px solid #FFF;border-radius:50%}
.colpick_hue{position:absolute;top:6px;left:175px;width:19px;height:158px;border:1px solid #aaa;cursor:n-resize}
.colpick_hue_arrs{position:absolute;left:-8px;width:33px;height:7px;margin:-7px 0 0}
.colpick_hue_larr{position:absolute;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:7px solid #858585}
.colpick_hue_rarr{position:absolute;right:0;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:7px solid #858585}
.colpick_new_color{position:absolute;left:207px;top:6px;width:60px;height:25px;background:red;border:1px solid #8f8f8f;border-radius:3px 0 0 3px;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px}
.colpick_current_color{position:absolute;left:277px;top:6px;width:60px;height:25px;background:red;border:1px solid #8f8f8f;border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0}
.colpick_field,.colpick_hex_field{position:absolute;height:20px;width:60px;overflow:hidden;background:#f3f3f3;color:#b8b8b8;font-size:12px;border:1px solid #bdbdbd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.colpick_rgb_r{top:40px;left:207px}
.colpick_rgb_g{top:67px;left:207px}
.colpick_rgb_b{top:94px;left:207px}
.colpick_hsb_h{top:40px;left:277px}
.colpick_hsb_s{top:67px;left:277px}
.colpick_hsb_b{top:94px;left:277px}
.colpick_hex_field{width:68px;left:207px;top:121px}
.colpick_focus{border-color:#999}
.colpick_field_letter{position:absolute;z-index:10;width:12px;height:20px;line-height:20px;padding-left:4px;background:#efefef;border-right:1px solid #bdbdbd;font-weight:700;color:#777}
.colpick_field input,.colpick_hex_field input{position:absolute;right:11px;height:20px;line-height:20px;background:transparent;border:none;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#555;text-align:right;outline:none;margin:0;padding:0}
.colpick_hex_field input{right:4px}
.colpick_field_arrs{position:absolute;top:0;right:0;width:9px;height:21px;cursor:n-resize}
.colpick_field_uarr{position:absolute;top:5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid #959595}
.colpick_field_darr{position:absolute;bottom:5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #959595}
.colpick_submit{position:absolute;left:207px;top:149px;width:130px;height:22px;line-height:22px;background:#efefef;text-align:center;color:#555;font-size:12px;font-weight:700;border:1px solid #bdbdbd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.colpick_submit:hover{background:#f3f3f3;cursor:pointer;border-color:#999}
.colpick_full_ns .colpick_new_color{width:130px;height:25px}
.colpick_rgbhex{width:282px}
.colpick_rgbhex .colpick_field,.colpick_rgbhex .colpick_submit{width:68px}
.colpick_rgbhex .colpick_new_color{width:34px;border-right:none}
.colpick_rgbhex .colpick_current_color{width:34px;left:240px;border-left:none}
.colpick_rgbhex_ns .colpick_new_color{width:68px;border:1px solid #8f8f8f}
.colpick_hex{width:203px;height:201px}
.colpick_hex .colpick_hex_field{width:72px;height:25px;top:168px;left:80px}
.colpick_hex .colpick_hex_field div,.colpick_hex .colpick_hex_field input{height:25px;line-height:25px}
.colpick_hex .colpick_new_color{left:9px;top:168px;width:30px;border-right:none}
.colpick_hex .colpick_current_color{left:39px;top:168px;width:30px;border-left:none}
.colpick_hex .colpick_submit{left:164px;top:168px;width:30px;height:25px;line-height:25px}
.colpick_hex_ns .colpick_hex_field{width:80px}
.colpick_hex_ns .colpick_new_color{width:60px;border:1px solid #8f8f8f}
.colpick_dark{background:#161616;border-color:#2a2a2a}
.colpick_dark .colpick_color{outline-color:#333}
.colpick_dark .colpick_hue{border-color:#555}
.colpick_dark .colpick_field,.colpick_dark .colpick_hex_field{background:#101010;border-color:#2d2d2d}
.colpick_dark .colpick_field_letter{background:#131313;color:#696969;border-color:#2d2d2d}
.colpick_dark .colpick_field input,.colpick_dark .colpick_hex_field input{color:#7a7a7a}
.colpick_dark .colpick_field_uarr{border-bottom-color:#696969}
.colpick_dark .colpick_field_darr{border-top-color:#696969}
.colpick_dark .colpick_focus{border-color:#444}
.colpick_dark .colpick_submit{background:#131313;color:#7a7a7a;border-color:#2d2d2d}
.colpick_dark .colpick_submit:hover{background-color:#101010;border-color:#444}
.colpick_full_ns .colpick_submit,.colpick_full_ns .colpick_current_color,.colpick_rgbhex .colpick_hsb_h,.colpick_rgbhex .colpick_hsb_s,.colpick_rgbhex .colpick_hsb_b,.colpick_rgbhex_ns .colpick_submit,.colpick_rgbhex_ns .colpick_current_color,.colpick_hex .colpick_hsb_h,.colpick_hex .colpick_hsb_s,.colpick_hex .colpick_hsb_b,.colpick_hex .colpick_rgb_r,.colpick_hex .colpick_rgb_g,.colpick_hex .colpick_rgb_b,.colpick_hex_ns .colpick_submit,.colpick_hex_ns .colpick_current_color{display:none}
.colpick_full_ns .colpick_rgb_r,.colpick_full_ns .colpick_hsb_h,.colpick_rgbhex_ns .colpick_rgb_r{top:42px}
.colpick_full_ns .colpick_rgb_g,.colpick_full_ns .colpick_hsb_s,.colpick_rgbhex_ns .colpick_rgb_g{top:73px}
.colpick_full_ns .colpick_rgb_b,.colpick_full_ns .colpick_hsb_b,.colpick_rgbhex_ns .colpick_rgb_b{top:104px}
.colpick_full_ns .colpick_hex_field,.colpick_rgbhex_ns .colpick_hex_field{top:135px}
/* OldEditor zzEmoFb ver 0.1 by zzbaivong */
.smiley_FB{background:url(//i.imgur.com/9LHQNIC.png) no-repeat left top transparent;border:0 none;height:17px;width:16px}
#smiley_FB_frame p{width:236px;text-align:center;color:#999}
#smiley_FB_frame *{cursor:pointer}
/* OldEditor zzImgUr ver 1.6 by zzbaivong */
.imgur_Zzbv,.imgur_Zzbv *{box-sizing:content-box;-moz-boxsizing:content-box;-webkit-box-sizing:content-box;margin:0;padding:0}
.imgur_Zzbv{border:1px solid #333;background:#FFF;height:auto}
.imgur_Zzbv-iconError,.imgur_Zzbv-iconDevs,.imgur_Zzbv-delete,.imgur_Zzbv-remove,.imgur_Zzbv-iconSelect,.imgur_Zzbv-button div img,.imgur_Zzbv-iconComplete,.imgur_Zzbv-iconImage{display:inline-block;background:url(//i.imgur.com/e9GpBzF.png) no-repeat center center;width:16px;height:16px;float:left;margin:7px}
.imgur_Zzbv-iconDevs{background-position:0 0}
.imgur_Zzbv-iconComplete{background-position:-32px -16px}
.imgur_Zzbv-status img{margin:0!important}
.imgur_Zzbv-iconError{background-position:0 -32px}
.imgur_Zzbv-iconSelect{background-position:0 -16px}
.imgur_Zzbv-iconUpload{background-position:-16px -16px}
.imgur_Zzbv-button div img.imgur_Zzbv-iconReset{background-position:-16px 0}
.imgur_Zzbv-iconImage{background-position:-16px -32px}
.imgur_Zzbv-iconImage.imgur_Zzbv-iconUrl{background-position:-32px -32px}
.imgur_Zzbv-mode{cursor:pointer;width:30px;height:30px;float:left;background-color:#FF475D}
.imgur_Zzbv-mode.imgur_Zzbv-zzURL{background-color:#0B704C}
.imgur_Zzbv-button div{cursor:pointer;background-color:#359BED;border:0;height:30px;display:none;padding:0 10px 0 0}
.imgur_Zzbv-button .imgur_Zzbv-reset{background-color:#01686D}
.imgur_Zzbv-delete,.imgur_Zzbv-remove{background-position:-32px 0;position:absolute;right:3px;top:3px;height:16px;width:16px;text-indent:-9999px;overflow:hidden;background-color:transparent;margin:0}
.imgur_Zzbv-control{position:relative;height:30px;line-height:30px;overflow:hidden;background:#333;color:#FFF}
.imgur_Zzbv-preview{overflow-y:auto;overflow-x:hidden}
.imgur_Zzbv-li{background:#f2f2f2;list-style-type:none;position:relative;height:68px;border-top:1px solid #DDD;overflow:hidden}
.imgur_Zzbv-li:first-child{border-top:0 none}
.imgur_Zzbv-li:nth-child(2n){background:#E7E6E6}
.imgur_Zzbv-li:hover{background:#007CEE;color:#FFF}
.imgur_Zzbv-li.imgur_Zzbv-success{background:#FFFFA1}
.imgur_Zzbv-image{width:100px;overflow:hidden;position:absolute;height:100%}
.imgur_Zzbv-image img{max-width:100%;max-height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}
.imgur_Zzbv-info{position:absolute;left:100px;top:0;right:0;height:100%}
.imgur_Zzbv-info > *{white-space:nowrap}
.imgur_Zzbv-dl{line-height:34px}
.imgur_Zzbv-dl > div{height:34px}
.imgur_Zzbv-dt{float:left;width:70px;font-weight:300;font-size:12px}
.imgur_Zzbv input.imgur_Zzbv-input{width:calc(100% - 84px)!important;height:16px!important;line-height:16px!important;margin:8px 0!important;padding:0!important}
.imgur_Zzbv-status{position:absolute;width:16px;height:16px;line-height:16px;left:5px;top:7px;display:none}
.imgur_Zzbv-add{cursor:pointer;position:absolute;width:100px;height:30px;overflow:hidden;background:orange;left:30px;top:0;z-index:10}
.imgur_Zzbv-upload-URL.imgur_Zzbv-add{background:#C100E6}
.imgur_Zzbv-textSelect{position:absolute;width:100%;left:30px;height:30px;line-height:30px}
.imgur_Zzbv-choose{cursor:pointer;z-index:10;opacity:0;filter:alpha(opacity=0);-moz-opacity:0;font-size:300px;height:1000px;right:0;top:0;position:absolute}
.imgur_Zzbv-length{position:absolute;width:50px;text-align:center;top:0;left:50%;margin-left:-25px;display:none}
.imgur_Zzbv-button{position:absolute;width:90px;right:0;top:0;white-space:nowrap;z-index:10}
.imgur_Zzbv-mode:hover,.imgur_Zzbv-button div:hover,.imgur_Zzbv-add:hover{background-color:#666}
.imgur_Zzbv-devs-icon{position:absolute;right:0;top:0;line-height:16px}
.imgur_Zzbv-tip{height:24px;font-size:13px;font-style:italic;line-height:26px}
.imgur_Zzbv-tip img{vertical-align:middle;float:none;margin:-4px 0 0}
.imgur_Zzbv-wrap-progress{background:#FFF;height:3px;border:0;position:absolute;bottom:0;left:-100px;right:0}
.imgur_Zzbv-progress{height:3px;background:red;width:1px}
.imgur_Zzbv-errorURL{color:red}
.imgur_Zzbv input.imgur_Zzbv-imageURL{width:calc(100% - 31px)!important;border:0 none!important;box-shadow:0 0 0 1px #DDD!important;height:16px!important;line-height:16px!important;margin:0 0 0 1px !important}
.imgur_Zzbv-mini .imgur_Zzbv-button,.imgur_Zzbv-mini .imgur_Zzbv-add{width:30px}
.imgur_Zzbv-mini .imgur_Zzbv-info{left:10px}
.imgur_Zzbv-mini .imgur_Zzbv-wrap-progress{left:-10px}
.imgur_Zzbv-upload-URL,.imgur_Zzbv-mini .imgur_Zzbv-image{display:none}
/* OldEditor zzAutoSave ver 0.1 by zzbaivong */
#autoSave img{background:url(//i56.servimg.com/u/f56/18/59/49/93/icon_s10.png) no-repeat scroll right top rgba(0,0,0,0)}
#autoSave.have img{background-position:left top}
/* OldEditor Quickreply by zzbaivong */
.left-box{float:left}
.right-box{text-align:right}
#pun-qpost .frm-set{border:0 none;padding:0}
#quick_reply .frm-buttons{text-align:center;border-top:0 none}
.pun .main-head a.exthelp,.pun .main-head a.exthelp:link,.pun .main-head a.exthelp:visited{background-image:url(//r19.imgfast.net/users/1911/13/87/62/album/th/giupdo10.png)}
/* OldEditor Control by zzbaivong */
#textarea_content, #textarea_content *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#text_editor_controls{background:#F4F4F4;border-image:none;border-color:#DDD;border-style:solid;border-width:1px 1px 0}
#text_edit button.button2{background:#FFF!important;border:1px outset #DDD!important;margin:2px 2px 2px 1px;padding:5px 7px!important}
#text_edit button.button2:hover{border-style:inset!important}
#text_edit{text-align:left}
#text_editor_controls{white-space:normal}
.select{transition:all .2s,-webkit-transition:all .2s}
.select > a{display:block;padding:5px}
.select > a:hover{background:none repeat scroll 0 0 #DDD}
#other a{border:1px outset #DDD;display:inline-block;padding:7px}
#other a:hover{border-style:inset}
fieldset.frm-set dl dd{margin-left:0;width:100%!important}
fieldset.frm-set dl dt{float:none;text-align:left;width:100%}
.helpline{font-weight:300;margin-left:10px}
div.posting-block{float:none;margin-right:0;width:100%}
#text_editor_controls{text-align:center;margin:0}
fieldset.frm-set dl,.pun .frm dd.frm-input input,.frm-form fieldset.frm-set textarea.inputbox,.frm-form fieldset.frm-set .inputbox{width:100%!important}
.frm-form fieldset.frm-set textarea{resize:vertical;border:1px solid #DDD;padding:10px}
.select input.inputNum{width:40px!important;padding:0 5px!important}
.select input.inputText{width:300px!important;padding:0 5px!important}
Bước 3
ACP >> Display >> Templates>> QLTT >> overall_header:
Tìm:
- Code:
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
- Code:
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="<JS-1>" type="text/javascript"></script>
>> QLTT >> viewtopic_body:
Tìm:
- Code:
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
http://pastebin.com/yEeDnpT5
Chú ý:
Thay <JS-2> (dòng 146) bằng file javascript 2 tạo ở Bước 1.
Thay <JS-3> (dòng 149) bằng file javascript 3 tạo ở Bước 1.
>> Post & Private Messages >> posting_body:
Tìm:
- Code:
<div id="text_editor_select_controls">
<div class="left"><span id="helpbox" class="helpline"></span></div> <!-- must enclose helpbox in a floating div for ie bug -->
<div class="clear"></div>
<div id="textarea_content" class="posting-block" style="">
<dl>
<dt><label for="text_editor_textarea">{L_MESSAGE}</label></dt>
<dd class="frm-textarea">
<textarea id="text_editor_textarea" onclick="storeCaret(this)" rows="15" cols="9" onkeyup="storeCaret(this)" name="message" tabindex="3" onselect="storeCaret(this)" wrap="virtual" style="width:98%">{MESSAGE}</textarea><br />
</dd>
</dl>
<!-- BEGIN edit_reason -->
<br />
<dl>
<dt><label><span style="font-size:11px">{edit_reason.L_EDIT_REASON}</span></label></dt>
<dd><input class="inputbox medium" style="width:63%" type="text" name="edit_reason" value="{edit_reason.EDIT_REASON}" maxlength="255"></dd>
</dl>
<!-- END edit_reason -->
</div>
<div id="smiley-box">
<div id="smileyContainer">
{L_SMILIES_PREVIEW_NEW}
</div>
</div>
http://pastebin.com/w22QTcPk
Tìm và xóa:
- Code:
<dl>
<dt>{L_INFORMATION}</dt>
<dd>{HTML_STATUS}<br />
{BBCODE_STATUS}<br />
{SMILIES_STATUS}
</dd>
</dl>
Tìm:
- Code:
{SCEDITOR}
- Code:
<script src="<JS-2>" type="text/javascript"></script>
Thay <JS-2> (dòng 1) bằng file javascript 2 tạo ở Bước 1.
Bước 4
ACP >> QLTT >> Forum >> Security:Unauthorize unofficial forms to post messages and private messages on the forum : No