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:
bolditalicstrikelinkheadingquotecodebullet-listnumber-listdecrease-nestingincrease-nestingattachundoredo
Hiding tools does not disable them, eg. text can still be set
boldwithCmd + BorCtrl + 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.
