search

OscarGodson / EpicEditor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.
http://epiceditor.com
MIT License
4.25k stars 334 forks source link

Split editor without going fullscreen #293

Closed sylvaingi closed 9 years ago

sylvaingi commented 11 years ago

Just found out about this terrific project and I'm considering using it for building a lightweight CMS!

I'm wondering if something like http://ghost.org/features/ is possible using EpicEditor, where we have split editing and previewing displayed side by side, without going fullscreen.

OscarGodson commented 11 years ago

I know this has been brought up but GitHub search is failing me. I want to make this an option for sure. There's a couple hacks you can do now. One is this:

https://gist.github.com/OscarGodson/d58ef4994ee703ce6622

(basically make a div yourself, but use the same CSS, and on update export the HTML into your div)

The other hack is to make an iframe, put your editor inside of that, and run enterFullscreen inside of the iframe. Due to browser security it wont open as real fullscreen, only fullscreen within that iframe.

sylvaingi commented 11 years ago

Thanks for the hacks, I'll begin with those :)

Also if you can point out some of the stuff that needs to be changed, I could try to write a PR that would add this option.

OscarGodson commented 11 years ago

That would be super awesome! I think you'd mainly have to add an option (maybe something like layout: 'split' or layout: 'full' (default) or something? You'd add that here:

https://github.com/OscarGodson/EpicEditor/blob/develop/src/editor.js#L322-L362

I think _goFullscreen would have to be refactored to not open on the window, but the container and just window by default. If you pass in a container it'd run the same sizing code here: https://github.com/OscarGodson/EpicEditor/blob/develop/src/editor.js#L703-L817

but against the element, not the window. You'd be able to ignore the native/non-native fullscreen code too.

Also, you'd need to make sure fullscreen still works. You could have split view in non-fullscreen and then open it in fullscreen. If you attempt this and ever get stuck let me know!