1 tinyMCEPopup
.requireLangPack();
3 var action
, orgTableWidth
, orgTableHeight
, dom
= tinyMCEPopup
.editor
.dom
;
5 function insertTable() {
6 var formObj
= document
.forms
[0];
7 var inst
= tinyMCEPopup
.editor
, dom
= inst
.dom
;
8 var cols
= 2, rows
= 2, border
= 0, cellpadding
= -1, cellspacing
= -1, align
, width
, height
, className
, caption
, frame
, rules
;
9 var html
= '', capEl
, elm
;
10 var cellLimit
, rowLimit
, colLimit
;
12 tinyMCEPopup
.restoreSelection();
14 if (!AutoValidator
.validate(formObj
)) {
15 tinyMCEPopup
.alert(AutoValidator
.getErrorMessages(formObj
).join('. ') + '.');
19 elm
= dom
.getParent(inst
.selection
.getNode(), 'table');
22 cols
= formObj
.elements
['cols'].value
;
23 rows
= formObj
.elements
['rows'].value
;
24 border
= formObj
.elements
['border'].value
!= "" ? formObj
.elements
['border'].value
: 0;
25 cellpadding
= formObj
.elements
['cellpadding'].value
!= "" ? formObj
.elements
['cellpadding'].value
: "";
26 cellspacing
= formObj
.elements
['cellspacing'].value
!= "" ? formObj
.elements
['cellspacing'].value
: "";
27 align
= getSelectValue(formObj
, "align");
28 frame
= getSelectValue(formObj
, "tframe");
29 rules
= getSelectValue(formObj
, "rules");
30 width
= formObj
.elements
['width'].value
;
31 height
= formObj
.elements
['height'].value
;
32 bordercolor
= formObj
.elements
['bordercolor'].value
;
33 bgcolor
= formObj
.elements
['bgcolor'].value
;
34 className
= getSelectValue(formObj
, "class");
35 id
= formObj
.elements
['id'].value
;
36 summary
= formObj
.elements
['summary'].value
;
37 style
= formObj
.elements
['style'].value
;
38 dir
= formObj
.elements
['dir'].value
;
39 lang
= formObj
.elements
['lang'].value
;
40 background
= formObj
.elements
['backgroundimage'].value
;
41 caption
= formObj
.elements
['caption'].checked
;
43 cellLimit
= tinyMCEPopup
.getParam('table_cell_limit', false);
44 rowLimit
= tinyMCEPopup
.getParam('table_row_limit', false);
45 colLimit
= tinyMCEPopup
.getParam('table_col_limit', false);
47 // Validate table size
48 if (colLimit
&& cols
> colLimit
) {
49 tinyMCEPopup
.alert(inst
.getLang('table_dlg.col_limit').replace(/\{\$cols\}/g, colLimit
));
51 } else if (rowLimit
&& rows
> rowLimit
) {
52 tinyMCEPopup
.alert(inst
.getLang('table_dlg.row_limit').replace(/\{\$rows\}/g, rowLimit
));
54 } else if (cellLimit
&& cols
* rows
> cellLimit
) {
55 tinyMCEPopup
.alert(inst
.getLang('table_dlg.cell_limit').replace(/\{\$cells\}/g, cellLimit
));
60 if (action
== "update") {
61 dom
.setAttrib(elm
, 'cellPadding', cellpadding
, true);
62 dom
.setAttrib(elm
, 'cellSpacing', cellspacing
, true);
64 if (!isCssSize(border
)) {
65 dom
.setAttrib(elm
, 'border', border
);
67 dom
.setAttrib(elm
, 'border', '');
71 dom
.setStyle(elm
, 'border-width', '');
72 dom
.setStyle(elm
, 'border', '');
73 dom
.setAttrib(elm
, 'border', '');
76 dom
.setAttrib(elm
, 'align', align
);
77 dom
.setAttrib(elm
, 'frame', frame
);
78 dom
.setAttrib(elm
, 'rules', rules
);
79 dom
.setAttrib(elm
, 'class', className
);
80 dom
.setAttrib(elm
, 'style', style
);
81 dom
.setAttrib(elm
, 'id', id
);
82 dom
.setAttrib(elm
, 'summary', summary
);
83 dom
.setAttrib(elm
, 'dir', dir
);
84 dom
.setAttrib(elm
, 'lang', lang
);
86 capEl
= inst
.dom
.select('caption', elm
)[0];
88 if (capEl
&& !caption
)
89 capEl
.parentNode
.removeChild(capEl
);
91 if (!capEl
&& caption
) {
92 capEl
= elm
.ownerDocument
.createElement('caption');
95 capEl
.innerHTML
= '<br data-mce-bogus="1"/>';
97 elm
.insertBefore(capEl
, elm
.firstChild
);
100 if (width
&& inst
.settings
.inline_styles
) {
101 dom
.setStyle(elm
, 'width', width
);
102 dom
.setAttrib(elm
, 'width', '');
104 dom
.setAttrib(elm
, 'width', width
, true);
105 dom
.setStyle(elm
, 'width', '');
108 // Remove these since they are not valid XHTML
109 dom
.setAttrib(elm
, 'borderColor', '');
110 dom
.setAttrib(elm
, 'bgColor', '');
111 dom
.setAttrib(elm
, 'background', '');
113 if (height
&& inst
.settings
.inline_styles
) {
114 dom
.setStyle(elm
, 'height', height
);
115 dom
.setAttrib(elm
, 'height', '');
117 dom
.setAttrib(elm
, 'height', height
, true);
118 dom
.setStyle(elm
, 'height', '');
121 if (background
!= '')
122 elm
.style
.backgroundImage
= "url('" + background
+ "')";
124 elm
.style
.backgroundImage
= '';
126 /* if (tinyMCEPopup.getParam("inline_styles")) {
128 elm.style.width = getCSSSize(width);
131 if (bordercolor
!= "") {
132 elm
.style
.borderColor
= bordercolor
;
133 elm
.style
.borderStyle
= elm
.style
.borderStyle
== "" ? "solid" : elm
.style
.borderStyle
;
134 elm
.style
.borderWidth
= cssSize(border
);
136 elm
.style
.borderColor
= '';
138 elm
.style
.backgroundColor
= bgcolor
;
139 elm
.style
.height
= getCSSSize(height
);
143 // Fix for stange MSIE align bug
144 //elm.outerHTML = elm.outerHTML;
147 inst
.execCommand('mceEndUndoLevel', false, {}, {skip_undo
: true});
149 // Repaint if dimensions changed
150 if (formObj
.width
.value
!= orgTableWidth
|| formObj
.height
.value
!= orgTableHeight
)
151 inst
.execCommand('mceRepaint');
153 tinyMCEPopup
.close();
160 html
+= makeAttrib('id', id
);
161 if (!isCssSize(border
)) {
162 html
+= makeAttrib('border', border
);
165 html
+= makeAttrib('cellpadding', cellpadding
);
166 html
+= makeAttrib('cellspacing', cellspacing
);
167 html
+= makeAttrib('data-mce-new', '1');
169 if (width
&& inst
.settings
.inline_styles
) {
174 if (/^[0-9\.]+$/.test(width
))
177 style
+= 'width: ' + width
;
179 html
+= makeAttrib('width', width
);
185 style += 'height: ' + height;
188 //html += makeAttrib('height', height);
189 //html += makeAttrib('bordercolor', bordercolor);
190 //html += makeAttrib('bgcolor', bgcolor);
191 html
+= makeAttrib('align', align
);
192 html
+= makeAttrib('frame', frame
);
193 html
+= makeAttrib('rules', rules
);
194 html
+= makeAttrib('class', className
);
195 html
+= makeAttrib('style', style
);
196 html
+= makeAttrib('summary', summary
);
197 html
+= makeAttrib('dir', dir
);
198 html
+= makeAttrib('lang', lang
);
203 html
+= '<caption><br data-mce-bogus="1"/></caption>';
205 html
+= '<caption></caption>';
208 for (var y
=0; y
<rows
; y
++) {
211 for (var x
=0; x
<cols
; x
++) {
213 html
+= '<td><br data-mce-bogus="1"/></td>';
224 if (inst
.settings
.fix_table_elements
) {
228 inst
.selection
.setContent('<br class="_mce_marker" />');
230 tinymce
.each('h1,h2,h3,h4,h5,h6,p'.split(','), function(n
) {
234 patt
+= n
+ ' ._mce_marker';
237 tinymce
.each(inst
.dom
.select(patt
), function(n
) {
238 inst
.dom
.split(inst
.dom
.getParent(n
, 'h1,h2,h3,h4,h5,h6,p'), n
);
241 dom
.setOuterHTML(dom
.select('br._mce_marker')[0], html
);
243 inst
.execCommand('mceInsertContent', false, html
);
245 tinymce
.each(dom
.select('table[data-mce-new]'), function(node
) {
246 var tdorth
= dom
.select('td,th', node
);
248 // Fixes a bug in IE where the caret cannot be placed after the table if the table is at the end of the document
249 if (tinymce
.isIE
&& node
.nextSibling
== null) {
250 dom
.insertAfter(dom
.create('p'), node
);
254 // IE9 might fail to do this selection
255 inst
.selection
.setCursorLocation(tdorth
[0], 0);
260 dom
.setAttrib(node
, 'data-mce-new', '');
264 inst
.execCommand('mceEndUndoLevel', false, {}, {skip_undo
: true});
266 tinyMCEPopup
.close();
269 function makeAttrib(attrib
, value
) {
270 var formObj
= document
.forms
[0];
271 var valueElm
= formObj
.elements
[attrib
];
273 if (typeof(value
) == "undefined" || value
== null) {
277 value
= valueElm
.value
;
284 value
= value
.replace(/&/g
, '&');
285 value
= value
.replace(/\"/g, '"');
286 value
= value
.replace(/</g
, '<');
287 value
= value
.replace(/>/g
, '>');
289 return ' ' + attrib
+ '="' + value
+ '"';
293 tinyMCEPopup
.resizeToInnerSize();
295 document
.getElementById('backgroundimagebrowsercontainer').innerHTML
= getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
296 document
.getElementById('backgroundimagebrowsercontainer').innerHTML
= getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
297 document
.getElementById('bordercolor_pickcontainer').innerHTML
= getColorPickerHTML('bordercolor_pick','bordercolor');
298 document
.getElementById('bgcolor_pickcontainer').innerHTML
= getColorPickerHTML('bgcolor_pick','bgcolor');
300 var cols
= 2, rows
= 2, border
= tinyMCEPopup
.getParam('table_default_border', '0'), cellpadding
= tinyMCEPopup
.getParam('table_default_cellpadding', ''), cellspacing
= tinyMCEPopup
.getParam('table_default_cellspacing', '');
301 var align
= "", width
= "", height
= "", bordercolor
= "", bgcolor
= "", className
= "";
302 var id
= "", summary
= "", style
= "", dir
= "", lang
= "", background
= "", bgcolor
= "", bordercolor
= "", rules
= "", frame
= "";
303 var inst
= tinyMCEPopup
.editor
, dom
= inst
.dom
;
304 var formObj
= document
.forms
[0];
305 var elm
= dom
.getParent(inst
.selection
.getNode(), "table");
307 action
= tinyMCEPopup
.getWindowArg('action');
310 action
= elm
? "update" : "insert";
312 if (elm
&& action
!= "insert") {
313 var rowsAr
= elm
.rows
;
315 for (var i
=0; i
<rowsAr
.length
; i
++)
316 if (rowsAr
[i
].cells
.length
> cols
)
317 cols
= rowsAr
[i
].cells
.length
;
320 rows
= rowsAr
.length
;
322 st
= dom
.parseStyle(dom
.getAttrib(elm
, "style"));
323 border
= trimSize(getStyle(elm
, 'border', 'borderWidth'));
324 cellpadding
= dom
.getAttrib(elm
, 'cellpadding', "");
325 cellspacing
= dom
.getAttrib(elm
, 'cellspacing', "");
326 width
= trimSize(getStyle(elm
, 'width', 'width'));
327 height
= trimSize(getStyle(elm
, 'height', 'height'));
328 bordercolor
= convertRGBToHex(getStyle(elm
, 'bordercolor', 'borderLeftColor'));
329 bgcolor
= convertRGBToHex(getStyle(elm
, 'bgcolor', 'backgroundColor'));
330 align
= dom
.getAttrib(elm
, 'align', align
);
331 frame
= dom
.getAttrib(elm
, 'frame');
332 rules
= dom
.getAttrib(elm
, 'rules');
333 className
= tinymce
.trim(dom
.getAttrib(elm
, 'class').replace(/mceItem.+/g, ''));
334 id
= dom
.getAttrib(elm
, 'id');
335 summary
= dom
.getAttrib(elm
, 'summary');
336 style
= dom
.serializeStyle(st
);
337 dir
= dom
.getAttrib(elm
, 'dir');
338 lang
= dom
.getAttrib(elm
, 'lang');
339 background
= getStyle(elm
, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
340 formObj
.caption
.checked
= elm
.getElementsByTagName('caption').length
> 0;
342 orgTableWidth
= width
;
343 orgTableHeight
= height
;
346 formObj
.insert
.value
= inst
.getLang('update');
349 addClassesToList('class', "table_styles");
350 TinyMCE_EditableSelects
.init();
353 selectByValue(formObj
, 'align', align
);
354 selectByValue(formObj
, 'tframe', frame
);
355 selectByValue(formObj
, 'rules', rules
);
356 selectByValue(formObj
, 'class', className
, true, true);
357 formObj
.cols
.value
= cols
;
358 formObj
.rows
.value
= rows
;
359 formObj
.border
.value
= border
;
360 formObj
.cellpadding
.value
= cellpadding
;
361 formObj
.cellspacing
.value
= cellspacing
;
362 formObj
.width
.value
= width
;
363 formObj
.height
.value
= height
;
364 formObj
.bordercolor
.value
= bordercolor
;
365 formObj
.bgcolor
.value
= bgcolor
;
366 formObj
.id
.value
= id
;
367 formObj
.summary
.value
= summary
;
368 formObj
.style
.value
= style
;
369 formObj
.dir
.value
= dir
;
370 formObj
.lang
.value
= lang
;
371 formObj
.backgroundimage
.value
= background
;
373 updateColor('bordercolor_pick', 'bordercolor');
374 updateColor('bgcolor_pick', 'bgcolor');
376 // Resize some elements
377 if (isVisible('backgroundimagebrowser'))
378 document
.getElementById('backgroundimage').style
.width
= '180px';
380 // Disable some fields in update mode
381 if (action
== "update") {
382 formObj
.cols
.disabled
= true;
383 formObj
.rows
.disabled
= true;
387 function changedSize() {
388 var formObj
= document
.forms
[0];
389 var st
= dom
.parseStyle(formObj
.style
.value
);
391 /* var width = formObj.width.value;
393 st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : "";
397 var height
= formObj
.height
.value
;
399 st
['height'] = getCSSSize(height
);
403 formObj
.style
.value
= dom
.serializeStyle(st
);
406 function isCssSize(value
) {
407 return /^[0-9.]+(%|in|cm|mm|em|ex|pt|pc|px)$/.test(value
);
410 function cssSize(value
, def
) {
411 value
= tinymce
.trim(value
|| def
);
413 if (!isCssSize(value
)) {
414 return parseInt(value
, 10) + 'px';
420 function changedBackgroundImage() {
421 var formObj
= document
.forms
[0];
422 var st
= dom
.parseStyle(formObj
.style
.value
);
424 st
['background-image'] = "url('" + formObj
.backgroundimage
.value
+ "')";
426 formObj
.style
.value
= dom
.serializeStyle(st
);
429 function changedBorder() {
430 var formObj
= document
.forms
[0];
431 var st
= dom
.parseStyle(formObj
.style
.value
);
433 // Update border width if the element has a color
434 if (formObj
.border
.value
!= "" && (isCssSize(formObj
.border
.value
) || formObj
.bordercolor
.value
!= ""))
435 st
['border-width'] = cssSize(formObj
.border
.value
);
437 if (!formObj
.border
.value
) {
439 st
['border-width'] = '';
443 formObj
.style
.value
= dom
.serializeStyle(st
);
446 function changedColor() {
447 var formObj
= document
.forms
[0];
448 var st
= dom
.parseStyle(formObj
.style
.value
);
450 st
['background-color'] = formObj
.bgcolor
.value
;
452 if (formObj
.bordercolor
.value
!= "") {
453 st
['border-color'] = formObj
.bordercolor
.value
;
455 // Add border-width if it's missing
456 if (!st
['border-width'])
457 st
['border-width'] = cssSize(formObj
.border
.value
, 1);
460 formObj
.style
.value
= dom
.serializeStyle(st
);
463 function changedStyle() {
464 var formObj
= document
.forms
[0];
465 var st
= dom
.parseStyle(formObj
.style
.value
);
467 if (st
['background-image'])
468 formObj
.backgroundimage
.value
= st
['background-image'].replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
470 formObj
.backgroundimage
.value
= '';
473 formObj
.width
.value
= trimSize(st
['width']);
476 formObj
.height
.value
= trimSize(st
['height']);
478 if (st
['background-color']) {
479 formObj
.bgcolor
.value
= st
['background-color'];
480 updateColor('bgcolor_pick','bgcolor');
483 if (st
['border-color']) {
484 formObj
.bordercolor
.value
= st
['border-color'];
485 updateColor('bordercolor_pick','bordercolor');
489 tinyMCEPopup
.onInit
.add(init
);