---
url: /documentation/input-types/editor.md
description: >-
  Embed a complete WPCE editor as an input property, including definition
  merging and get_inner_html() template usage.
---

# Editor Input

Use a WPCE editor as input. This enables you to encapsulate complex structures in element dialogs to reduce overall
complexity.

```js
{
  input: {
    type: 'editor', // [!code focus:8]
    definition: {
      // ...
    },
    document: {
      // ...
    },
    mergeDefinition: 'global'
  }
}
```

For the definition you could use the following template:

```js
{
  id: 'root',
  label: 'Root Group',
  children: [
    {
      id: 'root',
      label: 'Content',
      icon: '<span class="dashicons dashicons-media-default"></span>',
      allowedGroups: ['content'],
      isContainer: true,
      dialog: false,
      properties: []
    }
  ]
}
```

## Input Options

| Option | Values | Default | Description |
| - | - | - | - |
| `definition` | `object` | - | A definition object. |
| `document` | `object` | - | A document tree. |
| `mergeDefinition` | `'global' \| undefined` | - | If you have an own definition and want to use the global definition as well you can inherit the global definition. |
| `mergeInputTypes` | `boolean` | `true` | Whether input types from the source document should be merged into the editor document. |

## Template Usage

The simplest way to get HTML from an edtor input is to use `$wpce->get_inner_html()`.

For example:

```php
$props = $element->properties;
$editor_html = $wpce->get_inner_html($props->myEditorProperty);
```

## Conditions

The `editor` input type supports the following conditions for [dynamic visibility](/documentation/concepts/elements/definition#dynamic-visibility):

| Condition | Payload | Description |
| - | - | - |
| `isEmpty` | `boolean`defaults to `true` | Checks whether or not the editor contains any elements. |