[OldEditor] Editor thuần BBcode

  Bài viết hay nhất1
First topic message reminder :

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:


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 javascript
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

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




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}
Optimize your CSS: Không

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>
Thay bằng:
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>
Thay <JS-1> (dòng 2)  bằng file javascript 1 tạo ở Bước 1

>> QLTT >> viewtopic_body:
Tìm:
Code:
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
Thay bằng:
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>
Thay bằng:
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}
Thay bằng:
Code:
<script src="<JS-2>" type="text/javascript"></script>
Chú ý:
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


Nguồn

Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất76
Nếu bạn biết cấu trúc Posting_body khác thì bạn hoàn toàn có thể tùy biến lại. Chỉ cần biết code xuất phát từ đâu và kết thúc ở đâu thì nó vẫn chạy.
  Bài viết hay nhất77
hix, xin bác giúp em chế biến code nì dc ko TT^TT e thật sự có thử chế , nh mà ko đâu ra đâu hết
Code:
<script src="{JS_DIR}extendedview.js" type="text/javascript"></script>
<ul id="navstrip" class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <li class="begin"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
   {NAV_CAT_DESC}
</ul>

{ERROR_BOX}
{POST_PREVIEW_BOX}

<!-- BEGIN switch_forum_rules -->
<div class="row1" id="forum_rules">
   <div class="maintitle">
      <h3>{L_FORUM_RULES}</h3>
   </div>
   <table>
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules post-entry">
            {RULE_MSG}
         </td>
      </tr>
   </table>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_quote_limit -->
<div class="borderwrap errorwrap">
   <div class="box-content error">
      <h4>{switch_quote_limit.L_QUOTE_LIMIT_WARNING}</h4>
   </div>
</div>
<!-- END switch_quote_limit -->

<div class="borderwrap ipbform2">
   <form action="{S_POST_ACTION}" method="post" name="post" enctype="multipart/form-data">
      <div class="maintitle">   <h3><!-- BEGIN switch_post_a -->{L_POST_A}<!-- END switch_post_a --></h3></div>

      <!-- BEGIN switch_username_select -->
      <fieldset>
         <dl>
            <dt><label>{L_USERNAME}</label></dt>
            <dd><input type="text" name="username" maxlength="25" value="{USERNAME}" /></dd>
         </dl>
      </fieldset>
      <!-- END switch_username_select -->

      <!-- BEGIN switch_reasons -->
      <fieldset>
         <dl>
            <dt><label>{L_REASON}</label></dt>
            <dd>{REASON_NEW}</dd>
         </dl>
      </fieldset>
      <!-- END switch_reasons -->

      <!-- BEGIN switch_privmsg -->
      <fieldset>
         <dl>
            <dt><label>{L_USERNAME}</label></dt>
            <dd>
               <!-- BEGIN switch_username -->
               <input type="text" name="username[]" style="margin:1px 0" value="{switch_privmsg.switch_username.USERNAME}" /><br />
               <!-- END switch_username -->
               <input type="text" id="username" name="username[]" value="{USERNAME}" style="margin:1px 0" tabindex="1" />&nbsp;
               <img id="add_username" src="{ADD_USERNAME_IMG}" class="selectHover" alt="" />&nbsp;
               <input type="button" id="find_user" value="{L_FIND_USERNAME}" class="button" />
            </dd>
         </dl>
      </fieldset>
      <!-- BEGIN switch_privmsg_friend -->
      <fieldset>
         <dl>
            <dt><label>{switch_privmsg.switch_privmsg_friend.L_OR_FRIEND}</label></dt>
            <dd>{switch_privmsg.switch_privmsg_friend.FRIEND_PM}</dd>
         </dl>
      </fieldset>
      <!-- END switch_privmsg_friend -->
      <!-- BEGIN switch_privmsg_group -->
      <fieldset>
         <dl>
            <dt><label>{switch_privmsg.switch_privmsg_group.L_OR_GROUP}</label></dt>
            <dd>{switch_privmsg.switch_privmsg_group.MASS_PM}<input type="button" value="  ?  " title="{switch_privmsg.switch_privmsg_group.MASS_PM_EXPLAIN}" class="button2" /></dd>
         </dl>
      </fieldset>
      <!-- END switch_privmsg_group -->
      <!-- END switch_privmsg -->

      <!-- BEGIN switch_subject -->
      <fieldset>
      <h3 class="subtitle">{L_POST_DETAILS}</h3>
      <dl>
         <dt><label>{L_SUBJECT}</label></dt>
         <dd>
         <input type="text" name="subject" value="{SUBJECT}" maxlength="{TOPIC_TITLE_MAXLENGTH}" title="{TOPIC_TITLE_LENGTH_EXPLAIN}" onkeypress="if (event.keyCode==13){return false}" class="posting-subject" />
         <!-- BEGIN switch_subject_color -->
            <script type="text/javascript">
            //<![CDATA[
            input = document.getElementsByName('subject');
            //]]>
            </script>
            <select name="topic_color" onchange="input[0].style.color = topic_color.value" style="margin-left:10px">
               {switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_OPTIONS}
            </select>
            <script type="text/javascript">
            //<![CDATA[
            input[0].style.color = '{switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_DEFAULT}';
            //]]>
            </script>
         <!-- END switch_subject_color -->
         </dd>
      </dl>
      </fieldset>
      <!-- END switch_subject -->

      <!-- BEGIN switch_description -->
      <dl>
         <dt><label>{L_DESCRIPTION}</label></dt>
         <dd>
            <input class="posting-subject" type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
         </dd>
      </dl>
      <!-- END switch_description -->

      {POLLBOX}

      <h3 class="subtitle">{L_POST}</h3>
      <div class="clearfix">
         <div id="smiley-box">
            <div class="smiley-container">
               <div id="smileyContainer">
               {L_SMILIES_PREVIEW_NEW}
               </div>
            </div>
            <div class="textarea-info">
            {HTML_STATUS}<br />
            {BBCODE_STATUS}<br />
            {SMILIES_STATUS}
            </div>
         </div>
         <div class="messaging-box">
            <div><span id="helpbox" class="helpline"></span></div> <!-- must enclose helpbox in a floating div for ie bug -->
            <div id="textarea_content" class="posting-block">
               <textarea id="text_editor_textarea" name="message" rows="15" cols="9">{MESSAGE}</textarea><br />
            </div>
            <a href="javascript:void(0)" class="rte-menu-button" onclick="toggleDiv('smiley-box')">{L_TOGGLE_SIDE_PANEL}</a>
            <a class="exthelp" title="{L_HELP}" href="http://{URL_FORUM}{U_FAQ}" target="_blank">{L_BBCODE_GUIDE}</a>
            <div class="clearfix"><br /></div>
            <!-- BEGIN edit_reason -->
            <fieldset>
               <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>
            </fieldset>
            <!-- END edit_reason -->
         </div> <!-- Closing tag for .messaging-box -->
      </div>
      <br />

   <!-- BEGIN switch_roll_dice -->
   <h3 class="subtitle">{ROLL_DICE_TITLE}</h3>
   <table style="width:100%" id="list_dice"><tr><td>
      {ROLL_DICE_TITLE_LOW} #1 :&nbsp;
      <select name="post_dice_0" id="post_dice">
         <option value="">-</option>
      <!-- BEGIN row_replace -->
         <option value="{switch_roll_dice.row_replace.DICE_ID}"{switch_roll_dice.row_replace.DICE_SELECTED}>{switch_roll_dice.row_replace.DICE_NAME}</option>
      <!-- END row_replace -->
      </select>
      &nbsp;<label for="nb_rolls">{switch_roll_dice.L_DICE_ROLLS} : </label><input type="text" size="2" maxlength="3" name="nb_rolls_0" id="nb_rolls" value="{switch_roll_dice.S_DICE_ROLLS_VALUE}" />
      &nbsp;<span id="dice_to_del"><a href="javascript:add_dice(1,'',1)"><img src="{PATH_IMG_FA}tabs_more.gif" alt="plus" /></a></span>
      </td></tr>
   </table>
   {switch_roll_dice.DICE_SCRIPT}
   <!-- END switch_roll_dice -->

   <!-- BEGIN switch_attachment_list -->
   <h3 class="subtitle" id="attachments">{L_ATTACHMENTS}</h3>
   <fieldset>
   <!-- BEGIN attachments -->
        <dl>
            <dt><label>{L_ATTACHMENT_FILENAME}</label></dt>
            <dd>
                <!-- BEGIN switch_is_orphan -->
             <span class="gen">{switch_attachment_list.attachments.switch_is_orphan.FILENAME}</span>&nbsp;&nbsp;
                <!-- END switch_is_orphan -->
                <!-- BEGIN switch_is_not_orphan -->
             <a href="{switch_attachment_list.attachments.switch_is_not_orphan.U_ATTACH_URL}" class="gen">{switch_attachment_list.attachments.switch_is_not_orphan.FILENAME}</a>&nbsp;&nbsp;
                <!-- END switch_is_not_orphan -->
             <input class="liteoption" type="submit" value="{L_ATTACHMENT_DELETE}" name="delete_file[{switch_attachment_list.attachments.ATTACH_POS}]" />
            </dd>
         <dt><label for="filecomment{switch_attachment_list.attachments.ATTACH_POS}">{L_ATTACH_COMMENT}</label></dt>
         <dd>
             <!--textarea name="comment_list[{switch_attachment_list.attachments.ATTACH_POS}]" cols="35" rows="3" style="color:#000000;width:100%">{switch_attachment_list.attachments.ATTACH_COMMENT}</textarea><br /-->
             <input class="posting-subject" type="text" id="filecomment{switch_attachment_list.attachments.ATTACH_POS}" name="comment_list[{switch_attachment_list.attachments.ATTACH_POS}]" value="{switch_attachment_list.attachments.ATTACH_COMMENT}" maxlength="255" />
             <input type="hidden" value="{switch_attachment_list.attachments.ATTACH_ID}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][attach_id]" />
             <input type="hidden" value="{switch_attachment_list.attachments.IS_ORPHAN}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][is_orphan]" />
             <input type="hidden" value="{switch_attachment_list.attachments.REAL_FILENAME}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][real_filename]" />
             <input type="hidden" value="{switch_attachment_list.attachments.ATTACH_COMMENT}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][attach_comment]" /><br /><br />
         </dd>
      </dl>
   <!-- END attachments -->
   </fieldset>
   <!-- END switch_attachment_list -->

   <!-- BEGIN switch_attachment -->
   <h3 class="subtitle" id="attachment">{L_ATTACHMENT_ADD}</h3>
   <fieldset>
      <dl>
         <dt>&nbsp;</dt>
         <dd>{L_ATTACHMENT_ADD_HELP}<br /><span class="info">{EXT_LIST}</span></dd>
      </dl>
      <dl>
         <dt><label for="fileupload">{L_ATTACHMENT_FILENAME}</label></dt>
         <dd><input type="file" id="fileupload" name="fileupload" /><input type="submit" name="add_file" /> ({L_MAX_ATT_SIZE})</dd>
      </dl>
      <dl>
         <dt><label for="filecomment">{L_ATTACH_COMMENT}</label></dt>
         <dd><input class="posting-subject" type="text" id="filecomment" name="filecomment" value="" maxlength="255" /></dd>
      </dl>
   </fieldset>
   <!-- END switch_attachment -->


   <h3 class="subtitle">{L_OPTIONS}</h3>
      <fieldset>
      <dl>
         <dt><label>{L_POST_OPTIONS}&nbsp;:</label></dt>
         <dd>
         <!-- BEGIN switch_html_checkbox -->
         <input type="checkbox" name="disable_html"{S_HTML_CHECKED} />&nbsp;<label>{L_DISABLE_HTML}</label><br />
         <!-- END switch_html_checkbox -->

         <!-- BEGIN switch_bbcode_checkbox -->
         <input type="checkbox" name="disable_bbcode"{S_BBCODE_CHECKED} />&nbsp;<label>{L_DISABLE_BBCODE}</label><br />
         <!-- END switch_bbcode_checkbox -->

         <!-- BEGIN switch_smilies_checkbox -->
         <input type="checkbox" name="disable_smilies"{S_SMILIES_CHECKED} />&nbsp;<label>{L_DISABLE_SMILIES}</label><br />
         <!-- END switch_smilies_checkbox -->

         <!-- BEGIN switch_signature_checkbox -->
         <input type="checkbox" name="attach_sig"{S_SIGNATURE_CHECKED} />&nbsp;<label>{L_ATTACH_SIGNATURE}</label><br />
         <!-- END switch_signature_checkbox -->

         <!-- BEGIN switch_notify_checkbox -->
         <input type="checkbox" name="notify"{S_NOTIFY_CHECKED} />&nbsp;<label>{L_NOTIFY_ON_REPLY}</label><br />
         <!-- END switch_notify_checkbox -->

         <!-- BEGIN switch_delete_checkbox -->
         <input type="checkbox" name="delete" />&nbsp;<label>{L_DELETE_POST}</label><br />
         <!-- END switch_delete_checkbox -->

         <!-- BEGIN switch_type_toggle -->
         <br />{S_TYPE_TOGGLE}
         <!-- END switch_type_toggle -->
         </dd>
         </dl>
      </fieldset>

      <!-- BEGIN switch_topic_modif -->
      <fieldset>
         <!-- BEGIN switch_icon_checkbox -->
         <dl>
            <dt><label>{POST_ICON_TITLE}</label></dt>
            <dd>
               <!-- BEGIN row -->
               <!-- BEGIN cell -->
               <label style="vertical-align:top">
                  <input type="radio" name="post_icon" value="{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" id="post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" {switch_topic_modif.switch_icon_checkbox.row.cell.ICON_CHECKED} />&nbsp;<span onclick="document.forms['post'].post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_IMG}</span>
               </label>
               <!-- END cell -->
               <!-- END row -->
            </dd>
         </dl>
         <!-- END switch_icon_checkbox -->
         <dl>
            <dt><label for="modif_topic_title">{L_TOPIC_TITLE_MODIFY}</label></dt>
            <dd>
               <input type="text" name="modif_topic_title" id="modif_topic_title" value="{MODIF_TOPIC_TITLE}" maxlength="{TOPIC_TITLE_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" class="posting-subject" />
               <!-- BEGIN switch_topic_button -->
               &nbsp;<input type="button" value="{L_SOLVED_WITHOUT_BRAKETS}" onclick="set_solved(this.form.elements['modif_topic_title'],'{L_SOLVED}')" style="display:none" id="button_solved" class="button" />
               <script type="text/javascript">
               //<![CDATA[
               document.getElementById('button_solved').style.display = 'inline';
               //]]>
               </script>
               <!-- END switch_topic_button -->
            </dd>
         </dl>
      </fieldset>
      <!-- END switch_topic_modif -->

   <!-- BEGIN switch_type_cal -->

      <h3 class="subtitle">{L_CALENDAR}</h3>

      <fieldset>
      <dl>
         <dt><label>{L_CALENDAR_TITLE} :</label></dt>
         <dd>
            {S_CALENDAR_DAY} {S_CALENDAR_MONTH} {S_CALENDAR_YEAR}&nbsp;
            <a href="javascript:void(0)" style="font-style:normal;font-weight:normal" onclick="document.post.topic_calendar_day.value={TODAY_DAY};document.post.topic_calendar_month.value={TODAY_MONTH};document.post.topic_calendar_year.value={TODAY_YEAR}">{L_TODAY}</a>
         </dd>
      </dl>
      <dl>
         <dt><label>{L_TIME} :</label></dt>
         <dd>
            <input name="topic_calendar_hour" type="text" maxlength="2" value="{CALENDAR_HOUR}" />&nbsp;{L_HOURS}&nbsp;&nbsp;
            <input name="topic_calendar_min" type="text" maxlength="2" value="{CALENDAR_MIN}" />&nbsp;{L_MINUTES}
         </dd>
      </dl>
      <dl>
         <dt><label>{L_CALENDAR_DURATION} :</label></dt>
         <dd>
            <input name="topic_calendar_duration_day" type="text" maxlength="5" value="{CALENDAR_DURATION_DAY}" />&nbsp;{L_DAYS}&nbsp;&nbsp;&nbsp;
            <input name="topic_calendar_duration_hour" type="text" maxlength="5" value="{CALENDAR_DURATION_HOUR}" />&nbsp;{L_HOURS}&nbsp;&nbsp;
            <input name="topic_calendar_duration_min" type="text" maxlength="5" value="{CALENDAR_DURATION_MIN}" />&nbsp;{L_MINUTES}
            <input name="create_event" type="hidden" value="{CREATE_EVENT}" />
            <input name="calendar_d" type="hidden" value="{CALENDAR_D}" />
         </dd>
      </dl>
      </fieldset>
   <!-- END switch_type_cal -->

   <!-- BEGIN switch_icon_checkbox -->
   <fieldset>
      <dl>
         <dt style="padding-top:14px"><label>{L_ICON_TITLE}</label></dt>
         <dd>
            <!-- BEGIN row -->
            <!-- BEGIN cell -->
            <label>
               <input type="radio" name="post_icon" tabindex="2" value="{switch_icon_checkbox.row.cell.ICON_ID}" {switch_icon_checkbox.row.cell.ICON_CHECKED} id="post_icon_{switch_icon_checkbox.row.cell.ICON_ID}" />&nbsp;
               <span onclick="document.forms['post'].post_icon_{switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_icon_checkbox.row.cell.ICON_IMG}</span>
            </label> &nbsp;
            <!-- END cell -->
            <!-- END row -->
         </dd>
      </dl>
   </fieldset>
      <!-- END switch_icon_checkbox -->

   <fieldset class="formbuttonrow center">
      {S_HIDDEN_FORM_FIELDS}
      <input type="hidden" name="lt" value="{LAST_TOPIC_ID}" />
      <!-- BEGIN switch_preview -->
      <input type="submit" name="preview" value="{L_PREVIEW}" tabindex="5" class="button" />&nbsp;
      <!-- END switch_preview -->
      <!-- BEGIN switch_draft -->
      &nbsp;<input type="submit" name="draft" value="{L_DRAFT}" tabindex="7" accesskey="d" class="button" />&nbsp;
      <!-- END switch_draft -->
      <!-- BEGIN switch_publish -->
      &nbsp;<input type="submit" name="publish" value="{L_PUBLISH}" tabindex="8" accesskey="p" class="button" />&nbsp;
      <!-- END switch_publish -->
      &nbsp;<input type="submit" name="post" value="{L_SUBMIT}" tabindex="6" accesskey="s" class="button" />
   </fieldset>
</form>
</div>
<br />

{TOPIC_REVIEW_BOX}

<!-- BEGIN switch_privmsg -->
<div id="find_username" class="jqmWindow"></div>

<script src="{JS_DIR}jquery/jqmodal/jqmodal.js" type="text/javascript"></script>
<!-- END switch_privmsg -->
<script type="text/javascript">
//<![CDATA[
$(function(){
<!-- BEGIN switch_privmsg -->
   privmsg_add_username('{U_SEARCH_USER}', '<br /><input style="margin:1px 0" type="text" name="username[]" />');
<!-- END switch_privmsg -->
<!-- BEGIN switch_image_resize -->
    resize_images({ 'selector' : '.postbody .post-entry', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} });
<!-- END switch_image_resize -->
});
//]]>
</script>

<script type="text/javascript">
   //<![CDATA[
   function add_dice(dice_number,dice,number)
   {
      var content = document.getElementById('post_dice').innerHTML;
      document.getElementById('dice_to_del').innerHTML = '';
      document.getElementById('dice_to_del').id = '';

      var new_tr = document.createElement('tr');
      new_tr.appendChild(document.createElement('td'));
      new_tr.firstChild.innerHTML = '{ROLL_DICE_TITLE_LOW} #' + (dice_number + 1) + ' :&nbsp;<select name="post_dice_' + dice_number + '" id="post_dice_' + dice_number + '" value="' + dice + '">' + content + '</select>&nbsp;<label for="nb_rolls">{switch_roll_dice.L_DICE_ROLLS} : </label><input type="text" size="2" maxlength="3" name="nb_rolls_' + dice_number + '" id="nb_rolls" value="' + number + '" />&nbsp;<span id="dice_to_del"><a href="javascript:add_dice(' + (dice_number + 1) + ',\'\',1)"><img src="{PATH_IMG_FA}tabs_more.gif" alt="plus" /></a></span>';
      document.getElementById('list_dice').lastChild.appendChild(new_tr);

      var select_dice = document.getElementById('post_dice_' + dice_number);
      if ( dice == '' )
      {
         select_dice.selectedIndex=0;
      }
      for ( var i = 1; select_dice.options[i]; i++ )
      {
         select_dice.options[i].selected = ( select_dice.options[i].value == dice );
      }
   }
   //]]>
</script>

{SCEDITOR}
  Bài viết hay nhất78
image upload not work, please help me
You cannot reply to topics in this forum