We were trying to add the google map iframe HTML code in the CKeditor of Opencart but by default, the HTML encode output is disabled on Opencart 4+, so to enable we need to change the CKeditor configuration and make the CKeditor support the HTML and iframe code. The General HTML Support allows for adding markups like elements, attributes, classes, and styles to the source and prevents it from being filtered from the editor window and the output.
Enable the General HTML Support for CKeditor in Opencart 4
In the config.js file find config.htmlEncodeOutput = false, and change it to true.
config.htmlEncodeOutput = true;
And also make sure there is
config.allowedContent = true;
With this config change and clearing the website cache, now you can add the iframe and HTML code in the CKeditor.
Demo example of google map iframe
We added the iframe of google map in the HTML module and show it in the contact us page
In this way, you can configure the CKeditor to add the iframe, scripts and HTML markups like elements, attributes, classes, and styles. Please let us know if you have any other issues that you are facing then we can look at it, you can email us at firstname.lastname@example.org. Hope you liked this tutorial, please subscribe to our YouTube Channel and read more about Opencart Documentation. You can also find us on Twitter and Facebook.