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
vue
<EditorWrapper :value="value" ... />

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

accept

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

The list of accepted attachment extensions.

acceptMimes

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

The list of accepted attachment MIME types.

endpoint

  • Type: string|function|promise

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:

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

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

js
// vueform.config.js

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

vue
<!-- 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:

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

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

method

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

The method that should be used to upload attachments.

hideTools

  • Type: array
  • Default: []
vue
<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
vue
<EditorWrapper name="editor" ... />

The name attribute of the editor.

id

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

Sets the id attribute of the editor.

disabled

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

Disables the editor.

attrs

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

Assigns HTML attributes to the container / input field.

placeholder

  • Type: string|number
vue
<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: computed

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