Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MrMooky's avatar

"Disassemble" HTML

For an existing project I want to change my editor from TinyMCE to EditorJS. Creating new content works fine already. But I have around 2k "old" entries I need to convert to the new format. Basically, TinyMCE stores the full HTML source with <div> and all that.

EditorJS stores cleaner JSON, like this, which allows me to parse the elements the way I want to.

This is an example on now the new data is stored in the database:

{
	"time": 1646670246973,
	"blocks": [
		{
			"id": "lyez4SLqIO",
			"data": {
				"text": "This is a test"
			},
			"type": "paragraph"
		},
		{
			"id": "S41StgWZCx",
			"data": {
				"text": "Headline One",
				"level": 3
			},
			"type": "header"
		},
		{
			"id": "5m84NVRPuJ",
			"data": {
				"text": "More text..."
			},
			"type": "paragraph"
		}
	],
	"version": "2.23.2"
}

Like I said, I have lots of old data that looks like this:

<div><p>adsfdsfadsfdsfadf</p></div>
<div><p><img src="https://cdn.example.com/85da5087-a5e3-40f7-aa8d-2cfa23cab329/attachments/screen-5_1645774964.png" alt="" width="790" height="444" /></p></div>

It's usually much more content and a bit more complex, including iframes and stuff. What would be the best way to convert the old, standard HTML to the new format?

This is my starting point right now. My problem now is how to get data for $bodyBlocks?

$body = $submission->body;
$blocks = [];

foreach ($bodyBlocks as $item) {
    $blocks[] = [
        'id' => 'lyez4SLqIO',
        'data' => [
            'text' => 'Headline One',
            'level' => 3,
        ],
        'type' => 'headline'
    ];
}

$submission->json = [
    'time' => now(),
    'blocks' => $blocks,
    'version' => '2.23.2'
];

$submission->save();
0 likes
3 replies
Snapey's avatar

can't you leave as is, and use ckeditor for old content and editor.js for the new content only? Store a flag on the record to say which editor to use for a given piece of content?

If you came up with a strategy to convert it, you would probably still want to eyeball it, so it might be better to have a convert screen where you have both editors present and you can manually copy and paste over?

willatkins's avatar

@mrmooky Did you ever find a solution to this? I have a similar issue with wanting to migrate from one editor that stores html to editorjs.

Please or to participate in this conversation.