codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
28.94k stars 2.09k forks source link

Change between edit and preview mode #875

Open danbars opened 5 years ago

danbars commented 5 years ago

I'm trying to understand what is the approach of edit vs. preview modes. 2 examples:

  1. The link plugin starts by showing an input box. After pasting a URL it renders a preview of that URL, but than there's no way to return and edit the link (only delete it and create a new one)
  2. The image plugin starts by showing an upload button. Once the image is uploaded you cannot replace it.

Assuming I want to build plugins that allow editing after initial setup what is the right approach to do so? Ideally I'd like to show some popover tool that allows editing different properties of the block. Is there some example of something like that?

Thanks

danbars commented 5 years ago

Adding to my previous question - an opposite example is the raw html plugin - it only show the edit mode and you can't move to preview mode. I think that in order to get really useful editor there shoiuld be some way to move between preview and edit mode.

Any thoughts on this?

jgui1129 commented 5 years ago

You can make your own parser to convert the JSON to HTML then create a toggle button to switch between the editor and a div w/c loads the converted HTML code.

Sharing you an example.

Screen Shot 2019-11-14 at 12 27 31 AM Screen Shot 2019-11-14 at 12 29 20 AM Screen Shot 2019-11-14 at 12 27 38 AM