Как получить подпись (caption) у изображения при использовании метода editor.blocks.renderFromHTML() в редакторе EditorJS?

Как сохранить подпись к изображениям в HTML для последующего редактирования при использовании метода editor.blocks.renderFromHTML()?
  • 13 августа 2024 г. 16:03
Ответы на вопрос 2
При использовании метода editor.blocks.renderFromHTML() для отображения блоков изображений в редакторе EditorJS, подпись к изображениям можно получить следующим образом:

1. Используйте атрибут "data-caption" для добавления подписи к изображению в HTML коде. Например:

```html
<img src="example.jpg" data-caption="Это подпись к изображению">
```

2. При использовании метода editor.blocks.renderFromHTML(), пройдите по каждому блоку изображения и достаньте значение атрибута "data-caption". Например:

```javascript
editor.blocks.renderFromHTML('<img src="example.jpg" data-caption="Это подпись к изображению">');
const blocks = editor.blocks.getBlockByType('image'); // Получаем все блоки изображений
blocks.forEach((block) => {
  const caption = block.data.caption || ''; // Получаем подпись к изображению
  console.log(caption); // Выводим подпись в консоль
});
```

Чтобы сохранить подпись к изображениям в HTML для последующего редактирования, вы можете добавить значение атрибута "data-caption" к каждому изображению и затем сохранить его в JSON формате для последующего использования.
Сам спросил - сам и отвечу))) Думаю еще пригодится... 
Решить задачу с помощью editor.blocks.renderFromHTML() у меня не получилось....
Ситуация такая, что json из editorJS мне нужно передать в БД для корректного отображения в редакторе TinyMCE в панели управления Joomla. Поэтому преобразование из json в html просто необходимо.
Далее встал вопрос, как html обратно сделать json, для чего я и хотел использовать editor.blocks.renderFromHTML(), но документации нет и ни чего у меня сделать из этого не получилось. Вопрос я решил с помощью функции на PHP, которая преобразовывает HTML в массив, а далее из массива я уже построил нужный мне json

function html_to_obj( $html ) {
    $dom = new DOMDocument();
    $dom->loadHTML( $html );
    return element_to_obj( $dom->documentElement );
}

function element_to_obj( $element ) {
	if ( isset( $element->tagName ) ) {
		$obj = array( 'tag' => $element->tagName );
	}
	if ( isset( $element->attributes ) ) {
		foreach ( $element->attributes as $attribute ) {
			$obj[ $attribute->name ] = $attribute->value;
		}
	}
	if ( isset( $element->childNodes ) ) {
		foreach ( $element->childNodes as $subElement ) {
			if ( $subElement->nodeType == XML_TEXT_NODE ) {
				$obj['html'] = $subElement->wholeText;
			} elseif ( $subElement->nodeType == XML_CDATA_SECTION_NODE ) {
				$obj['html'] = $subElement->data;
        	} else {
				$obj['children'][] = element_to_obj( $subElement );
			}
		}
	}
    return ( isset( $obj ) ) ? $obj : null;
}
Похожие вопросы