JSON to back to html, How? #676

linuxtrader · 2019-04-03T14:20:32Z

So cool that it outputs clean data...
Then how do I convert this clean data to html, so I can, as you say, use it it in a web page?

Thanks!

mu-yu · 2019-04-04T03:27:11Z

we need a readOnly init option but the editor.js doesn't provide.

roennow · 2019-04-04T06:37:56Z

https://github.com/editor-js/editorjs-php

neSpecc · 2019-04-04T07:11:15Z

Rendering an Editor.js JSON is a trivial and specific task, that depends on plugins and technologies you use.

For example

{
    "time" : 1550476186479,
    "blocks" : [
        {
            "type" : "paragraph",
            "data" : {
                "text" : "The example of text that was written in <b>one of popular</b> text editors."
            }
        },
        {
            "type" : "header",
            "data" : {
                "text" : "With the header of course",
                "level" : 2
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "So what do we have?"
            }
        }
    ],
    "version" : "2.8.1"
}

with the simplest for and switch turnes into

<p>
   The example of text that was written in <b>one of popular</b> text editors.
</p>
<h2>
   With the header of course
</h2>
<p>
   So what do we have?
</p>

We does not know a set of users plugins, so we can not provide a universal rendering tool. But the other side is a freedom of design — you can create any markup and logic you need.

Some simple examples:

Nodejs + Twig

https://github.com/codex-team/codex.docs/blob/master/src/views/pages/page.twig#L36
https://github.com/codex-team/codex.docs/tree/master/src/views/pages/blocks

PHP

https://github.com/codex-team/codex/blob/master/www/application/classes/Controller/Articles/Index.php#L189
https://github.com/codex-team/codex/tree/master/www/application/views/templates/editor/plugins

neSpecc · 2019-04-04T07:23:03Z

@mu-yu

We thought about readOnly mode. It will come with next updates in this year.

The problem of using this method for rendering an articles is that some of complex plugins provide an UI that different between data filling and rendering. For example, Poll block — in Editor it is a set of inputs, but at article it is a dynamic module with the different UI. And there are some other created tools with similar behaviour. We will search a solution.

rolfo85 · 2019-04-05T04:50:47Z

https://github.com/editor-js/editorjs-php

Excuse me, I'm super ignorant, but I installed the PHP plugin you mentioned, cause I understood it was supposed to return raw HTML out of the JSON object. But it returns another JSON that is like the .
So what is that for?
Can I render regular HTML in a div with that PHP plugin?

I'm not understanding how can i just print the editor content in HTML format without having that JSON

Thanks!

roennow · 2019-04-05T06:23:58Z

Can I render regular HTML in a div with that PHP plugin?

Sorry I haven't looked at the code but the readme said it would output the block objects but apparently not. Guess this it not the case and the true purpose was lost in translation

rolfo85 · 2019-04-05T13:52:24Z

No worries.
I started rendering the HTML manually

niiapa · 2019-04-23T13:07:59Z

I love this tool but also need raw HTML output. The work we do is a bit too dynamic for switch statements. Can't switch between all the html types... I mean you can, but it's cumbersome and finicky. Looking forward to the update.

ddimitrioglo · 2019-04-29T18:56:35Z

+1 to have something like readOnly or viewMode or even better to have toHtml() method which will allow to convert blocks into raw html.

sedgeek · 2019-05-10T16:08:04Z

maybe use contenteditable=false solve problem

this.editor = new EditorJS({
.
.
.
        onReady: () => {
          var elements = document.querySelectorAll('[contenteditable=true]')
          elements.forEach(element => {
            element.setAttribute('contenteditable' , false)
          });
        }
})

and simple css to hide toolbars

#codex-editor .ce-toolbar__plus{ 
     display: none; 
   } 

   #codex-editor .ce-toolbar{ 
     display:none; 
   }

or
document.getElementsByClassName('ce-toolbar')[0].style.display="none"

wotta · 2019-05-13T08:06:09Z

We also had this problem.
Our solution is to transform the rendering on the server side.

Since we use Laravel we made a plugin that works with little configuration and is extendable.
In case you are interested, I will gladly supply the link.
(I won't self advertise it without an actual question to stay respectful for the codex team )

dsignr · 2019-05-25T08:27:57Z

There is a reason why many editors don't output these sort of JSONs and choose raw HTML instead. Because, to translate that JSON back to HTML, you're going to have to write a parser and that's just basically re-inventing the wheel when you could've started with HTML in the first place.
The suggested approach is not worth the business case just to use a text editor - There are tons of HTML tags to switch case, and this is not even including the complex custom blocks that are possible (that for example we've developed). Eg. our plugin has a two column grid which it outputs, now I also need to write a complicated function to parse that, on top of writing the plugin itself. Otherwise, this is such a great idea and project.

For the moment, anyone seeking an alternative, look into this old, simple, well maintained project:
https://madebymany.github.io/sir-trevor-js/

It's the same idea, but makes no assumptions about the format (JSON/HTML).

petarmitanoski · 2019-07-08T14:47:50Z

Hello, @wotta

We're having the same issue.
Would you please share your solution with us?

wotta · 2019-07-09T05:22:35Z

Hello @petarmitanoski,

Hope this reaches you in time since I just woke up.
We made a small package that handles the converting the default types that we have included so far.
But all the converters that exists can be overwritten and new ones can be created.

Please see the following repository.
If you have any questions please open a ticket and I will respond to it as quick as possible.

despeauxz · 2019-07-13T13:44:25Z

@wotta The package you suggested up there is just for PHP, supposedly, is there any made editor that can be used to convert the Object JSON blocks to raw HTML? Cos I'm working on a project which has been started with EditorJS and wouldn't want to resolve to another WYSIWYG editor? Really need a reply soonest. Thanks

wotta · 2019-07-13T13:50:40Z

@despeauxz Not really sure if I fully understand your question. The package I linked is to convert the data that we save from EditorJS to the database.

So we save the data from EditorJS to our backend which is saved in the database.
But our presentation layer uses the above package to convert the saved data back to HTML.

We don't use a custom editor. I hope this is an answer to your question.

despeauxz · 2019-07-13T13:55:19Z

@wotta, Got your explanation. I'm currently not working on a PHP project, It's a Javascript/React Project. Could you suggest any package that transforms the data from the JSON block before hitting the database?

wotta · 2019-07-13T13:58:52Z

@despeauxz Sorry I don't know a package that does that. You could make your own package if you cannot find anything. ( or even anything that fits your needs )

You know the data structure which makes it pretty easy to convert it to HTML.
I hope you find something that helps you.

wreiske · 2019-07-22T18:08:43Z

Just a rough example here how one could go about converting the JSON to HTML.

https://jsfiddle.net/wreiske/5Le9kwcv/

despeauxz · 2019-07-22T19:24:44Z

Thanks Williams, I already got my head around it. Thanks a lot❤

…

On Mon, Jul 22, 2019 at 7:08 PM William Reiske ***@***.***> wrote: Just a rough example here how one could go about converting the JSON to HTML. https://jsfiddle.net/wreiske/5Le9kwcv/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#676?email_source=notifications&email_token=AEATVS3E7DWG7KXW3CXBWB3QAXZTHA5CNFSM4HDKSBDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2QWGXA#issuecomment-513893212>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEATVS5HNQCMRQRBDW7NRK3QAXZTHANCNFSM4HDKSBDA> .

despeauxz · 2019-07-22T19:27:56Z

This might save someone, just want to drop this
It converts the JSON blocks back to HTML

https://repl.it/@GodwinOnimisi/heloo

panpansh · 2019-08-20T07:05:13Z

Thanks to all 👍
here my needs (Header, Paragraph, Table, Checklist, Delimiter)
https://github.com/panpansh/editorjs-json-to-html

wotta · 2019-08-20T07:13:24Z

@panpash I would make it a npm package :)

panpansh · 2019-08-20T08:26:07Z

@wotta now it's compatible with internet explorer but I have a question,
did you have a editorjs.js IE compatible version or exist a polyfill ?
Regards

wotta · 2019-08-20T08:35:58Z

To be honest, I am not sure.
I installed editorjs as the docs state so I am not completely sure if it works in IE. ( I don't support IE at all normally )

tkaravou · 2019-08-21T14:58:11Z

If you don't care about the class names, you already have the html present for you: document.getElementById('editorjs').innerHTML

panpansh · 2019-08-22T08:53:44Z

@tkaravou , I don't load editorjs scripts and don't init editorjs on read-only view.
just taking data and display it as html with some css from editorjs/plugins.
editorjs is an html helper for the writter, not the reader (in my opinion).

yaneony · 2019-10-01T12:29:50Z

Still no progress here?

alexanderhorner · 2020-02-18T13:34:24Z

Here's my solution for converting the blocks to html

foreach ($blocks as $block) {
  
  // paragraph
  if ($block['type'] == 'paragraph') {
    $return .= '<p>'.$block['data']['text']."</p>\n";
  }
  
  // header
  else if ($block['type'] == 'header') {
    $return .= '<h'.$block['data']['level'].'>'.$block['data']['text'].'</h'.$block['data']['level'].">\n";
  }

  // list
  else if ($block['type'] == 'list') {
    $listtag = ($block['data']['style'] == 'ordered') ? 'ol' : 'ul';
    $return .= '<'.$listtag.">\n";
    foreach ($block['data']['items'] as $itemtext) {
      $return .= "\t<li>".$itemtext."</li>\n";
    }
    $return .= '</'.$listtag.">\n";
  }

}

Murrengan · 2020-03-30T17:46:11Z

This is my solution for vue.js

fromEditorJStoVuejs.txt

pavittarx · 2020-04-27T04:18:06Z

I created this simple utility for parsing clean data to html, after going through these issues. I would love if anyone else wanted to use it. Use it in the browser or node, or simply extend it to suit your needs.
https://github.com/pavittarx/editorjs-html

dquak · 2020-05-15T19:32:56Z

@pavittarx Amazing simple and great package! I'm using it in my react project! Thank you very much, definitely saved me few hours!

pavittarx · 2020-05-16T12:45:45Z

thanks @dquak , I'm glad to see it have been helpful to you. <3 I hope you have starred the repo already.

Also, if you do feel there is something missing, please do let me know.

osman0000 · 2020-05-16T14:39:08Z

Hello @pavittarx thanks for your package ;) Can you please tell me how to use it right ?
I get the json data saved with editor.js from my db and I usi it like this :
let html = edjsParser.parse($httpRequest.responseText);`
But apparently this is not correct..

dquak · 2020-05-16T14:43:19Z

Hello @pavittarx thanks for your package ;) Can you please tell me how to use it right ?

I get the json data saved with editor.js from my db and I usi it like this :

let html = edjsParser.parse($httpRequest.responseText);`

But apparently this is not correct..

@osman0000 Are you sure your data is in JSON structure?
If not try to ‘JSON.parse’ it before passing is to the parse function

osman0000 · 2020-05-16T14:48:46Z

Thanks for your reply @dquak !
I tried this : let html = edjsParser.parse(JSON.parse($httpRequest.responseText));
And I now I get this error : TypeError: transforms[block.type] is not a function

dquak · 2020-05-16T14:51:47Z

You can go deep to the package code, it’s a very simple one and self understanding.. From your error it seem like your blocks doesn’t have the right schema created by the editor JS of {blocks: [{ type:’header’, data:{} }]}

…

On Sat, 16 May 2020 at 17:48 osman0000 ***@***.***> wrote: Thanks for your reply @dquak <https://github.com/dquak> ! I tried this : let html = edjsParser.parse(JSON.parse($httpRequest.responseText)); And I now I get this error : TypeError: transforms[block.type] is not a function — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#676 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC43P5LDNMTA7GI6PKL5UR3RR2RVXANCNFSM4HDKSBDA> .

osman0000 · 2020-05-16T14:57:20Z

here is the datas that I saved :
[{"type":"paragraph","data":{"text":some text."}},{"type":"paragraph","data":{"text":"more text."}},{"type":"paragraph","data":{"text":"more text."}}]
I think I didn't save it right because there is no "{blocks" before the datas
Thanks you, I'm going to correct the saving part and try again ;)

pavittarx · 2020-05-16T15:42:28Z

@osman0000
The problem here lies in the fact that, the parser function for block.type == paragraph has not been defined. So, the parser is clueless when you pass a block of type "paragraph".

If you see the docs, the supported block.types as of now are Header, Lists, Images, Delimeter. I haven't added to much parsing support since, you may want to vary the html markup of your blocks. But, there is support for adding your own parser functions.

So you would simply have to do this:

// define parser function for paragraph block
const paragraph = (data) => {
    return `<p> ${data.text} </p>`;
}

// pass it to the parser intializer function.
const edjsParser =  edjsHTML({ paragraph });

See: https://github.com/pavittarx/editorjs-html#extend-for-custom-blocks

I will add more descriptive errors and paragraph support. Let me know if you still face any problems, Thanks. <3

osman0000 · 2020-05-16T15:47:50Z

Hey @pavittarx thanks for your reply ! I'll try that ;)

osman0000 · 2020-05-16T17:12:51Z

I tried that :

const paragraph = (block) => {
    return `<p> ${block.data.text} </p>;
}

const edjsParser =  edjsHTML({ paragraph });
let html = edjsParser.paragraph($httpRequest.responseText);

console.log(html);

But I get this error :
'TypeError: edjsParser.paragraph is not a function'

pavittarx · 2020-05-16T18:06:18Z

@osman0000
There seems to be some issue with your data, please do pass in generated data as you get from the editorjs. The json gave me error when I tried to parse it. Also, if you have extracted the blocks portion from the generated data, do wrap it inside an object when passing it. It should be like, edjsParser.parse({ blocks }); or you can just pass the data as is as you get it from editorjs.

I have made this working example for you to have a look: https://repl.it/@pavittarx/editorjs-browser

Apologies:

It should be, since only data property is being passed.

let paragraph = (data)=>{
    return `<p> ${data.text}</p>`
}

osman0000 · 2020-05-17T08:12:59Z

Hello @pavittarx. Thanks for your reply, the way that I saved my data was wrong so I got some error but now everytging is ok ;) Everything works very fine ! Thanks a lot !

eurobob · 2020-06-06T23:12:54Z

This one is great for React

https://github.com/BomdiZane/EditorJS-React-Renderer

yogaaltariz · 2020-06-26T09:50:26Z

this is example for vue

https://codepen.io/yogaaltariz/pen/wvMqBNM

JunaidQadirB · 2020-08-01T19:39:33Z

Here's my solution for converting the blocks to html

foreach ($blocks as $block) {
  
  // paragraph
  if ($block['type'] == 'paragraph') {
    $return .= '<p>'.$block['data']['text']."</p>\n";
  }
  
  // header
  else if ($block['type'] == 'header') {
    $return .= '<h'.$block['data']['level'].'>'.$block['data']['text'].'</h'.$block['data']['level'].">\n";
  }

  // list
  else if ($block['type'] == 'list') {
    $listtag = ($block['data']['style'] == 'ordered') ? 'ol' : 'ul';
    $return .= '<'.$listtag.">\n";
    foreach ($block['data']['items'] as $itemtext) {
      $return .= "\t<li>".$itemtext."</li>\n";
    }
    $return .= '</'.$listtag.">\n";
  }

}

Based on this here's a trait

https://gist.github.com/JunaidQadirB/4df3c7daa5cb2ab40639df65e55ced80

miadabdi · 2020-10-07T13:25:01Z

I've created a package for this purpose. editorjs-parser
It supports :

Paragraph
Header
Table
Raw
Delimiter
Code
Quote
List
Embed
Image

It also is configurable.

khaydarov · 2020-11-21T15:17:03Z

For server-side rendering you should use backend technology that cleans, validates and stores Editor's data, and then it could be rendered with any templating engine. Check out implemented packages in our awesome list awesome-list. Read only mode was included in v2.19

Muntader · 2021-08-07T13:16:20Z

I've created a simple package for Laravel framework work with JSON validation using editorjs-php
laravel-editorjs-html

Support

Header
Paragraph
Table
List
Delimiter
Code
Quote
Embed
Image
Checklist
Link
Raw

Thank you codex-team

nguyenduc308 · 2021-09-13T16:04:59Z

Hi there, please give me a way to save blocks to database.
how can i save to json column ?

smostafad · 2021-09-21T18:38:25Z

Hello , I want to change the json file dynamically, that is, the user fills in the information on the site and downloads the new json file. Can you help me?

neSpecc added the discussion label Apr 4, 2019

rmlamarche mentioned this issue Aug 12, 2019

json to html on frontend... #860

Closed

Jungwoo-An mentioned this issue Jan 17, 2020

Is there a way to lock the content? Jungwoo-An/react-editor-js#19

Closed

Jungwoo-An mentioned this issue Feb 29, 2020

I don't know how to bring articles edited from this library to users Jungwoo-An/react-editor-js#22

Closed

gohabereg mentioned this issue Apr 18, 2020

How to render json data with html tags on web view #1091

Closed

literakl mentioned this issue Aug 21, 2020

Editor prototype literakl/mezinamiridici#79

Closed

khaydarov closed this as completed Nov 21, 2020

aatrubilin mentioned this issue Feb 6, 2021

How to render data. VLZH/django-editorjs#5

Open

deshetti mentioned this issue Jul 9, 2021

studio: Provide a field to convert the EditorJS blocks into HTML. factly/dega#265

Closed

JSON to back to html, How? #676

JSON to back to html, How? #676

Comments

linuxtrader commented Apr 3, 2019

mu-yu commented Apr 4, 2019

roennow commented Apr 4, 2019

neSpecc commented Apr 4, 2019 • edited Loading

Some simple examples:

neSpecc commented Apr 4, 2019

rolfo85 commented Apr 5, 2019

roennow commented Apr 5, 2019 • edited Loading

rolfo85 commented Apr 5, 2019

niiapa commented Apr 23, 2019

ddimitrioglo commented Apr 29, 2019

sedgeek commented May 10, 2019 • edited Loading

wotta commented May 13, 2019

dsignr commented May 25, 2019

petarmitanoski commented Jul 8, 2019

wotta commented Jul 9, 2019

despeauxz commented Jul 13, 2019

wotta commented Jul 13, 2019

despeauxz commented Jul 13, 2019

wotta commented Jul 13, 2019

wreiske commented Jul 22, 2019

despeauxz commented Jul 22, 2019 via email

despeauxz commented Jul 22, 2019

panpansh commented Aug 20, 2019

wotta commented Aug 20, 2019

panpansh commented Aug 20, 2019

wotta commented Aug 20, 2019

tkaravou commented Aug 21, 2019

panpansh commented Aug 22, 2019

yaneony commented Oct 1, 2019

alexanderhorner commented Feb 18, 2020 • edited Loading

Murrengan commented Mar 30, 2020 • edited Loading

pavittarx commented Apr 27, 2020

dquak commented May 15, 2020

pavittarx commented May 16, 2020 • edited Loading

osman0000 commented May 16, 2020

dquak commented May 16, 2020

osman0000 commented May 16, 2020

dquak commented May 16, 2020 via email • edited Loading

osman0000 commented May 16, 2020 • edited Loading

pavittarx commented May 16, 2020 • edited Loading

osman0000 commented May 16, 2020

osman0000 commented May 16, 2020 • edited Loading

pavittarx commented May 16, 2020 • edited Loading

osman0000 commented May 17, 2020

eurobob commented Jun 6, 2020

yogaaltariz commented Jun 26, 2020

JunaidQadirB commented Aug 1, 2020

miadabdi commented Oct 7, 2020 • edited Loading

khaydarov commented Nov 21, 2020 • edited Loading

Muntader commented Aug 7, 2021

Support

nguyenduc308 commented Sep 13, 2021

smostafad commented Sep 21, 2021

neSpecc commented Apr 4, 2019 •

edited

Loading

roennow commented Apr 5, 2019 •

edited

Loading

sedgeek commented May 10, 2019 •

edited

Loading

alexanderhorner commented Feb 18, 2020 •

edited

Loading

Murrengan commented Mar 30, 2020 •

edited

Loading

pavittarx commented May 16, 2020 •

edited

Loading

dquak commented May 16, 2020 via email •

edited

Loading

osman0000 commented May 16, 2020 •

edited

Loading

pavittarx commented May 16, 2020 •

edited

Loading

osman0000 commented May 16, 2020 •

edited

Loading

pavittarx commented May 16, 2020 •

edited

Loading

miadabdi commented Oct 7, 2020 •

edited

Loading

khaydarov commented Nov 21, 2020 •

edited

Loading