mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01:00
75 lines
3.5 KiB
Vue
75 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<p v-if="label" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
|
||
|
|
{{ label }}
|
||
|
|
</p>
|
||
|
|
<ui-vue-trix v-model="content" :config="config" :disabled-editor="disabled" @trix-file-accept="trixFileAccept" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
value: String,
|
||
|
|
label: String,
|
||
|
|
disabled: Boolean
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
content: {
|
||
|
|
get() {
|
||
|
|
return this.value
|
||
|
|
},
|
||
|
|
set(val) {
|
||
|
|
this.$emit('input', val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
config() {
|
||
|
|
return {
|
||
|
|
toolbar: {
|
||
|
|
getDefaultHTML: () => ` <div class="trix-button-row">
|
||
|
|
<span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
|
||
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="#{lang.bold}" tabindex="-1">#{lang.bold}</button>
|
||
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="#{lang.italic}" tabindex="-1">#{lang.italic}</button>
|
||
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="#{lang.strike}" tabindex="-1">#{lang.strike}</button>
|
||
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="#{lang.link}" tabindex="-1">#{lang.link}</button>
|
||
|
|
</span>
|
||
|
|
<span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
|
||
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="#{lang.bullets}" tabindex="-1">#{lang.bullets}</button>
|
||
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="#{lang.numbers}" tabindex="-1">#{lang.numbers}</button>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span class="trix-button-group-spacer"></span>
|
||
|
|
<span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
|
||
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="#{lang.undo}" tabindex="-1">#{lang.undo}</button>
|
||
|
|
<button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="#{lang.redo}" tabindex="-1">#{lang.redo}</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="trix-dialogs" data-trix-dialogs>
|
||
|
|
<div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
|
||
|
|
<div class="trix-dialog__link-fields">
|
||
|
|
<input type="url" name="href" class="trix-input trix-input--dialog" placeholder="#{lang.urlPlaceholder}" aria-label="#{lang.url}" required data-trix-input>
|
||
|
|
<div class="trix-button-group">
|
||
|
|
<input type="button" class="trix-button trix-button--dialog" value="#{lang.link}" data-trix-method="setAttribute">
|
||
|
|
<input type="button" class="trix-button trix-button--dialog" value="#{lang.unlink}" data-trix-method="removeAttribute">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
trixFileAccept(e) {
|
||
|
|
e.preventDefault()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {},
|
||
|
|
beforeDestroy() {
|
||
|
|
console.log('Before destroy')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|