I am using WYSIWYG and CKeditor of Octobercms to edit the text through the admin panel. But, as I edit the text all the spaces present between the HTML tags are replaced with "&" and I get the following error
I looked at the ckeditor.js file to find any function that is being called to parse the HTML but I could not solve it.
Original code:
<div class="container d-flex align-items-center px-4">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<form action="#" class="searchform order-lg-last">
<div class="form-group d-flex">
<input type="text" class="form-control pl-3" placeholder="Search">
<button type="submit" placeholder="" class="form-control search"><span class="ion-ios-search"></span></button>
</div>
</form>
<div class="collapse navbar-collapse" id="ftco-nav">
{% component 'menu' %}
Code replaced by Ckeditor:
<div class="container d-flex align-items-center px-4">Menu
<form action="#">
<div class="form-group d-flex"><input type="text" /></div>
</form>
<div class="collapse navbar-collapse" id="ftco-nav">{% component 'menu' %}
Not only "&" but I am getting other characters as well such as "#". I expect the spaces not to be replaced with such characters.
Add the following to your config.js file:
CKEDITOR.editorConfig = function( config ) {
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.config.forcePasteAsPlainText = false;
CKEDITOR.config.basicEntities = true;
CKEDITOR.config.entities = false;
CKEDITOR.config.entities_latin = false;
CKEDITOR.config.entities_greek = false;
CKEDITOR.config.entities_processNumerical = false;
CKEDITOR.config.fillEmptyBlocks = function (element) {
return true;
};
CKEDITOR.config.autoParagraph = false;
CKEDITOR.config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty.span = 0;
CKEDITOR.dtd.a.div = 1;
CKEDITOR.dtd.a.p = 1;
};