How to allow the CKEditor 5 nest <span> tag into <a> and <p> tags?

43 Views Asked by At

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.

  1. 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.

  1. 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.

0

There are 0 best solutions below