EditorWrapper โ€‹

A Vue.js wrapper for Trix.

Serves as a wrapper for Trix. Used by EditorElement and TEditorElement components. You can reach its component instance, properties and methods via EditorElement or TEditorElements's input property.

Options โ€‹

Find below the list of options that can use to configure EditorWrapper component. Options can be passed to the component via props.

value โ€‹

  • Type: any
<EditorWrapper :value="value" ... />

The value that you would regularly pass to v-model.

accept โ€‹

  • Type: array
  • Default: []
<EditorWrapper :accept="['jpg', 'jpeg', 'png']" ... />

The list of accepted attachment extensions.

acceptMimes โ€‹

  • Type: array
  • Default: []
<EditorWrapper :accept-mimes="['image/png', 'image/jpeg']" ... />

The list of accepted attachment MIME types.

endpoint โ€‹

  • Type: string|function

The endpoint where attachments should be uploaded. The default is the attachment from endpoints object in vueform.config.js.

It can be an URL where data will be submitted using method:

<!-- Using an URL as an endpoint -->
<EditorWrapper endpoint="/attachment/upload" ... />

It can be a named endpoint, referencing an endpoint in vueform.config.js:

// vueform.config.js

export default {
  endpoints: {
    upload_attachment: {
      url: '/upload-attachment',
      method: 'post'

<!-- Using a named endpoint -->
<EditorWrapper endpoint="upload_attachment" ... />

It can be an async function that handles the upload and returns an object with url and href properties:

<!-- Using a function to upload file -->
<EditorWrapper :endpoint="async function(file, el$){
  /* upload file */

  return {
    url: '...',
    href: '...',
}" ... />

method โ€‹

  • Type: string
  • Default: post
<EditorWrapper method="POST" ... />

The method that should be used to upload attachments.

hideTools โ€‹

  • Type: array
  • Default: []
<EditorWrapperElement ... />
<EditorWrapperElement :hide-tools="['attach']" ... />

The list of editor tools to hide. Possible tools to hide:

  • bold
  • italic
  • strike
  • link
  • heading
  • quote
  • code
  • bullet-list
  • number-list
  • decrease-nesting
  • increase-nesting
  • attach
  • undo
  • redo

Hiding tools does not disable them, eg. text can still be set bold with Cmd + B or Ctrl + B.

name โ€‹

  • Type: string|number
<EditorWrapper name="editor" ... />

The name attribute of the editor.

id โ€‹

  • Type: string|number
<EditorWrapper id="editor-id" ... />

Sets the id attribute of the editor.

disabled โ€‹

  • Type: boolean
<EditorWrapper :disabled="true"... />

Disables the editor.

attrs โ€‹

  • Type: object
  • Default: {}
<EditorWrapperElement :attrs="{ autofocus: true }" ... />

Assigns HTML attributes to the container / input field.

placeholder โ€‹

  • Type: string|number
<EditorWrapper placeholder="Placeholder" ... />

Sets the placeholder of the editor.

Properties โ€‹

All the data, computed and inject properties of the component.

editor$ โ€‹

  • Type: HTMLElement
  • Default: null
  • Group: data

The Trix instance.

Size โ€‹

  • Type: string
  • Group: inject

The size of the component.

View โ€‹

  • Type: string
  • Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template โ€‹

  • Type: object
  • Group: computed

The component's template.

classes โ€‹

  • Type: object
  • Group: computed

The component's classes.

theme โ€‹

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$ โ€‹

  • Type: Vueform
  • Group: inject

The root form's component.

el$ โ€‹

  • Type: VueformElement
  • Group: inject

The parent element's component.

Methods โ€‹

The methods of the component.

setOption โ€‹

  • Arguments:
    • {string} key* - the option key
    • {string} value* - the option value
  • Returns: void

Sets an option for editor.

update โ€‹

  • Arguments:
    • {string} value* - the value to update with
  • Returns: void

Updates the value of editor.

Events โ€‹

Events emitted by the component.

input โ€‹

  • Params:
    • {object} value - the new value of the element contained in an object: value.target.value

Triggered when the editor's value is changed.

alert โ€‹

  • Params:
    • {string} message - the alert message

Triggered when the user select a file/mime type that is not allowed.

error โ€‹

  • Params:
    • {Error} error - the Error object

Triggered when file upload throws an error.

blur โ€‹

  • Params:
    • {component} el$ - the element's component

Triggered when the input is blurred.

๐Ÿ‘‹ Hire Vueform team for form customizations and developmentLearn more