torsten/miriamgemeinde
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add link or color added

Browse Source
This commit is contained in:
Torsten Schulz
2024-06-20 23:50:22 +02:00
parent 240409d52a
commit dcfd478464
6 changed files with 226 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/content/HomeContent.vue
View File

@@ -1,46 +1,24 @@
<template>
<div class="left-column">
<h2>Aktuelles</h2>
<p><a href="https://miriamgemeinde.de/wp-content/uploads/2024/04/GB.INT_.pdf"><strong>Hier finden Sie den aktuellen Gemeindebrief</strong></a></p>
<h3>Sommerfest</h3>
<p>Am Sonntag, den 09.06.2024 findet das ökumenische Sommerfest in Bonames statt.</p>
<h4>10:30 Uhr Musikalischer Gottestdienst</h4>
<p>mit der Kantorei St. Bonifatius, der Miriamkantorei und dem Gospelchor „Chariots“ in der Katholischen Pfarrkirche St. Bonifatius, Oberer Kalbacher Weg 9</p>
<h4>Ab 12:00 Uhr Gemeinsames Fest</h4>
<p>am Evangelischen Gemeindezentrum Bonames, Kirchhofsweg 11<br>Begegnungen, Gespräche und Angebote für Kinder<br>Gegrilltes und Getränke, Kaffee und Kuchen<br>Bis 16:00 Uhr</p>
<h3>Ökumenisches Friedensgebet</h3>
<p>Jeden letzten Freitag im Monat um 18:00 Uhr<br>Evangelische Friedenskirche in Harheim</p>
<hr>
<h3>Miriamgemeinde auf <a href="https://www.youtube.com/channel/UCFWJZuXPKuTef9-NIo-vdPg">Youtube</a></h3>
<p>Gottesdienst-Aufzeichnungen von unseren Gottesdienstorten.</p>
<p>Bei Präsenzgottesdiensten finden Sie die Aufzeichnung erst am Sonntagnachmittag!</p>
<hr>
<h3>Youtube-Kanäle unserer Kindertagesstätten</h3>
<p><a href="https://www.youtube.com/channel/UCwDe0xnydn9xV-4MHjGhjWQ">KiTa Krambambuli</a></p>
<p><a href="https://www.youtube.com/channel/UC_Sj_yC__i91czlJUW4ylcg">KiTa Sternenzelt</a></p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<p>lorem ipsum...</p>
<div class="some-page">
<ContentComponent :link="currentLink" />
</div>
</template>
<script>
import ContentComponent from '@/components/ContentComponent.vue';
export default {
name: 'HomeContent'
name: 'SomePage',
components: {
ContentComponent,
},
computed: {
currentLink() {
return this.$route.path;
},
},
};
</script>
<style scoped>
</style>

84
src/content/admin/EditPagesComponent.vue
View File

@@ -8,61 +8,66 @@
</select>
</div>
<div class="toolbar">
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
<button @click="editor.chain().focus().toggleBold().run()" width="24" height="24">
<button @click="editor.value.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
<button @click="editor.value.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
<button @click="editor.value.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
<button @click="editor.value.chain().focus().toggleBold().run()" width="24" height="24">
<BoldIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleItalic().run()">
<button @click="editor.value.chain().focus().toggleItalic().run()">
<ItalicIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleUnderline().run()">
<button @click="editor.value.chain().focus().toggleUnderline().run()">
<UnderlineIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleStrike().run()">
<button @click="editor.value.chain().focus().toggleStrike().run()">
<StrikethroughIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
<button @click="editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
<TableIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleBulletList().run()">
<button @click="editor.value.chain().focus().toggleBulletList().run()">
<ListIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()">
<button @click="editor.value.chain().focus().toggleOrderedList().run()">
<NumberedListLeftIcon width="24" height="24" />
</button>
<button @click="openAddImageDialog">
<StatsReportIcon width="24" height="24" />
</button>
<button @click="openAddLinkDialog">
<OpenInWindowIcon width="24" height="24" />
</button>
<button @click="openColorPicker">Schriftfarbe</button>
<input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
</div>
<div class="table-toolbar">
<button @click="editor.chain().focus().addColumnBefore().run()">
<button @click="editor.value.chain().focus().addColumnBefore().run()">
<ArrowDownIcon width="10" height="10" class="align-top" />
<Table2ColumnsIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().addColumnAfter().run()">
<button @click="editor.value.chain().focus().addColumnAfter().run()">
<Table2ColumnsIcon width="24" height="24" />
<ArrowDownIcon width="10" height="10" class="align-top" />
</button>
<button @click="editor.chain().focus().addRowBefore().run()">
<button @click="editor.value.chain().focus().addRowBefore().run()">
<ArrowRightIcon width="10" height="10" class="align-top" />
<TableRowsIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().addRowAfter().run()">
<button @click="editor.value.chain().focus().addRowAfter().run()">
<ArrowRightIcon width="10" height="10" />
<TableRowsIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().deleteColumn().run()">
<button @click="editor.value.chain().focus().deleteColumn().run()">
<Table2ColumnsIcon width="24" height="24" class="delete-icon" />
</button>
<button @click="editor.chain().focus().deleteRow().run()">
<button @click="editor.value.chain().focus().deleteRow().run()">
<TableRowsIcon width="24" height="24" class="delete-icon" />
</button>
<button @click="editor.chain().focus().toggleHeaderColumn().run()">
<button @click="editor.value.chain().focus().toggleHeaderColumn().run()">
<AlignTopBoxIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleHeaderRow().run()">
<button @click="editor.value.chain().focus().toggleHeaderRow().run()">
<AlignLeftBoxIcon width="24" height="24" />
</button>
</div>
@@ -80,6 +85,8 @@
<WorshipDialog ref="worshipDialog" @confirm="insertWorshipList" />
<AddImageDialog ref="addImageDialog" @confirm="insertImage" />
<AddEventDialog ref="addEventDialog" @confirm="insertEvent" />
<AddLinkDialog ref="addLinkDialog" @confirm="insertLink" />
<input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
</div>
</template>
@@ -98,10 +105,14 @@ import Strike from '@tiptap/extension-strike';
import BulletList from '@tiptap/extension-bullet-list';
import OrderedList from '@tiptap/extension-ordered-list';
import Heading from '@tiptap/extension-heading';
import Link from '@tiptap/extension-link';
import TextStyle from '@tiptap/extension-text-style';
import Color from '@tiptap/extension-color';
import { CustomTableCell, CustomTableHeader } from '../../extensions/CustomTableCell';
import WorshipDialog from '@/components/WorshipDialog.vue';
import AddImageDialog from '@/components/AddImageDialog.vue';
import AddEventDialog from '@/components/AddEventDialog.vue';
import AddLinkDialog from '@/components/AddLinkDialog.vue';
import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon
@@ -128,6 +139,7 @@ export default {
AlignLeftBoxIcon,
StatsReportIcon,
AddEventDialog,
AddLinkDialog,
},
setup() {
const store = useStore();
@@ -137,6 +149,8 @@ export default {
const worshipDialog = ref(null);
const addImageDialog = ref(null);
const addEventDialog = ref(null);
const addLinkDialog = ref(null);
const colorPicker = ref(null);
const editor = useEditor({
extensions: [
@@ -156,6 +170,11 @@ export default {
Heading.configure({
levels: [1, 2, 3],
}),
Link.configure({
openOnClick: false,
}),
TextStyle,
Color,
],
content: '',
onUpdate: ({ editor }) => {
@@ -268,6 +287,27 @@ export default {
}
};
const openAddLinkDialog = () => {
addLinkDialog.value.openAddLinkDialog();
};
const insertLink = ({ url, text }) => {
if (url && text && editor.value) {
editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).insertContent(text).run();
}
};
const openColorPicker = () => {
colorPicker.value.click();
};
const setColor = (event) => {
const color = event.target.value;
if (editor.value) {
editor.value.chain().focus().setColor(color).run();
}
};
return {
pages,
sortedPages,
@@ -285,6 +325,12 @@ export default {
addEventDialog,
openAddEventsDialog: openAddEventDialog,
insertEvent,
addLinkDialog,
openAddLinkDialog,
insertLink,
colorPicker,
openColorPicker,
setColor,
};
},
};
@@ -346,9 +392,11 @@ export default {
width: 24px;
height: 24px;
}
.delete-icon {
fill: #ff0000;
}
.align-top {
vertical-align: top;
}