133 lines
4.6 KiB
Vue
133 lines
4.6 KiB
Vue
<template>
|
|
<input ref="input" type="hidden" :name="name" :value="value"/>
|
|
<div class="">
|
|
<template v-for="group, index in menu" :key="index">
|
|
<div class="button-group d-inline-block mr-3">
|
|
<template v-for="info, index in group" :key="index">
|
|
<button type="button" class="button square smaller" :title="info.label" @click="edit(info.action, ...(info.args || []))">
|
|
<span class="icon"><i :class="info.icon"/></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<div class="button-group d-inline-block">
|
|
<div class="dropdown is-hoverable">
|
|
<div class="dropdown-trigger">
|
|
<button type="button" class="button square smaller">
|
|
<span class="icon"><i class="fa fa-link"/></span>
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-menu" style="min-width: 20rem; margin-top: -0.2rem;">
|
|
<div class="dropdown-content p-3">
|
|
<div class="field">
|
|
<label class="label">Lien</label>
|
|
<div class="control">
|
|
<input ref="link-url" type="text" class="input" placeholder="lien"/>
|
|
</div>
|
|
</div>
|
|
<div class="has-text-right">
|
|
<button type="button" class="button secondary"
|
|
@click="edit('setLink', {href:$refs['link-url'].value})">
|
|
Ajouter le lien
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="button square smaller" title="Remove link" @click="edit('unsetLink')">
|
|
<span class="icon"><i class="fa fa-link-slash"/></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<editor-content class="editor" v-if="editor" :editor="editor" />
|
|
</template>
|
|
<style>
|
|
.editor .tiptap {
|
|
border: 1px black solid;
|
|
padding: 0.3em;
|
|
}
|
|
.editor .tiptap ul, .editor .tiptap ol {
|
|
margin-left: 1.3em;
|
|
}
|
|
|
|
.editor .tiptap ul { list-style: disc }
|
|
</style>
|
|
<script>
|
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
|
import StarterKit from '@tiptap/starter-kit'
|
|
import Underline from '@tiptap/extension-underline'
|
|
import Link from '@tiptap/extension-link'
|
|
|
|
export default {
|
|
components: {EditorContent},
|
|
props: {
|
|
config: {type: Object, default: (() => {})},
|
|
//! Input field name.
|
|
name: String,
|
|
//! Initial input value
|
|
initial: String,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
editor: null,
|
|
menu: [
|
|
[
|
|
{label: "Bold", icon: "fa fa-bold", action: "toggleBold" },
|
|
{label: "Italic", icon: "fa fa-italic", action: "toggleItalic" },
|
|
{label: "Underline", icon: "fa fa-underline", action: "toggleUnderline" },
|
|
{label: "Strike", icon: "fa fa-strikethrough", action: "toggleStrike" },
|
|
],[
|
|
{label: "List", icon: "fa fa-list", action: "toggleBulletList" },
|
|
{label: "Ordered List", icon: "fa fa-list-ol", action: "toggleOrderedList" },
|
|
],[
|
|
{label: "Heading 1", icon: "fa fa-h", action: "setHeading", args: [{level:3}] },
|
|
{label: "Heading 2", icon: "fa fa-h smaller", action: "toggleHeading", args: [{level:4}] },
|
|
// {label: "Heading 3", icon: "fa fa-h small", action: "toggleHeading", args: [{level:5}] },
|
|
],
|
|
]
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
value() { return this.editor && this.editor.getHTML() },
|
|
},
|
|
|
|
methods: {
|
|
chain(action, ...args) {
|
|
let chain = this.editor.chain().focus()
|
|
return chain[action](...args)
|
|
},
|
|
|
|
edit(action, ...args) {
|
|
this.chain(action, ...args).run()
|
|
},
|
|
|
|
setLink() {
|
|
this.edit("setLink", {href: this.$refs['link-url']})
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.editor = new Editor({
|
|
content: this.initial || "",
|
|
injectCss: false,
|
|
extensions: [
|
|
StarterKit.configure({
|
|
heading: {
|
|
levels: [3, 4, 5]
|
|
}
|
|
}),
|
|
Underline,
|
|
Link.configure({autolink: true}),
|
|
],
|
|
})
|
|
},
|
|
|
|
|
|
beforeUnmount() {
|
|
this.editor.destroy()
|
|
},
|
|
}
|
|
</script>
|