You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
208 lines
6.5 KiB
208 lines
6.5 KiB
<script setup> |
|
import { reactive, ref } from 'vue'; |
|
|
|
const props = defineProps({ |
|
editor: { |
|
type: Object, |
|
required: true, |
|
} |
|
}); |
|
const editor = reactive(props.editor); |
|
|
|
const textColor = ref(null); |
|
const highColor = ref(null); |
|
const color = ref("#000000"); |
|
const highlight = ref("#ffff00"); |
|
const setColor = (c) => { |
|
editor.chain().focus().setColor(c).run() |
|
editor.getAttributes("textStyle").color = c; |
|
} |
|
|
|
const setAlign = (alignment) => { |
|
if (editor.isActive('image')) { |
|
editor.chain() |
|
.updateAttributes('image', { alignment }) |
|
.run() |
|
} |
|
editor.chain() |
|
.setTextAlign(alignment) |
|
.run() |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800"> |
|
<button |
|
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('heading', { level: 1 }) }" |
|
title="Heading 1" |
|
> |
|
T1 |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('heading', { level: 2 }) }" |
|
title="Heading 2" |
|
> |
|
T2 |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('heading', { level: 3 }) }" |
|
title="Heading 3" |
|
> |
|
T3 |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('heading', { level: 4 }) }" |
|
title="Heading 3" |
|
> |
|
T4 |
|
</button> |
|
<button |
|
@click="editor.chain().focus().setParagraph().run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('paragraph') }" |
|
title="Paragraph" |
|
> |
|
paragraphe |
|
</button> |
|
<button |
|
@click="editor.chain().focus().toggleBold().run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('bold') }" |
|
title="Bold" |
|
> |
|
gras |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleItalic().run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('italic') }" |
|
title="Italic" |
|
> |
|
italic |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleUnderline().run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('underline') }" |
|
title="Underline" |
|
> |
|
sous-ligner |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleStrike().run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" |
|
:class="{ 'bg-gray-400': editor.isActive('strike') }" |
|
title="Strikethrough" |
|
> |
|
barrer |
|
</button> |
|
|
|
<div class="flex items-center justify-center"> |
|
<button |
|
@click="!editor.state.selection.empty ? editor.chain().focus().toggleHighlight({color: highlight}).run() : highColor.click()" |
|
class="px-2 py-0.5 rounded-lg" |
|
:style="'background-color:'+highlight" |
|
title="Highlight" |
|
>sur-ligner</button> |
|
<input |
|
type="color" |
|
@input="(e) => highlight = e.target.value" |
|
ref="highColor" |
|
class="w-8 h-8 p-0 border-none cursor-pointer hidden" |
|
title="Text Color" |
|
/> |
|
</div> |
|
<div class="flex items-center space-x-1"> |
|
<label |
|
@click="!editor.state.selection.empty || editor.state.isFocused ? setColor(color) : textColor.click()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" :style="'color: ' + color">couleur</label> |
|
<input |
|
type="color" |
|
@input="(e) => color = e.target.value" |
|
ref="textColor" |
|
class="w-8 h-8 p-0 border-none cursor-pointer hidden" |
|
title="Text Color" |
|
/> |
|
</div> |
|
|
|
<button |
|
@click="editor.chain().focus().clearNodes().run()" |
|
class="px-2 py-0.5 rounded-lg hover:bg-red-600 bg-red-500 my-0.5 text-white" |
|
title="Clear Formatting" |
|
> |
|
retirer tout format |
|
</button> |
|
|
|
<div class="border-l border-gray-300 h-6 mx-4"></div> |
|
|
|
<button |
|
@click="setAlign('left')" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-400': editor.isActive({ textAlign: 'left' }) }" |
|
title="Align Left" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<line x1="17" y1="10" x2="3" y2="10"></line> |
|
<line x1="21" y1="6" x2="3" y2="6"></line> |
|
<line x1="21" y1="14" x2="3" y2="14"></line> |
|
<line x1="17" y1="18" x2="3" y2="18"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="setAlign('center')" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-400': editor.isActive({ textAlign: 'center' }) }" |
|
title="Align Center" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<line x1="18" y1="10" x2="6" y2="10"></line> |
|
<line x1="21" y1="6" x2="3" y2="6"></line> |
|
<line x1="21" y1="14" x2="3" y2="14"></line> |
|
<line x1="18" y1="18" x2="6" y2="18"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="setAlign('right')" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-400': editor.isActive({ textAlign: 'right' }) }" |
|
title="Align Right" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<line x1="21" y1="10" x2="7" y2="10"></line> |
|
<line x1="21" y1="6" x2="3" y2="6"></line> |
|
<line x1="21" y1="14" x2="3" y2="14"></line> |
|
<line x1="21" y1="18" x2="7" y2="18"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="setAlign('justify')" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-400': editor.isActive({ textAlign: 'justify' }) }" |
|
title="Justify" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<line x1="21" y1="10" x2="3" y2="10"></line> |
|
<line x1="21" y1="6" x2="3" y2="6"></line> |
|
<line x1="21" y1="14" x2="3" y2="14"></line> |
|
<line x1="21" y1="18" x2="3" y2="18"></line> |
|
</svg> |
|
</button> |
|
</div> |
|
</template> |