Backend WYSIWYG text editor for pages removes html tags

[mmlunjwa]

I'm adding HTML into the text editor (Description) for different pages of my website. I've realised that when I add the HTML for the first time it all works fine. When I edit the page for the second time even if I'm just editing the title, specific tags in the description part get removed and sometimes they get wrapped into paragraphs. This makes it impossible for me to use the cms capabilities of Doptor.

here is an example:
I add the following html code:

        <section class="usp">
            <div class="box">
                <i class="fa fa-wifi"></i>
                <h3>Free WIFI</h3>
                <p>By providing free WIFI our guests can always keep their family and friends up to date about their stay in Cape Town.  </p>
            </div>
            <div class="box">
                <i class="fa fa-cutlery"></i>
                <h3>Free Breakfast</h3>
                <p>To enable you  a pleasant start into the day we provide all our guests a light and lovely breakfast. </p>
            </div>
            <div class="box">
                <i class="fa fa-user"></i>
                <h3>24 hour reception</h3>
                <p>In order to be always available for guests requests and to ensure that our guests experience also a safe stay in the night we offer a 24-hour reception. </p>
            </div>
        </section>

After saving for the first time, all seems to work fine. But then when I come back to edit the page. Upon saving tags get removed completely. This is how it look like after saving the second time:

        <section class="usp">
            <div class="box">
                <h3>Free WIFI</h3>
                <p>By providing free WIFI our guests can always keep their family and friends up to date about their stay in Cape Town.  </p>
            </div>
            <div class="box">
                <h3>Free Breakfast</h3>
                <p>To enable you  a pleasant start into the day we provide all our guests a light and lovely breakfast. </p>
            </div>
            <div class="box">
                <h3>24 hour reception</h3>
                <p>In order to be always available for guests requests and to ensure that our guests experience also a safe stay in the night we offer a 24-hour reception. </p>
            </div>
        </section>

As you can see the following tags have been completely removed:

                <i class="fa fa-wifi"></i>

                <i class="fa fa-cutlery"></i>

                <i class="fa fa-user"></i>

Here is a picture of the text editor marked in red:

Please let me know where I'm going wrong

[SubodhDahal]

CKEditor tries to fix the html code entered via the Source but CKEditor 4 doesn't support HTML5 completely, that's why the i tag is being stripped. I have sent a pull request to not strip the i tag and also upgrade the CKEditor version in https://github.com/Doptor/Doptor/pull/121. Still the version is 4 and full HTML5 would probably only be available in CKEditor 5.

[mmlunjwa]

Thanks for your responce, the i tag is now working. However my template heavily relies on HTML5 and i've discoverd that more tags are being removed. I'm at the moment thinking of changing CKEditor to a WYSIWYG text editor that supports HTML5. Do you perhaps know an open source WYSIWYG text editor that supports HTML5?
Is there a specific file where i can maually add HTML5 tags to CKEditor?

[SubodhDahal]

If you're completely writing the markup then you can use normal textarea instead of the CKeditor.

You can add tags in the file public/assets/backend/default/plugins/ckeditor/config.js You need to add new tag like config.protectedSource.push(/<i[^>]*><\/i>/g);. Replace i inside the config.protectedSource.push function with your tag name.