I Empty Tag Support In Ckeditor 5

I want to have empty tags In Ckeditor 5 Source Editting , But it gets removed everytime . How can I have empty tags In ckeditor ? I want to use font awesome and the i tag must be empty :

Intiatlizer.js: import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; import Blockquote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; import Font from '@ckeditor/ckeditor5-font/src/font'; import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace'; import Heading from '@ckeditor/ckeditor5-heading/src/heading'; import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; import Image from '@ckeditor/ckeditor5-image/src/image'; import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'; import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'; import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; import Link from '@ckeditor/ckeditor5-link/src/link'; import List from '@ckeditor/ckeditor5-list/src/list'; import Indent from '@ckeditor/ckeditor5-indent/src/indent'; import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import removeFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting'; import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport'; import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters'; import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'; import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'; import Table from '@ckeditor/ckeditor5-table/src/table'; import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption'; import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties'; import TableColumnResize from '@ckeditor/ckeditor5-table/src/tablecolumnresize'; import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties'; import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; import TextPartLanguage from '@ckeditor/ckeditor5-language/src/textpartlanguage'; import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';

import Variables from './variables/plugin';

const initEditor = id => { ClassicEditor .create(document.querySelector( #${id} ), { heading: { options: [ {model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'}, {model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'}, {model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'}, {model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}, {model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4'}, {model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5'}, {model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6'} ] }, plugins: [ Alignment, Code, CodeBlock, Essentials, FindAndReplace, Paragraph, Heading, Bold, Indent, Italic, Underline, Strikethrough, Subscript, Superscript, Blockquote, List, Font, SpecialCharacters, Link, Image, ImageInsert, ImageResize, ImageStyle, ImageUpload, removeFormat, SourceEditing, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, HorizontalLine, PageBreak, TextPartLanguage, Variables, GeneralHtmlSupport ], htmlSupport: { allow: [ { name: /.*/, attributes: true, classes: true, styles: true } ] }, language: { textPartLanguage: [ {title: 'English', languageCode: 'en'}, {title: 'Farsi', languageCode: 'fa'} ] }, contentFilter: { allowAttributes: { 'ol': ['dir'], 'ul': ['dir'], 'li': ['dir'] } }, toolbar: [ { name: 'heading', items: ['Heading1', 'Heading2', 'Heading3', 'Heading4', 'Heading5', 'Heading6'] }, 'textPartLanguage', 'heading', '|', 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'blockQuote', 'bulletedList', 'numberedList', 'fontFamily', 'fontSize', 'fontBackgroundColor', 'fontColor', 'specialCharacters', 'link', // 'imageUpload', 'mediaEmbed', 'imageInsert', 'insertTable', 'horizontalLine', 'pageBreak', '|', 'alignment', 'outdent', 'indent', '|', 'code', 'codeBlock', 'findAndReplace', 'sourceEditing', 'undo', 'redo', 'removeFormat', '|', 'footnotes', 'variables' ], alignment: { options: ['left', 'right', 'center', 'justify'] }, image: { toolbar: ['imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative'] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ], }, allowedContent: true, ignoreEmptyParagraph: false, } ) .then(ckeditor => { const editorId = ${id}; window[editorId] = ckeditor; }) .catch(error => { console.error(error); }); }

ckeditor / ckeditor5

I Empty Tag Support In Ckeditor 5 #16775