Draft-js: How to insert inline image

[linzerui]

I found that the inserted image witch in the media example was wrapped with figure tag.
How can I render an image just with img tag as inline element?

[hellendag]

Each block is expected to be rendered as a block-level element. You can use CSS to style it as needed.

Why do you want to have an img element without a wrapper?

As much as possible, the DOM output of a Draft editor should be regarded as an implementation detail. If you are depending on the editor HTML for storage, you should not do so. Instead, you should use convertToRaw and to convert the editor contents to plain JS objects, then convert to your desired format as needed.

[linzerui]

Thanks! I think I get it now.

[andrei-cocorean]

One situation where you might want imgs without a wrapper is displaying emojis. Usually you want to replace the Unicode symbol with an inline image. So far the best approach is to use backgrounds like in this plugin, but it has limitations: selected emojis are not highlighted and the size of the background image depends on the size of symbol.

I tried using decorators to render an inline img instead of the symbol, but the selection doesn't work as expected. It seems the selection is coupled to the actual characters being rendered in the DOM even for immutable entities.

[wjp5826]

@andrei-cocorean two year passed,have you found a solution with that selection does not work as expected

[miki-long]

now is 2021， is inline image is possible？T^T