fck_table.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
  2. <!--
  3. * FCKeditor - The text editor for Internet - http://www.fckeditor.net
  4. * Copyright (C) 2003-2010 Frederico Caldeira Knabben
  5. *
  6. * == BEGIN LICENSE ==
  7. *
  8. * Licensed under the terms of any of the following licenses at your
  9. * choice:
  10. *
  11. * - GNU General Public License Version 2 or later (the "GPL")
  12. * http://www.gnu.org/licenses/gpl.html
  13. *
  14. * - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
  15. * http://www.gnu.org/licenses/lgpl.html
  16. *
  17. * - Mozilla Public License Version 1.1 or later (the "MPL")
  18. * http://www.mozilla.org/MPL/MPL-1.1.html
  19. *
  20. * == END LICENSE ==
  21. *
  22. * Table dialog window.
  23. -->
  24. <html xmlns="http://www.w3.org/1999/xhtml">
  25. <head>
  26. <title>Table Properties</title>
  27. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  28. <meta name="robots" content="noindex, nofollow" />
  29. <script src="common/fck_dialog_common.js" type="text/javascript"></script>
  30. <script type="text/javascript">
  31. var dialog = window.parent ;
  32. var oEditor = dialog.InnerDialogLoaded() ;
  33. var FCKDomTools = oEditor.FCKDomTools ;
  34. // Gets the table if there is one selected.
  35. var table ;
  36. var e = dialog.Selection.GetSelectedElement() ;
  37. var hasColumnHeaders ;
  38. if ( ( !e && document.location.search.substr(1) == 'Parent' ) || ( e && e.tagName != 'TABLE' ) )
  39. e = oEditor.FCKSelection.MoveToAncestorNode( 'TABLE' ) ;
  40. if ( e && e.tagName == "TABLE" )
  41. table = e ;
  42. // Fired when the window loading process is finished. It sets the fields with the
  43. // actual values if a table is selected in the editor.
  44. window.onload = function()
  45. {
  46. // First of all, translate the dialog box texts
  47. oEditor.FCKLanguageManager.TranslatePage(document) ;
  48. if (table)
  49. {
  50. document.getElementById('txtRows').value = table.rows.length ;
  51. document.getElementById('txtColumns').value = table.rows[0].cells.length ;
  52. // Gets the value from the Width or the Style attribute
  53. var iWidth = (table.style.width ? table.style.width : table.width ) ;
  54. var iHeight = (table.style.height ? table.style.height : table.height ) ;
  55. if (iWidth.indexOf('%') >= 0) // Percentual = %
  56. {
  57. iWidth = parseInt( iWidth.substr(0,iWidth.length - 1), 10 ) ;
  58. document.getElementById('selWidthType').value = "percent" ;
  59. }
  60. else if (iWidth.indexOf('px') >= 0) // Style Pixel = px
  61. { //
  62. iWidth = iWidth.substr(0,iWidth.length - 2);
  63. document.getElementById('selWidthType').value = "pixels" ;
  64. }
  65. if (iHeight && iHeight.indexOf('px') >= 0) // Style Pixel = px
  66. iHeight = iHeight.substr(0,iHeight.length - 2);
  67. document.getElementById('txtWidth').value = iWidth || '' ;
  68. document.getElementById('txtHeight').value = iHeight || '' ;
  69. document.getElementById('txtBorder').value = GetAttribute( table, 'border', '' ) ;
  70. document.getElementById('selAlignment').value = GetAttribute( table, 'align', '' ) ;
  71. document.getElementById('txtCellPadding').value = GetAttribute( table, 'cellPadding', '' ) ;
  72. document.getElementById('txtCellSpacing').value = GetAttribute( table, 'cellSpacing', '' ) ;
  73. document.getElementById('txtSummary').value = GetAttribute( table, 'summary', '' ) ;
  74. // document.getElementById('cmbFontStyle').value = table.className ;
  75. var eCaption = oEditor.FCKDomTools.GetFirstChild( table, 'CAPTION' ) ;
  76. if ( eCaption ) document.getElementById('txtCaption').value = eCaption.innerHTML ;
  77. hasColumnHeaders = true ;
  78. // Check if all the first cells in every row are TH
  79. for (var row=0; row<table.rows.length; row++)
  80. {
  81. // If just one cell isn't a TH then it isn't a header column
  82. if ( table.rows[row].cells[0].nodeName != 'TH' )
  83. {
  84. hasColumnHeaders = false ;
  85. break;
  86. }
  87. }
  88. // Check if the table contains <thead>
  89. if ((table.tHead !== null) )
  90. {
  91. if (hasColumnHeaders)
  92. GetE('selHeaders').value = 'both' ;
  93. else
  94. GetE('selHeaders').value = 'row' ;
  95. }
  96. else
  97. {
  98. if (hasColumnHeaders)
  99. GetE('selHeaders').value = 'col' ;
  100. else
  101. GetE('selHeaders').value = '' ;
  102. }
  103. document.getElementById('txtRows').disabled = true ;
  104. document.getElementById('txtColumns').disabled = true ;
  105. SelectField( 'txtWidth' ) ;
  106. }
  107. else
  108. SelectField( 'txtRows' ) ;
  109. dialog.SetOkButton( true ) ;
  110. dialog.SetAutoSize( true ) ;
  111. }
  112. // Fired when the user press the OK button
  113. function Ok()
  114. {
  115. var bExists = ( table != null ) ;
  116. var oDoc = oEditor.FCK.EditorDocument ;
  117. oEditor.FCKUndo.SaveUndoStep() ;
  118. if ( ! bExists )
  119. table = oDoc.createElement( "TABLE" ) ;
  120. // Removes the Width and Height styles
  121. if ( bExists && table.style.width ) table.style.width = null ; //.removeAttribute("width") ;
  122. if ( bExists && table.style.height ) table.style.height = null ; //.removeAttribute("height") ;
  123. var sWidth = GetE('txtWidth').value ;
  124. if ( sWidth.length > 0 && GetE('selWidthType').value == 'percent' )
  125. sWidth += '%' ;
  126. SetAttribute( table, 'width' , sWidth ) ;
  127. SetAttribute( table, 'height' , GetE('txtHeight').value ) ;
  128. SetAttribute( table, 'border' , GetE('txtBorder').value ) ;
  129. SetAttribute( table, 'align' , GetE('selAlignment').value ) ;
  130. SetAttribute( table, 'cellPadding' , GetE('txtCellPadding').value ) ;
  131. SetAttribute( table, 'cellSpacing' , GetE('txtCellSpacing').value ) ;
  132. SetAttribute( table, 'summary' , GetE('txtSummary').value ) ;
  133. var headers = GetE('selHeaders').value ;
  134. if ( bExists )
  135. {
  136. // Should we make a <thead>?
  137. if ( table.tHead==null && (headers=='row' || headers=='both') )
  138. {
  139. var oThead = table.createTHead() ;
  140. var tbody = FCKDomTools.GetFirstChild( table, 'TBODY' ) ;
  141. var theRow= FCKDomTools.GetFirstChild( tbody, 'TR' ) ;
  142. //now change TD to TH:
  143. for (var i = 0; i<theRow.childNodes.length ; i++)
  144. {
  145. var th = RenameNode(theRow.childNodes[i], 'TH') ;
  146. if (th != null)
  147. th.scope='col' ;
  148. }
  149. oThead.appendChild( theRow ) ;
  150. }
  151. if ( table.tHead!==null && !(headers=='row' || headers=='both') )
  152. {
  153. // Move the row out of the THead and put it in the TBody:
  154. var tHead = table.tHead ;
  155. var tbody = FCKDomTools.GetFirstChild( table, 'TBODY' ) ;
  156. var previousFirstRow = tbody.firstChild ;
  157. while ( tHead.firstChild )
  158. {
  159. var theRow = tHead.firstChild ;
  160. for (var i = 0; i < theRow.childNodes.length ; i++ )
  161. {
  162. var newCell = RenameNode( theRow.childNodes[i], 'TD' ) ;
  163. if ( newCell != null )
  164. newCell.removeAttribute( 'scope' ) ;
  165. }
  166. tbody.insertBefore( theRow, previousFirstRow ) ;
  167. }
  168. table.removeChild( tHead ) ;
  169. }
  170. // Should we make all first cells in a row TH?
  171. if ( (!hasColumnHeaders) && (headers=='col' || headers=='both') )
  172. {
  173. for( var row=0 ; row < table.rows.length ; row++ )
  174. {
  175. var newCell = RenameNode(table.rows[row].cells[0], 'TH') ;
  176. if ( newCell != null )
  177. newCell.scope = 'row' ;
  178. }
  179. }
  180. // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
  181. if ( (hasColumnHeaders) && !(headers=='col' || headers=='both') )
  182. {
  183. for( var row=0 ; row < table.rows.length ; row++ )
  184. {
  185. var oRow = table.rows[row] ;
  186. if ( oRow.parentNode.nodeName == 'TBODY' )
  187. {
  188. var newCell = RenameNode(oRow.cells[0], 'TD') ;
  189. if (newCell != null)
  190. newCell.removeAttribute( 'scope' ) ;
  191. }
  192. }
  193. }
  194. }
  195. if (! bExists)
  196. {
  197. var iRows = GetE('txtRows').value ;
  198. var iCols = GetE('txtColumns').value ;
  199. var startRow = 0 ;
  200. // Should we make a <thead> ?
  201. if (headers=='row' || headers=='both')
  202. {
  203. startRow++ ;
  204. var oThead = table.createTHead() ;
  205. var oRow = table.insertRow(-1) ;
  206. oThead.appendChild(oRow);
  207. for ( var c = 0 ; c < iCols ; c++ )
  208. {
  209. var oThcell = oDoc.createElement( 'TH' ) ;
  210. oThcell.scope = 'col' ;
  211. oRow.appendChild( oThcell ) ;
  212. if ( oEditor.FCKBrowserInfo.IsGeckoLike )
  213. oEditor.FCKTools.AppendBogusBr( oThcell ) ;
  214. }
  215. }
  216. // Opera automatically creates a tbody when a thead has been added
  217. var oTbody = FCKDomTools.GetFirstChild( table, 'TBODY' ) ;
  218. if ( !oTbody )
  219. {
  220. // make TBODY if it doesn't exist
  221. oTbody = oDoc.createElement( 'TBODY' ) ;
  222. table.appendChild( oTbody ) ;
  223. }
  224. for ( var r = startRow ; r < iRows; r++ )
  225. {
  226. var oRow = oDoc.createElement( 'TR' ) ;
  227. oTbody.appendChild(oRow) ;
  228. var startCol = 0 ;
  229. // Is the first column a header?
  230. if (headers=='col' || headers=='both')
  231. {
  232. var oThcell = oDoc.createElement( 'TH' ) ;
  233. oThcell.scope = 'row' ;
  234. oRow.appendChild( oThcell ) ;
  235. if ( oEditor.FCKBrowserInfo.IsGeckoLike )
  236. oEditor.FCKTools.AppendBogusBr( oThcell ) ;
  237. startCol++ ;
  238. }
  239. for ( var c = startCol ; c < iCols ; c++ )
  240. {
  241. // IE will leave the TH at the end of the row if we use now oRow.insertCell(-1)
  242. var oCell = oDoc.createElement( 'TD' ) ;
  243. oRow.appendChild( oCell ) ;
  244. if ( oEditor.FCKBrowserInfo.IsGeckoLike )
  245. oEditor.FCKTools.AppendBogusBr( oCell ) ;
  246. }
  247. }
  248. oEditor.FCK.InsertElement( table ) ;
  249. }
  250. var eCaption = oEditor.FCKDomTools.GetFirstChild( table, 'CAPTION' ) ;
  251. if ( eCaption && !oEditor.FCKBrowserInfo.IsIE )
  252. eCaption.parentNode.removeChild( eCaption ) ;
  253. if ( document.getElementById('txtCaption').value != '' )
  254. {
  255. if ( !eCaption || !oEditor.FCKBrowserInfo.IsIE )
  256. {
  257. eCaption = oDoc.createElement( 'CAPTION' ) ;
  258. table.insertBefore( eCaption, table.firstChild ) ;
  259. }
  260. eCaption.innerHTML = document.getElementById('txtCaption').value ;
  261. }
  262. else if ( bExists && eCaption )
  263. {
  264. // TODO: It causes an IE internal error if using removeChild or
  265. // table.deleteCaption() (see #505).
  266. if ( oEditor.FCKBrowserInfo.IsIE )
  267. eCaption.innerHTML = '' ;
  268. }
  269. return true ;
  270. }
  271. </script>
  272. <style type="text/css">
  273. body, td, input, textarea, select, label { font-family: Arial, Verdana, Geneva, helvetica, sans-serif; font-size: 11px; }
  274. </style>
  275. </head>
  276. <body style="overflow: hidden">
  277. <table id="otable" cellspacing="0" cellpadding="0" width="100%" border="0" style="height: 100%">
  278. <tr>
  279. <td>
  280. <table cellspacing="1" cellpadding="1" width="100%" border="0">
  281. <tr>
  282. <td valign="top">
  283. <table cellspacing="1" cellpadding="0" border="0">
  284. <tr>
  285. <td>
  286. <span fcklang="DlgTableRows">Rows</span>:</td>
  287. <td>
  288. &nbsp;<input id="txtRows" type="text" maxlength="3" size="2" value="2"
  289. onkeypress="return IsDigit(event);" /></td>
  290. </tr>
  291. <tr>
  292. <td>
  293. <span fcklang="DlgTableColumns">Columns</span>:</td>
  294. <td>
  295. &nbsp;<input id="txtColumns" type="text" maxlength="2" size="2" value="3"
  296. onkeypress="return IsDigit(event);" /></td>
  297. </tr>
  298. <tr>
  299. <td><span fcklang="DlgTableHeaders">Headers</span>:</td>
  300. <td>
  301. &nbsp;<select id="selHeaders">
  302. <option fcklang="DlgTableHeadersNone" value="">None</option>
  303. <option fcklang="DlgTableHeadersRow" value="row">First row</option>
  304. <option fcklang="DlgTableHeadersColumn" value="col">First column</option>
  305. <option fcklang="DlgTableHeadersBoth" value="both">Both</option>
  306. </select>
  307. </td>
  308. </tr>
  309. <tr>
  310. <td>
  311. <span fcklang="DlgTableBorder">Border size</span>:</td>
  312. <td>
  313. &nbsp;<input id="txtBorder" type="text" maxlength="2" size="2" value="0"
  314. onkeypress="return IsDigit(event);" /></td>
  315. </tr>
  316. <tr>
  317. <td>
  318. <span fcklang="DlgTableAlign">Alignment</span>:</td>
  319. <td>
  320. &nbsp;<select id="selAlignment">
  321. <option fcklang="DlgTableAlignNotSet" value="" selected="selected">&lt;Not set&gt;</option>
  322. <option fcklang="DlgTableAlignLeft" value="left">Left</option>
  323. <option fcklang="DlgTableAlignCenter" value="center">Center</option>
  324. <option fcklang="DlgTableAlignRight" value="right">Right</option>
  325. </select></td>
  326. </tr>
  327. </table>
  328. </td>
  329. <td>
  330. &nbsp;&nbsp;&nbsp;</td>
  331. <td align="right" valign="top">
  332. <table cellspacing="0" cellpadding="0" border="0">
  333. <tr>
  334. <td>
  335. <span fcklang="DlgTableWidth">Width</span>:</td>
  336. <td>
  337. &nbsp;<input id="txtWidth" type="text" maxlength="4" size="3" value="720"
  338. onkeypress="return IsDigit(event);" /></td>
  339. <td>
  340. &nbsp;<select id="selWidthType">
  341. <option fcklang="DlgTableWidthPx" value="pixels" selected="selected">pixels</option>
  342. <option fcklang="DlgTableWidthPc" value="percent">percent</option>
  343. </select></td>
  344. </tr>
  345. <tr>
  346. <td>
  347. <span fcklang="DlgTableHeight">Height</span>:</td>
  348. <td>
  349. &nbsp;<input id="txtHeight" type="text" maxlength="4" size="3" onkeypress="return IsDigit(event);" /></td>
  350. <td>
  351. &nbsp;<span fcklang="DlgTableWidthPx">pixels</span></td>
  352. </tr>
  353. <tr>
  354. <td colspan="3">&nbsp;</td>
  355. </tr>
  356. <tr>
  357. <td nowrap="nowrap">
  358. <span fcklang="DlgTableCellSpace">Cell spacing</span>:</td>
  359. <td>
  360. &nbsp;<input id="txtCellSpacing" type="text" maxlength="2" size="2" value="2"
  361. onkeypress="return IsDigit(event);" /></td>
  362. <td>
  363. &nbsp;</td>
  364. </tr>
  365. <tr>
  366. <td nowrap="nowrap">
  367. <span fcklang="DlgTableCellPad">Cell padding</span>:</td>
  368. <td>
  369. &nbsp;<input id="txtCellPadding" type="text" maxlength="2" size="2" value="10"
  370. onkeypress="return IsDigit(event);" /></td>
  371. <td>
  372. &nbsp;</td>
  373. </tr>
  374. </table>
  375. </td>
  376. </tr>
  377. </table>
  378. <table cellspacing="0" cellpadding="0" width="100%" border="0">
  379. <tr>
  380. <td nowrap="nowrap">
  381. <span fcklang="DlgTableCaption">Caption</span>:&nbsp;</td>
  382. <td>
  383. &nbsp;</td>
  384. <td width="100%" nowrap="nowrap">
  385. <input id="txtCaption" type="text" style="width: 100%" /></td>
  386. </tr>
  387. <tr>
  388. <td nowrap="nowrap">
  389. <span fcklang="DlgTableSummary">Summary</span>:&nbsp;</td>
  390. <td>
  391. &nbsp;</td>
  392. <td width="100%" nowrap="nowrap">
  393. <input id="txtSummary" type="text" style="width: 100%" /></td>
  394. </tr>
  395. </table>
  396. </td>
  397. </tr>
  398. </table>
  399. </body>
  400. </html>