SCEditor icon indicating copy to clipboard operation
SCEditor copied to clipboard

Elements caption, thead, tbody and tfoot not working with table

Open shadow2560 opened this issue 2 months ago • 1 comments

I'm trying to create a bbcode for table contents. The "tr", "th" and "td" elements work perfectly but "caption", "thead", "tbody" and "tfoot" are totaly ignored when passing from html to bbcode (when passing from bbcode to html the table seems good). What I understand with my tests is that these elements are not concidered like others html elements but I don't see how to manage this case.

Configuration:

Firefox 124.0.1, Windows 11 up to date, SCEditor 3.2.0. Not tested on an other configuration. Configuration of SCEditor option is:

sceditor.create(textarea, {
	format: 'bbcode',
	locale: 'fr',
	id: 'sce_txt_text',
	// toolbarContainer: null,
	plugins: 'undo',
	toolbar: 'bold,italic,underline|left,center,right,justify|size,color,bacolor|link,image,youtube|headers,bulletlist,orderedlist,table,code,quote|horizontalrule,date,time|removeformat,unlink|maximize,source',
	toolbarExclude: 'print,ltr,rtl,emoticon,email,cut,copy,paste,pastetext,superscript,subscript,strike,font',
	// fonts: 'Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana',
	// colors: 'white,black,red,green,blue,yellow,orange,pink',
	parserOptions: {
		breakBeforeBlock: false,
		breakStartBlock: false,
		breakEndBlock: false,
		breakAfterBlock: true,
		removeEmptyTags: false,
		fixInvalidNesting: true,
		fixInvalidChildren: false,
		quoteType: sceditor.BBCodeParser.QuoteType.auto
	},
	startInSourceMode: true,
	readOnly: false,
	emoticonsEnabled: false,
	dateFormat: 'day-month-year',
	autofocusEnd: false,
	autoExpand: true,
	autoUpdate: true,
	disableBlockRemove: false,
	style: 'js/sceditor/minified/themes/content/default.min.css'
});

Code of custom commands:

sceditor.formats.bbcode.remove('table');
sceditor.formats.bbcode.remove('tr');
sceditor.formats.bbcode.remove('th');
sceditor.formats.bbcode.remove('td');

sceditor.formats.bbcode.set('table', { tags: { table: null }, format: function (elm, content) { return '[table]' + content + '[/table]'; }, html: function (token, attrs, content) { return '<table>' + content + '</table>'; }, isInline: false, skipLastLineBreak: true, breakStart: true });
sceditor.formats.bbcode.set('caption', { tags: { caption: null }, format: function (elm, content) { return '[caption]' + content + '[/caption]'; }, html: function (token, attrs, content) { return '<caption>' + content + '</caption>'; }, isInline: false, skipLastLineBreak: true });
sceditor.formats.bbcode.set('thead', { tags: { thead: null }, format: function (elm, content) { return '[thead]' + content + '[/thead]'; }, html: function (token, attrs, content) { return '<thead>' + content + '</thead>'; }, isInline: false, skipLastLineBreak: true, breakStart: true });
sceditor.formats.bbcode.set('tbody', { tags: { tbody: null }, format: function (elm, content) { return '[tbody]' + content + '[/tbody]'; }, html: function (token, attrs, content) { return '<tbody>' + content + '</tbody>'; }, isInline: false, skipLastLineBreak: true, breakStart: true });
sceditor.formats.bbcode.set('tfoot', { tags: { tfoot: null }, format: function (elm, content) { return '[tfoot]' + content + '[/tfoot]'; }, html: function (token, attrs, content) { return '<tfoot>' + content + '</tfoot>'; }, isInline: false, skipLastLineBreak: true, breakStart: true });
sceditor.formats.bbcode.set('tr', { tags: { tr: null }, format: function (elm, content) { return '[tr]' + content + '[/tr]'; }, html: function (token, attrs, content) { return '<tr>' + content + '</tr>'; }, isInline: false, skipLastLineBreak: true, breakStart: true });
sceditor.formats.bbcode.set('td', {
	tags: { td: null },
	allowsEmpty: true,
	isInline: false,
	skipLastLineBreak: true,
	format: function (elm, content) { element=sceditor.dom.attr(elm, 'colspan'); if (element == null || !isInteger(element) || element < 2) { return '[td]' + content + '[/td]'; } else { return '[td=' + element + ']' + content + '[/td]'; } },
	html: function (token, attrs, content) { if (attrs.defaultattr == null || !isInteger(attrs.defaultattr) || attrs.defaultattr < 2) { return '<td>' + content + '</td>'; } else { return '<td colspan="' + attrs.defaultattr + '">' + content + '</td>'; } }
});
sceditor.formats.bbcode.set('th', {
	tags: { th: { scope: 'h' } },
	allowsEmpty: true,
	isInline: false,
	strictMatch: true,
	skipLastLineBreak: true,
	format: function (elm, content) { element=sceditor.dom.attr(elm, 'colspan'); if (element == null || !isInteger(element) || element < 2) { return '[th]' + content + '[/th]'; } else { return '[th=' + element + ']' + content + '[/th]'; } },
	html: function (token, attrs, content) { if (attrs.defaultattr == null || !isInteger(attrs.defaultattr) || attrs.defaultattr < 2) { return '<th scope="h">' + content + '</th>'; } else { return '<th colspan="' + attrs.defaultattr + '">' + content + '</th>'; } }
});
sceditor.formats.bbcode.set('thc', {
	tags: { th: { scope: 'col' } },
	allowsEmpty: true,
	isInline: false,
	strictMatch: true,
	skipLastLineBreak: true,
	format: function (elm, content) { element=sceditor.dom.attr(elm, 'colspan'); if (element == null || !isInteger(element) || element < 2) { return '[thc]' + content + '[/thc]'; } else { return '[thc=' + element + ']' + content + '[/thc]'; } },
	html: function (token, attrs, content) { if (attrs.defaultattr == null || !isInteger(attrs.defaultattr) || attrs.defaultattr < 2) { return '<th scope="col">' + content + '</th>'; } else { return '<th scope="col" colspan="' + attrs.defaultattr + '">' + content + '</th>'; } }
});
sceditor.formats.bbcode.set('thr', {
	tags: { th: { scope: 'row' } },
	allowsEmpty: true,
	isInline: false,
	strictMatch: true,
	skipLastLineBreak: true,
	format: function (elm, content) { element=sceditor.dom.attr(elm, 'colspan'); if (element == null || !isInteger(element) || element < 2) { return '[thr]' + content + '[/thr]'; } else { return '[thr=' + element + ']' + content + '[/thr]'; } },
	html: function (token, attrs, content) { if (attrs.defaultattr == null || !isInteger(attrs.defaultattr) || attrs.defaultattr < 2) { return '<th scope="row">' + content + '</th>'; } else { return '<th scope="row" colspan="' + attrs.defaultattr + '">' + content + '</th>'; } }
});

BBcode example of the table used:

[table]
[caption]Front-end web developer course 2021[/caption]
[thead]
[tr]
[thc]Person[/thc]
[thc]Most interest in[/thc]
[thc]Age[/thc]
[/tr]
[/thead]
[tbody]
[tr]
[thr]Chris[/thr]
[td]HTML tables[/td]
[td]22[/td]
[/tr]
[tr]
[thr]Dennis[/thr]
[td]Web accessibility[/td]
[td]45[/td]
[/tr]
[tr]
[thr]Sarah[/thr]
[td]JavaScript frameworks[/td]
[td]29[/td]
[/tr]
[tr]
[thr]Karen[/thr]
[td]Web performance[/td]
[td]36[/td]
[/tr]
[/tbody]
[tfoot]
[tr]
[thr=2]Average age[/thr]
[td]33[/td]
[/tr]
[/tfoot]
[/table]

Steps to reproduce the problem

  1. Declare the minified necessary files
  2. Declare the custom commands.
  3. Create the editor.
  4. Create the table in the editor.
  5. Click on the buton to toggle source/WYSIWYG mode, twice with my configuration.
  6. The "caption", "thead", "tbody" and "tfoot" tags are removed and the text of the caption is inside the table without tags. If you switch again the source mode the caption text will be removed on top of the table.

shadow2560 avatar Apr 03 '24 19:04 shadow2560