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

Added images

Browse Source
This commit is contained in:
Torsten Schulz
2024-06-20 07:35:55 +02:00
parent 8c54988023
commit d78bc26e30
12 changed files with 455 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,22 +20,51 @@
<button @click="editor.chain().focus().toggleUnderline().run()">
<UnderlineIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleStrike().run()">Durchgestrichen</button>
<button
@click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">Tabelle</button>
<button @click="editor.chain().focus().toggleBulletList().run()">Liste</button>
<button @click="editor.chain().focus().toggleOrderedList().run()">Nummerierte Liste</button>
<button @click="editor.chain().focus().toggleStrike().run()">
<StrikethroughIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
<TableIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleBulletList().run()">
<ListIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()">
<NumberedListLeftIcon width="24" height="24" />
</button>
<button @click="openAddImageDialog">
<StatsReportIcon width="24" height="24" />
</button>
</div>
<div class="table-toolbar">
<button @click="editor.chain().focus().addColumnBefore().run()">Spalte davor einfügen</button>
<button @click="editor.chain().focus().addColumnAfter().run()">Spalte danach einfügen</button>
<button @click="editor.chain().focus().addRowBefore().run()">Zeile davor einfügen</button>
<button @click="editor.chain().focus().addRowAfter().run()">Zeile danach einfügen</button>
<button @click="editor.chain().focus().deleteColumn().run()">Spalte löschen</button>
<button @click="editor.chain().focus().deleteRow().run()">Zeile löschen</button>
<button @click="editor.chain().focus().toggleHeaderColumn().run()">Header-Spalte umschalten</button>
<button @click="editor.chain().focus().toggleHeaderRow().run()">Header-Zeile umschalten</button>
<button @click="editor.chain().focus().toggleHeaderCell().run()">Header-Zelle umschalten</button>
<button @click="editor.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()">
<Table2ColumnsIcon width="24" height="24" />
<ArrowDownIcon width="10" height="10" class="align-top" />
</button>
<button @click="editor.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()">
<ArrowRightIcon width="10" height="10" />
<TableRowsIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().deleteColumn().run()">
<Table2ColumnsIcon width="24" height="24" class="delete-icon" />
</button>
<button @click="editor.chain().focus().deleteRow().run()">
<TableRowsIcon width="24" height="24" class="delete-icon" />
</button>
<button @click="editor.chain().focus().toggleHeaderColumn().run()">
<AlignTopBoxIcon width="24" height="24" />
</button>
<button @click="editor.chain().focus().toggleHeaderRow().run()">
<AlignLeftBoxIcon width="24" height="24" />
</button>
</div>
<div class="additional-toolbar">
<button>Events</button>
@@ -49,6 +78,7 @@
<button @click="savePageContent">Speichern</button>
<WorshipDialog ref="worshipDialog" @confirm="insertWorshipList" />
<AddImageDialog ref="addImageDialog" @confirm="insertImage" />
</div>
</template>
@@ -69,16 +99,32 @@ import OrderedList from '@tiptap/extension-ordered-list';
import Heading from '@tiptap/extension-heading';
import { CustomTableCell, CustomTableHeader } from '../../extensions/CustomTableCell';
import WorshipDialog from '@/components/WorshipDialog.vue';
import { BoldIcon, ItalicIcon, UnderlineIcon } from '@/icons';
import AddImageDialog from '@/components/AddImageDialog.vue';
import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon
} from '@/icons';
export default {
name: 'EditPagesComponent',
components: {
EditorContent,
WorshipDialog,
AddImageDialog,
BoldIcon,
ItalicIcon,
UnderlineIcon
UnderlineIcon,
StrikethroughIcon,
ListIcon,
NumberedListLeftIcon,
TableIcon,
Table2ColumnsIcon,
ArrowDownIcon,
ArrowRightIcon,
TableRowsIcon,
AlignTopBoxIcon,
AlignLeftBoxIcon,
StatsReportIcon,
},
setup() {
const store = useStore();
@@ -86,6 +132,7 @@ export default {
const selectedPage = ref('');
const pageHtmlContent = computed(() => store.state.pageContent);
const worshipDialog = ref(null);
const addImageDialog = ref(null);
const editor = useEditor({
extensions: [
@@ -190,6 +237,10 @@ export default {
worshipDialog.value.openWorshipDialog();
};
const openAddImageDialog = () => {
addImageDialog.value.openAddImageDialog();
};
const insertWorshipList = (selectedLocations) => {
if (editor.value) {
const configuration = `location=${selectedLocations},order:"date asc"`;
@@ -197,6 +248,12 @@ export default {
}
};
const insertImage = (selectedImage) => {
if (editor.value) {
editor.value.chain().focus().insertContent(`{{ image:${selectedImage} }}`).run();
}
};
return {
pages,
sortedPages,
@@ -208,6 +265,9 @@ export default {
openWorshipDialog,
insertWorshipList,
worshipDialog,
addImageDialog,
openAddImageDialog,
insertImage,
};
},
};
@@ -269,4 +329,10 @@ export default {
width: 24px;
height: 24px;
}
.delete-icon {
fill: #ff0000;
}
.align-top {
vertical-align: top;
}
</style>