防止内容CSS更改Summernote html所见即所得编辑器页面

Question

We are using the Summernote wysiwyg editor to review/preview html content of which some contain external stylesheet references. Some of this css changes not only Summernote itself but the parent page within which Summernote resides.

To demonstrate, just go to the summernote.org page and drop this css reference into the online editor (selecting "< / >" for code view first). You should see the toolbar (and contents on some pages) becoming centered and other undesired changes because of the css that's within the editor :-

<link href="https://owa.kccd.edu/owa/14.3.248.2/themes/resources/logon.css" rel="stylesheet" type="text/css" />

We have tried to put summernote within an iframe tag but this doesnt help so is there a way of isolating summernote thus preventing this css "leakage" to the surrounding page?

For reference, we are using asp.net Razor pages.

Thanks. James

Answer 1

After much research it seems because Summernote does not reside within it's own iFrame, any CSS included within will naturally propogate to the surrounding page. Others have commented on this although I don't have that information source to hand.

We had no choice but to change to ckeditor, which is working really well for our needs.