Render an Element Preview

Simple Preview Rendering

You can define your preview freely by adding a preview handler function, which will be called by the editor to render a preview of an element node.

This handler will have the element's document node itself as its this context and its DOM element as the only parameter, so you can add child nodes to display your contents:

document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance

  editor.definition.setPreviewHandler('text', function (domNode) {
    const container = domNode.querySelector('.preview-container')
    
    if (!container) {
      container = document.createElement('div')
      container.className = 'preview-container'
      domNode.appendChild(container)
    }

    container.innerHTML = this.properties.content
  })
})

Note that the preview handler will be called every time the element node is updated, so you can make sure that the preview elements stay up to date.

Custom Element Rendering v3.11

Instead of making the preview a small part of the element, you can swap out the whole Vue component which renders the element node in the editor:

import MySectionRenderer from './my-section-renderer.vue'

document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance
  editor.definition.setElementNodeRenderer('section', MySectionRenderer)
})

The rendered component will receive slotted content for the headline and its children as well as props for the rendered node and whether the element is currently dragging. Take a look at the default element renderer for an example.