table.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  7. <script type="text/javascript" src="../internal.js"></script>
  8. <link rel="stylesheet" type="text/css" href="table.css">
  9. </head>
  10. <body>
  11. <div class="wrapper">
  12. <fieldset class="base">
  13. <legend><var id="lang_baseInfo"></var></legend>
  14. <table>
  15. <tr>
  16. <td width="120"><label for="numRows"><var id="lang_rows"></var>: </label><input id="numRows" type="text" /> <var id="lang_rowUnit"></var></td>
  17. <td>
  18. <label for="width"><var id="lang_width"></var>: </label><input id="width" type="text" />
  19. <label for="widthUnit"><var id="lang_widthUnit"></var>: </label>
  20. <select id="widthUnit">
  21. <option value="%">%</option>
  22. <option value="px">px</option>
  23. </select>
  24. </td>
  25. </tr>
  26. <tr>
  27. <td><label for="numCols"><var id="lang_cols"></var>: </label><input id="numCols" type="text" /> <var id="lang_colUnit"></var></td>
  28. <td>
  29. <label for="height"><var id="lang_height"></var>: </label><input id="height" type="text" />
  30. <label for="heightUnit"><var id="lang_heightUnit"></var>: </label>
  31. <select id="heightUnit">
  32. <option value="%">%</option>
  33. <option value="px">px</option>
  34. </select>
  35. </td>
  36. </tr>
  37. </table>
  38. <div id="message" style="display: none">
  39. <p><var id="lang_warmPrompt"></var>:</p>
  40. <p id="messageContent"><var id="lang_maxPadding"></var></p>
  41. </div>
  42. </fieldset>
  43. <div>
  44. <fieldset class="extend">
  45. <legend><var id="lang_extendInfo"></var><span style="font-weight: normal;">(<var id="lang_preview"></var>)</span></legend>
  46. <table>
  47. <tr>
  48. <td width="60"><span class="bold"><var id="lang_tableBorder"></var></span>:</td>
  49. <td><label for="border"><var id="lang_borderSize"></var>: </label><input id="border" type="text" /> px&nbsp;</td>
  50. <td><label for="borderColor"><var id="lang_borderColor"></var>: </label><input id="borderColor" type="text" /></td>
  51. </tr>
  52. <tr style="border-bottom: 1px solid #ddd">
  53. <td><span class="bold"><var id="lang_mar_pad"></var></span>:</td>
  54. <td><label for="cellPadding"><var id="lang_margin"></var>: </label><input id="cellPadding" type="text" /> px&nbsp;</td>
  55. <td><label for="cellSpacing"><var id="lang_padding"></var>: </label><input id="cellSpacing" type="text" /> px </td>
  56. </tr>
  57. <tr>
  58. <td colspan="3"><span class="bold"><var id="lang_table_background"></var></span>:
  59. <input id="bgColor" type="text" />
  60. </td>
  61. </tr>
  62. <tr>
  63. <td colspan="3"><span class="bold"><var id="lang_table_alignment"></var></span>:
  64. <select id="align">
  65. <option value=""></option>
  66. <option value="center"></option>
  67. <option value="left"></option>
  68. <option value="right"></option>
  69. </select>
  70. </td>
  71. </tr>
  72. <tr>
  73. <td colspan="3">
  74. <span class="bold"><var id="lang_borderFor"></var></span>:
  75. <select id="borderType">
  76. <option value="0"></option>
  77. <option value="1"></option>
  78. </select>
  79. </td>
  80. </tr>
  81. </table>
  82. </fieldset>
  83. <div id="preview">
  84. <table border="1" borderColor="#000" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  85. <tr><td colspan="3"><var id="lang_forPreview"></var></td></tr>
  86. <tr><td></td><td></td><td></td></tr>
  87. <tr><td></td><td></td><td></td></tr>
  88. </table>
  89. </div>
  90. </div>
  91. </div>
  92. <script type="text/javascript" src="table.js"></script>
  93. <script type="text/javascript">
  94. var inputs = document.getElementsByTagName('input'),
  95. selects=document.getElementsByTagName('select');
  96. //ie给出默认值
  97. for(var i=0,ci;ci=inputs[i++];){
  98. switch (ci.id){
  99. case 'numRows':
  100. case 'numCols':
  101. ci.value = 5;
  102. break;
  103. case 'bgColor':
  104. ci.value = '';
  105. break;
  106. case 'borderColor':
  107. ci.value = '#000000';
  108. break;
  109. case 'border':
  110. ci.value = 1;
  111. break;
  112. case 'cellSpacing':
  113. case 'cellPadding':
  114. ci.value = '0';
  115. break;
  116. default:
  117. }
  118. }
  119. for(var i=0,ci;ci=selects[i++];){
  120. ci.options[0].selected = true;
  121. }
  122. var state = editor.queryCommandState("edittable");
  123. if(state == 0){
  124. var range = editor.selection.getRange(),
  125. table = domUtils.findParentByTagName(range.startContainer,'table',true);
  126. if(table){
  127. var numRows = table.rows.length,cellCount=0;
  128. //列取最大数
  129. for(var i=0,ri;ri=table.rows[i++];){
  130. var tmpCellCount = 0;
  131. for(var j=0,cj;cj=ri.cells[j++];){
  132. if(cj.style.display != 'none'){
  133. tmpCellCount++;
  134. }
  135. }
  136. cellCount = Math.max(tmpCellCount,cellCount)
  137. }
  138. domUtils.setAttributes($G('numRows'),{
  139. 'value':numRows,
  140. 'disabled':true
  141. });
  142. domUtils.setAttributes($G('numCols'),{
  143. 'value':cellCount,
  144. 'disabled':true
  145. });
  146. $G("cellPadding").value = table.getAttribute("cellPadding") || '0';
  147. $G("cellSpacing").value = table.getAttribute("cellSpacing") || '0';
  148. var value = table.getAttribute('width');
  149. value = !value ? ['',table.offsetWidth]:/%$/.test(value) ? value.match(/(\d+)(%)?/) : ['',value.replace(/px/i,'')];
  150. $G("width").value = value[1];
  151. $G('widthUnit').options[value[2] ? 0:1].selected = true;
  152. value = table.getAttribute('height');
  153. value = !value ? ['','']:/%$/.test(value) ? value.match(/(\d+)(%)?/) : ['',value.replace(/px/i,'')];
  154. $G("height").value = value[1];
  155. $G('heightUnit').options[value[2]?0:1].selected = true;
  156. $G('borderColor').value = (table.getAttribute('borderColor')||"#000000").toUpperCase();
  157. $G("border").value = table.getAttribute("border");
  158. for(var i=0,ip,opts= $G("align").options;ip=opts[i++];){
  159. if(ip.value == (table.getAttribute('align' )||"").toLowerCase()){
  160. ip.selected = true;
  161. break;
  162. }
  163. }
  164. $G("borderType").options[table.getAttribute('borderType') == '1' ? 1: 0].selected = true;
  165. $G("bgColor").value = (table.getAttribute("bgColor")||"").toUpperCase();
  166. createTable();
  167. }
  168. }else{
  169. $focus($G("numRows"));
  170. }
  171. init();
  172. domUtils.on($G("width"),"keyup",function(){
  173. var value = this.value;
  174. if(value>100){
  175. $G("widthUnit").value="px";
  176. }
  177. });
  178. domUtils.on($G("height"),"keyup",function(){
  179. var value = this.value;
  180. if(value>100){
  181. $G("heightUnit").value="px";
  182. }
  183. });
  184. dialog.onok = function(){
  185. for(var i=0,opt={},ci;ci=inputs[i++];){
  186. switch (ci.id){
  187. case 'numRows':
  188. case 'numCols':
  189. case 'height':
  190. case 'width':
  191. if(ci.value && !/^[1-9]+[0-9]*$/.test(ci.value)){
  192. alert(lang.errorNum);
  193. $focus(ci);
  194. return false;
  195. }
  196. break;
  197. case 'cellspacing':
  198. case 'cellpadding':
  199. case 'border':
  200. if(ci.value && !/^[0-9]*$/.test(ci.value)){
  201. alert(lang.errorNum);
  202. $focus(ci);
  203. return false;
  204. }
  205. break;
  206. case 'bgColor':
  207. case 'borderColor':
  208. if(ci.value && !/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(ci.value)){
  209. alert(lang.errorColor);
  210. $focus(ci);
  211. return false;
  212. }
  213. break;
  214. default:
  215. }
  216. opt[ci.id] = ci.value || (ci.id == 'border' ? 0 : '')
  217. }
  218. for(var i=0,ci;ci=selects[i++];){
  219. opt[ci.id] = ci.value.toUpperCase()
  220. }
  221. editor.execCommand(state == -1 ? 'inserttable' : 'edittable',opt );
  222. };
  223. </script>
  224. </body>
  225. </html>