Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
shadow2560 opened this issue Apr 3, 2024 · 1 comment
Open

Comments

@shadow2560
Copy link

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
Copy link
Author

For now I haven't find a solution to my problem, I realy don't know how to fix my problem, if someone have a solution or some clues you're welcome. If I find a solution I'll update this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant