Images

Super Editor ships with support for network images.

Image Node

Network images are represented in a Document with an ImageNode.

final document = MutableDocument(nodes: [
  ImageNode(
    id: Editor.createNodeId(),
    imageUrl: "https://avatars.githubusercontent.com/u/70979896?s=200&v=4",
  ),
]);

ImageNodes also support an "expected bitmap size", to help make space in the editor while it's loading, as we all "alt text", which may be displayed on hover.

To support other image sources, implement a custom version of ImageNode, e.g., FileImageNode. Such a customization also requires custom visuals, as discussed below.

Visual Presentation

By default, SuperEditor includes an ImageComponentBuilder, which builds an ImageComponent widget to display within an editor. Therefore, no additional steps are required to display an image.

To change how images are rendered in an editor, replace the built in ImageComponentBuilder and the ImageComponent with your own implementation.

References

      GitHub   Discord   Sponsor