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
withCmd + B
orCtrl + 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.