SCEditor Remove iFrame Tag

Views: 74

If you are using SCEditor as a rich text editor in your Angular/React application and you are trying are seeing that the iFrame tag is removed from the editor then I have a solution for your problem.

Problem:

The SCEditor is removing the iFrame tags to avoid the XSS attacks. How to allow the iFrame tags in SCEditor?

Solution:

So basically you need to tell the SCEditor that we have a list of allowed URLs that need to be whitelisted for iFrames. This can be done by providing an array of strings to the SCEditor instance as shown in the following code:

sceditor.create(this.scEditor.nativeElement, {
      format: 'xhtml',
      style: 'https://cdn.jsdelivr.net/npm/sceditor@3/minified/themes/content/default.min.css',
      toolbar: "bold,italic,underline|left,center,right,justify|font,size,color,removeformat|bulletlist,orderedlist|ltr,rtl|image,table,link,unlink,youtube,code|maximize,source",
      emoticonsEnabled:false,
      allowedIframeUrls: ['https://sketchfab.com/']
});

I hope this solution will help you fix your problem. If you have any questions, please ask in the comments section. Thanks

Reference:

https://www.sceditor.com/posts/version-3-0-0-released/