table.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. tinyMCEPopup.requireLangPack();
  2. var action, orgTableWidth, orgTableHeight, dom = tinyMCEPopup.editor.dom;
  3. function insertTable() {
  4. var formObj = document.forms[0];
  5. var inst = tinyMCEPopup.editor, dom = inst.dom;
  6. var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className, caption, frame, rules;
  7. var html = '', capEl, elm;
  8. var cellLimit, rowLimit, colLimit;
  9. tinyMCEPopup.restoreSelection();
  10. if (!AutoValidator.validate(formObj)) {
  11. tinyMCEPopup.alert(AutoValidator.getErrorMessages(formObj).join('. ') + '.');
  12. return false;
  13. }
  14. elm = dom.getParent(inst.selection.getNode(), 'table');
  15. // Get form data
  16. cols = formObj.elements['cols'].value;
  17. rows = formObj.elements['rows'].value;
  18. border = formObj.elements['border'].value != "" ? formObj.elements['border'].value : 0;
  19. cellpadding = formObj.elements['cellpadding'].value != "" ? formObj.elements['cellpadding'].value : "";
  20. cellspacing = formObj.elements['cellspacing'].value != "" ? formObj.elements['cellspacing'].value : "";
  21. align = getSelectValue(formObj, "align");
  22. frame = getSelectValue(formObj, "tframe");
  23. rules = getSelectValue(formObj, "rules");
  24. width = formObj.elements['width'].value;
  25. height = formObj.elements['height'].value;
  26. bordercolor = formObj.elements['bordercolor'].value;
  27. bgcolor = formObj.elements['bgcolor'].value;
  28. className = getSelectValue(formObj, "class");
  29. id = formObj.elements['id'].value;
  30. summary = formObj.elements['summary'].value;
  31. style = formObj.elements['style'].value;
  32. dir = formObj.elements['dir'].value;
  33. lang = formObj.elements['lang'].value;
  34. background = formObj.elements['backgroundimage'].value;
  35. caption = formObj.elements['caption'].checked;
  36. cellLimit = tinyMCEPopup.getParam('table_cell_limit', false);
  37. rowLimit = tinyMCEPopup.getParam('table_row_limit', false);
  38. colLimit = tinyMCEPopup.getParam('table_col_limit', false);
  39. // Validate table size
  40. if (colLimit && cols > colLimit) {
  41. tinyMCEPopup.alert(inst.getLang('table_dlg.col_limit').replace(/\{\$cols\}/g, colLimit));
  42. return false;
  43. } else if (rowLimit && rows > rowLimit) {
  44. tinyMCEPopup.alert(inst.getLang('table_dlg.row_limit').replace(/\{\$rows\}/g, rowLimit));
  45. return false;
  46. } else if (cellLimit && cols * rows > cellLimit) {
  47. tinyMCEPopup.alert(inst.getLang('table_dlg.cell_limit').replace(/\{\$cells\}/g, cellLimit));
  48. return false;
  49. }
  50. // Update table
  51. if (action == "update") {
  52. dom.setAttrib(elm, 'cellPadding', cellpadding, true);
  53. dom.setAttrib(elm, 'cellSpacing', cellspacing, true);
  54. if (!isCssSize(border)) {
  55. dom.setAttrib(elm, 'border', border);
  56. } else {
  57. dom.setAttrib(elm, 'border', '');
  58. }
  59. if (border == '') {
  60. dom.setStyle(elm, 'border-width', '');
  61. dom.setStyle(elm, 'border', '');
  62. dom.setAttrib(elm, 'border', '');
  63. }
  64. dom.setAttrib(elm, 'align', align);
  65. dom.setAttrib(elm, 'frame', frame);
  66. dom.setAttrib(elm, 'rules', rules);
  67. dom.setAttrib(elm, 'class', className);
  68. dom.setAttrib(elm, 'style', style);
  69. dom.setAttrib(elm, 'id', id);
  70. dom.setAttrib(elm, 'summary', summary);
  71. dom.setAttrib(elm, 'dir', dir);
  72. dom.setAttrib(elm, 'lang', lang);
  73. capEl = inst.dom.select('caption', elm)[0];
  74. if (capEl && !caption)
  75. capEl.parentNode.removeChild(capEl);
  76. if (!capEl && caption) {
  77. capEl = elm.ownerDocument.createElement('caption');
  78. if (!tinymce.isIE)
  79. capEl.innerHTML = '<br data-mce-bogus="1"/>';
  80. elm.insertBefore(capEl, elm.firstChild);
  81. }
  82. if (width && inst.settings.inline_styles) {
  83. dom.setStyle(elm, 'width', width);
  84. dom.setAttrib(elm, 'width', '');
  85. } else {
  86. dom.setAttrib(elm, 'width', width, true);
  87. dom.setStyle(elm, 'width', '');
  88. }
  89. // Remove these since they are not valid XHTML
  90. dom.setAttrib(elm, 'borderColor', '');
  91. dom.setAttrib(elm, 'bgColor', '');
  92. dom.setAttrib(elm, 'background', '');
  93. if (height && inst.settings.inline_styles) {
  94. dom.setStyle(elm, 'height', height);
  95. dom.setAttrib(elm, 'height', '');
  96. } else {
  97. dom.setAttrib(elm, 'height', height, true);
  98. dom.setStyle(elm, 'height', '');
  99. }
  100. if (background != '')
  101. elm.style.backgroundImage = "url('" + background + "')";
  102. else
  103. elm.style.backgroundImage = '';
  104. /* if (tinyMCEPopup.getParam("inline_styles")) {
  105. if (width != '')
  106. elm.style.width = getCSSSize(width);
  107. }*/
  108. if (bordercolor != "") {
  109. elm.style.borderColor = bordercolor;
  110. elm.style.borderStyle = elm.style.borderStyle == "" ? "solid" : elm.style.borderStyle;
  111. elm.style.borderWidth = cssSize(border);
  112. } else
  113. elm.style.borderColor = '';
  114. elm.style.backgroundColor = bgcolor;
  115. elm.style.height = getCSSSize(height);
  116. inst.addVisual();
  117. // Fix for stange MSIE align bug
  118. //elm.outerHTML = elm.outerHTML;
  119. inst.nodeChanged();
  120. inst.execCommand('mceEndUndoLevel', false, {}, {skip_undo: true});
  121. // Repaint if dimensions changed
  122. if (formObj.width.value != orgTableWidth || formObj.height.value != orgTableHeight)
  123. inst.execCommand('mceRepaint');
  124. tinyMCEPopup.close();
  125. return true;
  126. }
  127. // Create new table
  128. html += '<table';
  129. html += makeAttrib('id', id);
  130. if (!isCssSize(border)) {
  131. html += makeAttrib('border', border);
  132. }
  133. html += makeAttrib('cellpadding', cellpadding);
  134. html += makeAttrib('cellspacing', cellspacing);
  135. html += makeAttrib('data-mce-new', '1');
  136. if (width && inst.settings.inline_styles) {
  137. if (style)
  138. style += '; ';
  139. // Force px
  140. if (/^[0-9\.]+$/.test(width))
  141. width += 'px';
  142. style += 'width: ' + width;
  143. } else
  144. html += makeAttrib('width', width);
  145. /* if (height) {
  146. if (style)
  147. style += '; ';
  148. style += 'height: ' + height;
  149. }*/
  150. //html += makeAttrib('height', height);
  151. //html += makeAttrib('bordercolor', bordercolor);
  152. //html += makeAttrib('bgcolor', bgcolor);
  153. html += makeAttrib('align', align);
  154. html += makeAttrib('frame', frame);
  155. html += makeAttrib('rules', rules);
  156. html += makeAttrib('class', className);
  157. html += makeAttrib('style', style);
  158. html += makeAttrib('summary', summary);
  159. html += makeAttrib('dir', dir);
  160. html += makeAttrib('lang', lang);
  161. html += '>';
  162. if (caption) {
  163. if (!tinymce.isIE)
  164. html += '<caption><br data-mce-bogus="1"/></caption>';
  165. else
  166. html += '<caption></caption>';
  167. }
  168. for (var y=0; y<rows; y++) {
  169. html += "<tr>";
  170. for (var x=0; x<cols; x++) {
  171. if (!tinymce.isIE)
  172. html += '<td><br data-mce-bogus="1"/></td>';
  173. else
  174. html += '<td></td>';
  175. }
  176. html += "</tr>";
  177. }
  178. html += "</table>";
  179. // Move table
  180. if (inst.settings.fix_table_elements) {
  181. var patt = '';
  182. inst.focus();
  183. inst.selection.setContent('<br class="_mce_marker" />');
  184. tinymce.each('h1,h2,h3,h4,h5,h6,p'.split(','), function(n) {
  185. if (patt)
  186. patt += ',';
  187. patt += n + ' ._mce_marker';
  188. });
  189. tinymce.each(inst.dom.select(patt), function(n) {
  190. inst.dom.split(inst.dom.getParent(n, 'h1,h2,h3,h4,h5,h6,p'), n);
  191. });
  192. dom.setOuterHTML(dom.select('br._mce_marker')[0], html);
  193. } else
  194. inst.execCommand('mceInsertContent', false, html);
  195. tinymce.each(dom.select('table[data-mce-new]'), function(node) {
  196. var tdorth = dom.select('td,th', node);
  197. // Fixes a bug in IE where the caret cannot be placed after the table if the table is at the end of the document
  198. if (tinymce.isIE && node.nextSibling == null) {
  199. if (inst.settings.forced_root_block)
  200. dom.insertAfter(dom.create(inst.settings.forced_root_block), node);
  201. else
  202. dom.insertAfter(dom.create('br', {'data-mce-bogus': '1'}), node);
  203. }
  204. try {
  205. // IE9 might fail to do this selection
  206. inst.selection.setCursorLocation(tdorth[0], 0);
  207. } catch (ex) {
  208. // Ignore
  209. }
  210. dom.setAttrib(node, 'data-mce-new', '');
  211. });
  212. inst.addVisual();
  213. inst.execCommand('mceEndUndoLevel', false, {}, {skip_undo: true});
  214. tinyMCEPopup.close();
  215. }
  216. function makeAttrib(attrib, value) {
  217. var formObj = document.forms[0];
  218. var valueElm = formObj.elements[attrib];
  219. if (typeof(value) == "undefined" || value == null) {
  220. value = "";
  221. if (valueElm)
  222. value = valueElm.value;
  223. }
  224. if (value == "")
  225. return "";
  226. // XML encode it
  227. value = value.replace(/&/g, '&amp;');
  228. value = value.replace(/\"/g, '&quot;');
  229. value = value.replace(/</g, '&lt;');
  230. value = value.replace(/>/g, '&gt;');
  231. return ' ' + attrib + '="' + value + '"';
  232. }
  233. function init() {
  234. tinyMCEPopup.resizeToInnerSize();
  235. document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
  236. document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
  237. document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
  238. document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
  239. var cols = 2, rows = 2, border = tinyMCEPopup.getParam('table_default_border', '0'), cellpadding = tinyMCEPopup.getParam('table_default_cellpadding', ''), cellspacing = tinyMCEPopup.getParam('table_default_cellspacing', '');
  240. var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = "";
  241. var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "", rules = "", frame = "";
  242. var inst = tinyMCEPopup.editor, dom = inst.dom;
  243. var formObj = document.forms[0];
  244. var elm = dom.getParent(inst.selection.getNode(), "table");
  245. // Hide advanced fields that isn't available in the schema
  246. tinymce.each("summary id rules dir style frame".split(" "), function(name) {
  247. var tr = tinyMCEPopup.dom.getParent(name, "tr") || tinyMCEPopup.dom.getParent("t" + name, "tr");
  248. if (tr && !tinyMCEPopup.editor.schema.isValid("table", name)) {
  249. tr.style.display = 'none';
  250. }
  251. });
  252. action = tinyMCEPopup.getWindowArg('action');
  253. if (!action)
  254. action = elm ? "update" : "insert";
  255. if (elm && action != "insert") {
  256. var rowsAr = elm.rows;
  257. var cols = 0;
  258. for (var i=0; i<rowsAr.length; i++)
  259. if (rowsAr[i].cells.length > cols)
  260. cols = rowsAr[i].cells.length;
  261. cols = cols;
  262. rows = rowsAr.length;
  263. st = dom.parseStyle(dom.getAttrib(elm, "style"));
  264. border = trimSize(getStyle(elm, 'border', 'borderWidth'));
  265. cellpadding = dom.getAttrib(elm, 'cellpadding', "");
  266. cellspacing = dom.getAttrib(elm, 'cellspacing', "");
  267. width = trimSize(getStyle(elm, 'width', 'width'));
  268. height = trimSize(getStyle(elm, 'height', 'height'));
  269. bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor'));
  270. bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor'));
  271. align = dom.getAttrib(elm, 'align', align);
  272. frame = dom.getAttrib(elm, 'frame');
  273. rules = dom.getAttrib(elm, 'rules');
  274. className = tinymce.trim(dom.getAttrib(elm, 'class').replace(/mceItem.+/g, ''));
  275. id = dom.getAttrib(elm, 'id');
  276. summary = dom.getAttrib(elm, 'summary');
  277. style = dom.serializeStyle(st);
  278. dir = dom.getAttrib(elm, 'dir');
  279. lang = dom.getAttrib(elm, 'lang');
  280. background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
  281. formObj.caption.checked = elm.getElementsByTagName('caption').length > 0;
  282. orgTableWidth = width;
  283. orgTableHeight = height;
  284. action = "update";
  285. formObj.insert.value = inst.getLang('update');
  286. }
  287. addClassesToList('class', "table_styles");
  288. TinyMCE_EditableSelects.init();
  289. // Update form
  290. selectByValue(formObj, 'align', align);
  291. selectByValue(formObj, 'tframe', frame);
  292. selectByValue(formObj, 'rules', rules);
  293. selectByValue(formObj, 'class', className, true, true);
  294. formObj.cols.value = cols;
  295. formObj.rows.value = rows;
  296. formObj.border.value = border;
  297. formObj.cellpadding.value = cellpadding;
  298. formObj.cellspacing.value = cellspacing;
  299. formObj.width.value = width;
  300. formObj.height.value = height;
  301. formObj.bordercolor.value = bordercolor;
  302. formObj.bgcolor.value = bgcolor;
  303. formObj.id.value = id;
  304. formObj.summary.value = summary;
  305. formObj.style.value = style;
  306. formObj.dir.value = dir;
  307. formObj.lang.value = lang;
  308. formObj.backgroundimage.value = background;
  309. updateColor('bordercolor_pick', 'bordercolor');
  310. updateColor('bgcolor_pick', 'bgcolor');
  311. // Resize some elements
  312. if (isVisible('backgroundimagebrowser'))
  313. document.getElementById('backgroundimage').style.width = '180px';
  314. // Disable some fields in update mode
  315. if (action == "update") {
  316. formObj.cols.disabled = true;
  317. formObj.rows.disabled = true;
  318. }
  319. }
  320. function changedSize() {
  321. var formObj = document.forms[0];
  322. var st = dom.parseStyle(formObj.style.value);
  323. /* var width = formObj.width.value;
  324. if (width != "")
  325. st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : "";
  326. else
  327. st['width'] = "";*/
  328. var height = formObj.height.value;
  329. if (height != "")
  330. st['height'] = getCSSSize(height);
  331. else
  332. st['height'] = "";
  333. formObj.style.value = dom.serializeStyle(st);
  334. }
  335. function isCssSize(value) {
  336. return /^[0-9.]+(%|in|cm|mm|em|ex|pt|pc|px)$/.test(value);
  337. }
  338. function cssSize(value, def) {
  339. value = tinymce.trim(value || def);
  340. if (!isCssSize(value)) {
  341. return parseInt(value, 10) + 'px';
  342. }
  343. return value;
  344. }
  345. function changedBackgroundImage() {
  346. var formObj = document.forms[0];
  347. var st = dom.parseStyle(formObj.style.value);
  348. st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
  349. formObj.style.value = dom.serializeStyle(st);
  350. }
  351. function changedBorder() {
  352. var formObj = document.forms[0];
  353. var st = dom.parseStyle(formObj.style.value);
  354. // Update border width if the element has a color
  355. if (formObj.border.value != "" && (isCssSize(formObj.border.value) || formObj.bordercolor.value != ""))
  356. st['border-width'] = cssSize(formObj.border.value);
  357. else {
  358. if (!formObj.border.value) {
  359. st['border'] = '';
  360. st['border-width'] = '';
  361. }
  362. }
  363. formObj.style.value = dom.serializeStyle(st);
  364. }
  365. function changedColor() {
  366. var formObj = document.forms[0];
  367. var st = dom.parseStyle(formObj.style.value);
  368. st['background-color'] = formObj.bgcolor.value;
  369. if (formObj.bordercolor.value != "") {
  370. st['border-color'] = formObj.bordercolor.value;
  371. // Add border-width if it's missing
  372. if (!st['border-width'])
  373. st['border-width'] = cssSize(formObj.border.value, 1);
  374. }
  375. formObj.style.value = dom.serializeStyle(st);
  376. }
  377. function changedStyle() {
  378. var formObj = document.forms[0];
  379. var st = dom.parseStyle(formObj.style.value);
  380. if (st['background-image'])
  381. formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
  382. else
  383. formObj.backgroundimage.value = '';
  384. if (st['width'])
  385. formObj.width.value = trimSize(st['width']);
  386. if (st['height'])
  387. formObj.height.value = trimSize(st['height']);
  388. if (st['background-color']) {
  389. formObj.bgcolor.value = st['background-color'];
  390. updateColor('bgcolor_pick','bgcolor');
  391. }
  392. if (st['border-color']) {
  393. formObj.bordercolor.value = st['border-color'];
  394. updateColor('bordercolor_pick','bordercolor');
  395. }
  396. }
  397. tinyMCEPopup.onInit.add(init);