I Empty Tag Support In Ckeditor 5 #16775
Comments
|
Version Ckeditor : |
|
Check out the However, you will need to update CKEditor first, because you use a very old version of it. |
Reinmar
added
the
resolution:resolved
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);
});
}
The text was updated successfully, but these errors were encountered: