I am using the CKEditor 5 in such configuration:
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { AutoLink, Link } from '@ckeditor/ckeditor5-link';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import { DocumentList, DocumentListProperties } from '@ckeditor/ckeditor5-list';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
import { Font } from '@ckeditor/ckeditor5-font';
import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
import { HtmlComment } from '@ckeditor/ckeditor5-html-support';
import { HtmlEmbed } from '@ckeditor/ckeditor5-html-embed';
import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import { SpecialCharacters, SpecialCharactersEssentials } from '@ckeditor/ckeditor5-special-characters';
import { Style } from '@ckeditor/ckeditor5-style';
import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { WordCount } from '@ckeditor/ckeditor5-word-count';
class Editor extends ClassicEditor {}
// Editor activated plugins.
Editor.builtinPlugins = [
Alignment,
AutoLink,
Autoformat,
Bold,
CloudServices,
Code,
CodeBlock,
DocumentList,
DocumentListProperties,
Essentials,
FindAndReplace,
Font,
GeneralHtmlSupport,
Heading,
HorizontalLine,
HtmlComment,
HtmlEmbed,
Indent,
IndentBlock,
Italic,
Link,
Paragraph,
PasteFromOffice,
RemoveFormat,
SourceEditing,
SpecialCharacters,
SpecialCharactersEssentials,
Strikethrough,
Style,
Subscript,
Superscript,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
Underline,
WordCount
]
// Editor configuration.
Editor.defaultConfig = {
toolbar: {
shouldNotGroupWhenFull: true,
items: [
'sourceEditing',
'|',
'undo', 'redo',
'|',
'link',
'insertTable',
'specialCharacters',
'codeBlock',
'htmlEmbed',
'horizontalLine',
'|',
'findAndReplace',
'|',
'alignment:left','alignment:center', 'alignment:right', 'alignment:justify',
'|',
'outdent', 'indent',
'|',
'bulletedList', 'numberedList',
'|',
'-',
'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript',
'|',
'heading',
'|',
'style',
'|',
'fontColor', 'fontBackgroundColor', 'fontFamily', 'fontSize',
'|',
'removeFormat',
'|'
]
},
language: 'en',
heading: {
options: [
...
]
},
htmlSupport: {
allow: [
{
name: /.*/,
attributes: true,
classes: true,
styles: true
}
]
},
style: {
definitions: [
...
]
},
specialCharacters: {
order: [
'Text',
'Latin',
'Mathematical',
'Currency',
'Arrows'
]
},
table: {
contentToolbar: [
'toggleTableCaption',
'tableColumn',
'tableRow',
'mergeTableCells',
'tableProperties',
'tableCellProperties'
]
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
indentBlock: {
offset: 24,
unit: 'px'
},
fontColor: {
columns: 9,
colors: [
...
]
},
fontFamily: {
supportAllValues: true,
options: [
...
]
},
fontSize: {
supportAllValues: true,
options: [
'default',
...
]
},
};
export default Editor;
There are just some basic plugins installed, but the most important for me is GeneralHtmlSupport which resolves many issues.
Unfortunately, there is a behaviour with the <span> tag in the Source mode this plugin can't handle or there is something I missed in the documentation.
- Nested
<span>inside<p>.
<div>
<p><span>Span in the paragraph.</span></p>
</div>
The result:
<div>
<span>Span in the paragraph.</span>
</div>
The <p> is just stripped.
- Nested
<span>inside<a>.
<div>
<a href="#"><span>Span in the link.</span></a>
</div>
The result:
<div>
<span><a href="#">Span in the link.</a></span>
</div>
The <span> became the wrapper of <a>.
How to configure this editor to not do anything with <span>? Is there any configuration, plugin or something?
Thanks for the help in advance.
I have checked the documentation, maany posts and have not found any solutions.
I am expecting just some hints how to configure CKEditor 5 to ged rid of such <span> behaviour.