.note-editable as Iframe

[Paperback]

I have done a bit of work to get summernote to optionally edit iframe contents.
My reasoning for doing this is so I can edit entire html documents inside summernote without having to worry about conflicting stylesheets or javascript issues.

I understand there are reasons for and against this, but what is everyone's thoughts on this?

[samitny]

I have the same use-case as yours, I'm looking to edit content within an iframe and I would like to keep it isolated.

Looks like some files, such as src/js/core/range.js will need to be refactored so that they don't use document directly.

For example, I had an issue with range selection, specifically, when range.create() is called. After a few hacks, selection worked fine. (I just set document to the target element's ownerDocument to test it out.)

It will definitely need more work, I'm using it with { airMode: true } and the positioning is completely off but I haven't looked into it, yet.

Personally, I think it's worth looking into this because it's useful and there are only ~35 references to document.

Is there anything else known, other than references to document that will need to be changed?

[Paperback]

Hi Sam,

I ended up creating src/js/core/document.js that passes the correct document based on whether the user is wanting to use an iframe or not. I also had to create src/js/core/iframe.js that can do some pretty useful although antiquated things like return the doctype as well as edit the iframe DOM. You will also have to pass any events you want to use that originate inside the document. Lastly a smaller thing you might want to do is inject or provide some css in the iframe so it has a relatively normal style, particularly if you want to use tables like that are presented originally.

In the end, what I have done works, but isn't anywhere near perfect.

You can view or make changes to my repo and view the changes, although it's almost two months behind the official summernote repo but I intend to cherry pick the changes soon.

[samitny]

@Paperback - Hey! First, thank you for sharing!

Second, it looks like my use-case is a bit different, perhaps there's a better way to do what I'm trying to accomplish.

I'm working on a basic template editor, however, those templates will be rendered on email clients, which makes editing a bit more strict in terms of what can be change.

To ensure the template is displayed correctly (both while editing and the result of it), I decided to load the template inside an iframe and mark the editable elements with an specific attribute. Currently, summernote, along with its dependencies is included in the main window and I would like to use summernote in airMode to modify editable elements inside the iframe.

So to sum this up, instead of having each editable inside an iframe, I would like the editable sections to be inside a single iframe.

Is there a better way to accomplish this?

Thank you again for sharing, it's very helpful!

[bryan-ash]

@samitny I think I have a very similar use case to you. I want to provide a website admin interface that allows users to edit their site within an iframe.

Did you get anywhere with this?

[bryan-ash]

I created #931 to track discussion on enabling summernote on elements contained within a child iframe.

[kneeki]

Subscribed to this thread. I'm currently looking to achieve goal as @bryan-ash and @samitny.

[piernik]

Any news on this? It's very impotrant feature.
I want to use summernote form creating emails and style isolation is very important.
For example summernote adds table table-bordered class to every table and it looks totally different in mail program

[sjamesc]

I was surprised to find that the editor is in-fact not in an iframe (as is convention for WYSIWYG). I've experienced quite a few issues with conflicting CSS because of this.

[amnwebmaster]

Having the editor in an iframe would be very helpful. We have users create letters and emails within the editor so the styles need to reflect what will be generated.
It would be great if the editor could load in an iframe and a stylesheet URL could be passed to that iframe.

[andrewblake1]

Hoping to bump the priory of this up.

Would like to add that this would be useful to me also for same purpose as some users above i.e. emails template editor - hence css clashes.

Summernote was looking great until I just hit this problem which will probably mean unfortunately having to switch to a WYSISWYG editor that does use iframe for the content area - which I really don't want to do, but looking above it doesn't seem trivial to swap to iframe.

Will hold off swapping out summernote until the last possible moment in my development in the hope that the core developers add this as I see @hackerwins tagged this as v0.6.0 milestone (guess it was missed) so I guess it is acknowledged as a good idea but just needs someone capable with enough time to do it.

Cheers though to the developers for awesome plugin.

[kris7ian]

I need this too.. looks like I have to switch to an editor that uses iframes :/

[sarim]

I too stuck with this problem. In my app admin panel and front end uses different stylesheets. Now i can't include frontend stylesheet in admin panel bcz that'll break admin panel ui. But without frontend stylesheet, content in editor looks different than actual content in front end.

iframe and external stylesheet are IMO basic features of a WYSIWYG editor -_-

[jnessier]

Any solution for this problem?

[lqez]

I'm closing whole iframe related issues now, except this one for recording.

• We can use summernote in iframe without any support by summernote.
  • https://github.com/summernote/django-summernote has SummernoteWidget which provides iframe-ed summernote without any modification on summernote itself.
• Even if we can provide iframe-ed version of summernote, we - sometimes - have to use iframe again when we display the content comes from summernote.
• Summernote was born from Bootstrap. So if you aware the conflict between non-bootstrap pages with summernote contents, please use lite version. It uses a bootstrap-free setting.
• I believe that iframe will not be deprecated soon, but they're pretty obsoleted.

[highwindmx]

Enable < iframe > or < object > support may still be useful, for example:


if airMode is not used the toolbar will be overlapped, because loaded html content have a nav banner with "position:fixed" style.

Or some other way to avoid this issue?

[DennisSuitters]

I'm adding this to the Projects Feature Requests, so this can be explored some more.

[jtas01]

Need to edit content inside iframe in 2022.