Skip to main content
Insert and manage images with perfect Word compatibility. Supports URLs, base64 data, and maintains positioning for Word export.

​
OOXML Structure

<w:drawing>
  <wp:inline distT="0" distB="0" distL="0" distR="0">
    <wp:extent cx="5715000" cy="3810000"/>
    <wp:docPr id="1" name="Picture 1"/>
    <a:graphic>
      <a:graphicData>
        <pic:pic>
          <pic:blipFill>
            <a:blip r:embed="rId7"/>
          </pic:blipFill>
        </pic:pic>
      </a:graphicData>
    </a:graphic>
  </wp:inline>
</w:drawing>

​
Use Case

  • Document illustrations - Add diagrams, charts, and screenshots
  • Product documentation - Include product images and UI screenshots
  • Reports - Embed data visualizations and infographics
  • Branding - Insert logos and company graphics
  • Base64 support - Embed images directly without external files

​
Options

Configure the extension behavior:
​
allowBase64
boolean
default:"true"
Allow base64 encoded images
​
htmlAttributes
Object
Default HTML attributes for image elements

​
Attributes

Node attributes that can be set and retrieved:
​
src
string
Image source URL or path
​
alt
string
default:"Uploaded picture"
Alternative text for accessibility
​
title
string
Image title/tooltip text
​
size
Object
Image dimensions
​
size.width
number
Width in pixels
​
size.height
number
Height in pixels
​
padding
Object
Image padding/margins
​
padding.left
number
Left padding in pixels
​
padding.top
number
Top padding in pixels
​
padding.bottom
number
Bottom padding in pixels
​
padding.right
number
Right padding in pixels
​
marginOffset
Object
Margin offset for anchored images
​
marginOffset.left
number
Left margin offset
​
marginOffset.top
number
Top margin offset
​
style
string
Custom inline CSS styles

​
Commands

​
setImage

Insert an image at the current position
Supports URLs, relative paths, and base64 data URIs
Example: 
editor.commands.setImage({ src: 'https://example.com/image.jpg' })
editor.commands.setImage({
  src: 'data:image/png;base64,...',
  alt: 'Company logo',
  size: { width: 200 }
})
Parameters:
​
options
ImageInsertOptions
required
Image insertion options

​
Types

​
ImageInsertOptions

Options for inserting an image

​
Source Code