Search code examples
laravelckeditorwysiwygoctobercms

Unexpected character "&" while editing the text using the editor


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

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 &#39;menu&#39; %} 

Not only "&" but I am getting other characters as well such as "#". I expect the spaces not to be replaced with such characters.


Solution

  • 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;
    };