Iframe support

[Steve1820]

Hey guys!

Awesome library.

I was wondering if there were any plans for iframe support? How would I go about inserting this to an iframe?

Thanks

[diedrick]

I've been trying to work on iframe support on my own, as I need the styles in the editor to match a different site's styles.

It starts to work by contentWindow:

var this_iframe_doc = document.getElementById('wysiwyg-iframe').contentWindow.document.getElementById('wysiwyg-iframe-div-inside')

And then:

blockEditor = new EditorJS({
	holder : this_iframe_doc,
	...

You'll have to paste all the embedded <style> tags -- a couple of main ones and one for each plugin that supports it. Then it lays out better.

But then... some functions don't work, like adding a new block by pressing enter:
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I'd love to see more support for iframe or some way to inject CSS just into the editor's contents.

[diedrick]

I've got another solution for making this work in an iframe -- the iframe independently has all the editor js code, and I inject the content to edit into a hidden textarea, and then invoke the editor js code on the iframe with the contents of the hidden textarea.

The editor has a bit of styles with it in <style> tags that override my page's styles, but I'm removing styles from the elements themselves:

header_elements = document.querySelectorAll('.ce-header,.cdx-list--unordered,.cdx-list')
for (var i=0; i<header_elements.length; i++) {
	header_elements[i].classList.remove('ce-header', 'cdx-list--unordered', 'cdx-list'));
}

And it's still saving the changes properly. Some classes do seem to be needed by the logic, so if you remove them items don't show up.

When you create new items, you'll need to check for them:

onChange: (data) => {
	current_block_index = blockEditor.blocks.getCurrentBlockIndex();
	current_block = blockEditor.blocks.getBlockByIndex(current_block_index);
	if (current_block.name=='header') {
		header_elements = document.querySelectorAll('.ce-header')
		for (var i=0; i<header_elements.length; i++) {
			header_elements[i].classList.remove('ce-header');
		}
	}
}

Still discovering what else needs to happen, like clearing specifically added styles that affect functionality.

[imryanjay]

@diedrick Any updates on adding styles that affect functionality?

[hata6502]

The following library uses iframe.
https://github.com/hata6502/editorjs-inline
https://github.com/hata6502/editorjs-element