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

extended editor

Browse Source
This commit is contained in:
Torsten Schulz
2024-06-21 18:06:17 +02:00
parent dcfd478464
commit 97c72540cf
20 changed files with 754 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/AddDownloadDialog.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div v-if="showDialog" class="modal">
<div class="modal-content">
<span class="close" @click="closeDialog">&times;</span>
<h2>Datei zum Download hinzufügen</h2>
<table>
<tr>
<td>
<label for="file-select">Datei auswählen:</label>
</td>
<td>
<select id="file-select" v-model="selectedFile">
<option v-for="file in files" :key="file.id" :value="file">
{{ file.title }} ({{ file.originalName }})
</option>
</select>
</td>
</tr>
</table>
<button @click="confirm">Hinzufügen</button>
</div>
</div>
</template>
<script>
import axios from '@/axios';
export default {
name: 'AddDownloadDialog',
data() {
return {
showDialog: false,
selectedFile: null,
files: [],
};
},
methods: {
async openAddDownloadDialog() {
this.showDialog = true;
try {
const response = await axios.get('/files');
this.files = response.data;
} catch (error) {
console.error('Fehler beim Abrufen der Dateien:', error);
}
},
closeDialog() {
this.showDialog = false;
this.selectedFile = null;
},
confirm() {
if (this.selectedFile) {
this.$emit('confirm', this.selectedFile.hash);
this.closeDialog();
} else {
alert('Bitte wählen Sie eine Datei aus.');
}
},
},
};
</script>
<style scoped>
.modal {
display: flex;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>

43
src/components/ComponentsLink.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<span @click="downloadFile">{{ title }}</span>
</template>
<script>
export default {
name: 'DownloadLink',
props: {
title: {
type: String,
required: true,
},
hash: {
type: String,
required: true,
},
extension: {
type: String,
required: true,
},
},
methods: {
downloadFile() {
const filePath = `${__dirname}/files/uploads/${this.hash}${this.extension}`;
const link = document.createElement('a');
link.href = filePath;
link.download = this.title + this.extension;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
},
};
</script>
<style scoped>
span {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>

47
src/components/DownloadLink.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<span @click="downloadFile">{{ title }}</span>
</template>
<script>
import axios from 'axios';
export default {
name: 'DownloadLink',
props: {
title: {
type: String,
required: true,
},
hash: {
type: String,
required: true,
},
extension: {
type: String,
required: true,
},
},
methods: {
async downloadFile() {
const response = await axios.get(`/files/download/${this.hash}`, {
responseType: 'blob'
});
const blob = new Blob([response.data], { type: response.data.type });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = `${this.title}${this.extension}`;
link.click();
window.URL.revokeObjectURL(link.href);
},
},
};
</script>
<style scoped>
span {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>

30
src/components/RenderContentComponent.vue
View File

@@ -7,6 +7,7 @@ import { createApp, h, ref, watch } from 'vue';
import WorshipRender from './WorshipRender.vue';
import ImageRender from './ImageRender.vue';
import EventRender from './EventRender.vue';
import DownloadLink from './DownloadLink.vue';
export default {
name: 'RenderContentComponent',
@@ -21,8 +22,9 @@ export default {
const renderContent = (content) => {
let result = renderWorship(content);
result = renderImage(result); // Use result here
result = renderEvent(result); // Use result here
result = renderImage(result);
result = renderEvent(result);
result = renderDownload(result);
return result;
};
@@ -58,7 +60,6 @@ export default {
if (placeholder) {
const app = createApp({
render() {
console.log(config);
return h(ImageRender, { id: config });
},
});
@@ -74,9 +75,7 @@ export default {
const eventsPattern = /{{ events:(.*?) }}/g;
let result = content;
result = result.replace(eventsPattern, (match, config) => {
console.log(config);
const props = parseConfig(config);
console.log(props);
const placeholderId = `event-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
setTimeout(() => {
const placeholder = document.getElementById(placeholderId);
@@ -94,6 +93,27 @@ export default {
return result;
};
const renderDownload = (content) => {
const downloadPattern = /{{ download title="(.*?)" hash="(.*?)" extension="(.*?)" }}/g;
let result = content;
result = result.replace(downloadPattern, (match, title, hash, extension) => {
const placeholderId = `download-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
setTimeout(() => {
const placeholder = document.getElementById(placeholderId);
if (placeholder) {
const app = createApp({
render() {
return h(DownloadLink, { title, hash, extension });
},
});
app.mount(placeholder);
}
}, 0);
return `<div id="${placeholderId}"></div>`;
});
return result;
};
const parseConfig = (configString) => {
const config = {};
const configArray = configString.split(',');

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

@@ -8,28 +8,28 @@
</select>
</div>
<div class="toolbar">
<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">
<button @click="toggleHeading(1)">H1</button>
<button @click="toggleHeading(2)">H2</button>
<button @click="toggleHeading(3)">H3</button>
<button @click="toggleBold()" width="24" height="24">
<BoldIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().toggleItalic().run()">
<button @click="toggleItalic()">
<ItalicIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().toggleUnderline().run()">
<button @click="toggleUnderline()">
<UnderlineIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().toggleStrike().run()">
<button @click="toggleStrike()">
<StrikethroughIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
<button @click="insertTable()">
<TableIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().toggleBulletList().run()">
<button @click="toggleBulletList()">
<ListIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().toggleOrderedList().run()">
<button @click="toggleOrderedList()">
<NumberedListLeftIcon width="24" height="24" />
</button>
<button @click="openAddImageDialog">
@@ -38,36 +38,39 @@
<button @click="openAddLinkDialog">
<OpenInWindowIcon width="24" height="24" />
</button>
<button @click="openAddDownloadDialog">
<DownloadIcon 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.value.chain().focus().addColumnBefore().run()">
<button @click="addColumnBefore()">
<ArrowDownIcon width="10" height="10" class="align-top" />
<Table2ColumnsIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().addColumnAfter().run()">
<button @click="addColumnAfter()">
<Table2ColumnsIcon width="24" height="24" />
<ArrowDownIcon width="10" height="10" class="align-top" />
</button>
<button @click="editor.value.chain().focus().addRowBefore().run()">
<button @click="addRowBefore()">
<ArrowRightIcon width="10" height="10" class="align-top" />
<TableRowsIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().addRowAfter().run()">
<button @click="addRowAfter()">
<ArrowRightIcon width="10" height="10" />
<TableRowsIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().deleteColumn().run()">
<button @click="deleteColumn()">
<Table2ColumnsIcon width="24" height="24" class="delete-icon" />
</button>
<button @click="editor.value.chain().focus().deleteRow().run()">
<button @click="deleteRow()">
<TableRowsIcon width="24" height="24" class="delete-icon" />
</button>
<button @click="editor.value.chain().focus().toggleHeaderColumn().run()">
<button @click="toggleHeaderColumn()">
<AlignTopBoxIcon width="24" height="24" />
</button>
<button @click="editor.value.chain().focus().toggleHeaderRow().run()">
<button @click="toggleHeaderRow()">
<AlignLeftBoxIcon width="24" height="24" />
</button>
</div>
@@ -86,6 +89,7 @@
<AddImageDialog ref="addImageDialog" @confirm="insertImage" />
<AddEventDialog ref="addEventDialog" @confirm="insertEvent" />
<AddLinkDialog ref="addLinkDialog" @confirm="insertLink" />
<AddDownloadDialog ref="addDownloadDialog" @confirm="insertDownload" />
<input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
</div>
</template>
@@ -113,9 +117,11 @@ 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 AddDownloadDialog from '@/components/AddDownloadDialog.vue';
import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon
Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon,
OpenInWindowIcon, DownloadIcon
} from '@/icons';
export default {
@@ -140,6 +146,9 @@ export default {
StatsReportIcon,
AddEventDialog,
AddLinkDialog,
AddDownloadDialog,
OpenInWindowIcon,
DownloadIcon,
},
setup() {
const store = useStore();
@@ -150,6 +159,7 @@ export default {
const addImageDialog = ref(null);
const addEventDialog = ref(null);
const addLinkDialog = ref(null);
const addDownloadDialog = ref(null);
const colorPicker = ref(null);
const editor = useEditor({
@@ -297,6 +307,17 @@ export default {
}
};
const openAddDownloadDialog = () => {
addDownloadDialog.value.openAddDownloadDialog();
};
const insertDownload = ({ title, hash, extension }) => {
if (title && hash && extension && editor.value) {
const url = `/files/download/${hash}`;
editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).insertContent(title).run();
}
};
const openColorPicker = () => {
colorPicker.value.click();
};
@@ -308,6 +329,38 @@ export default {
}
};
const toggleHeading = (level) => {
editor.value.chain().focus().toggleHeading({level: level}).run();
};
const toggleItalic = () => {
editor.value.chain().focus().toggleItalic().run();
};
const toggleBold = () => {
editor.value.chain().focus().toggleBold().run();
};
const toggleUnderline = () => {
editor.value.chain().focus().toggleUnderline().run();
};
const toggleStrike = () => {
editor.value.chain().focus().toggleStrike().run();
};
const insertTable = () => {
editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
};
const toggleBulletList = () => {
editor.value.chain().focus().toggleBulletList().run();
};
const toggleOrderedList = () => {
editor.value.chain().focus().toggleOrderedList().run();
};
return {
pages,
sortedPages,
@@ -328,9 +381,20 @@ export default {
addLinkDialog,
openAddLinkDialog,
insertLink,
addDownloadDialog,
openAddDownloadDialog,
insertDownload,
colorPicker,
openColorPicker,
setColor,
toggleHeading,
toggleBold,
toggleItalic,
toggleUnderline,
toggleStrike,
insertTable,
toggleBulletList,
toggleOrderedList,
};
},
};

153
src/content/admin/UploadFileManagement.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<div class="upload-files">
<h2>Dateien hochladen</h2>
<div>
<label for="file-upload">Datei auswählen:</label>
<input id="file-upload" type="file" @change="handleFileUpload" />
</div>
<div>
<label for="file-title">Titel eingeben:</label>
<input id="file-title" type="text" v-model="fileTitle" />
</div>
<button @click="uploadFiles">Hochladen</button>
<ul class="file-list">
<li v-for="file in uploadedFiles" :key="file.id">
<div class="file-info">
<span class="file-title" @click="downloadFile(file)">{{ file.title }}</span>
<span class="file-name" @click="downloadFile(file)">{{ file.originalName }}</span>
<span class="file-date">{{ formatDate(file.createdAt) }}</span>
</div>
</li>
</ul>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import axios from '../../axios';
export default {
name: 'UploadFilesComponent',
setup() {
const fileToUpload = ref(null);
const fileTitle = ref('');
const uploadedFiles = ref([]);
const handleFileUpload = (event) => {
fileToUpload.value = event.target.files[0];
};
const uploadFiles = async () => {
if (!fileToUpload.value || !fileTitle.value) {
alert('Bitte wählen Sie eine Datei aus und geben Sie einen Titel ein.');
return;
}
const formData = new FormData();
formData.append('file', fileToUpload.value);
formData.append('title', fileTitle.value);
try {
const response = await axios.post('/files', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
const uploadedData = response.data;
uploadedFiles.value.push({
id: uploadedData.id,
title: uploadedData.title,
originalName: uploadedData.originalName,
createdAt: uploadedData.createdAt,
hash: uploadedData.hash,
});
fileToUpload.value = null;
fileTitle.value = '';
} catch (error) {
console.error('Fehler beim Hochladen der Datei:', error);
}
};
const downloadFile = async (file) => {
const fileExtension = file.originalName.substring(file.originalName.lastIndexOf('.'));
const response = await axios.get(`/files/download/${file.hash}`, {
responseType: 'blob'
});
const blob = new Blob([response.data], { type: response.data.type });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = `${file.title}${fileExtension}`;
link.click();
window.URL.revokeObjectURL(link.href);
};
const formatDate = (dateString) => {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString(undefined, options);
};
const fetchUploadedFiles = async () => {
try {
const response = await axios.get('/files');
uploadedFiles.value = response.data;
} catch (error) {
console.error('Fehler beim Abrufen der Dateien:', error);
}
};
onMounted(fetchUploadedFiles);
return {
fileToUpload,
fileTitle,
uploadedFiles,
handleFileUpload,
uploadFiles,
downloadFile,
formatDate,
};
},
};
</script>
<style scoped>
.upload-files {
width: 100%;
margin: auto;
}
.upload-files div {
margin-bottom: 10px;
}
.file-list {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
.file-list li {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.file-info {
display: flex;
justify-content: space-between;
cursor: pointer;
}
.file-title {
font-weight: bold;
}
.file-name {
color: #555;
}
.file-date {
color: #888;
}
</style>

3
src/icons.js
View File

@@ -1,6 +1,6 @@
// src/icons.js
import { Bold, Italic, Underline, Strikethrough, List, NumberedListLeft, Table, Table2Columns, ArrowRight, ArrowDown, TableRows,
AlignTopBox, AlignLeftBox, StatsReport, OpenInWindow
AlignTopBox, AlignLeftBox, StatsReport, OpenInWindow, Download
} from '@iconoir/vue';
export {
@@ -19,4 +19,5 @@ export {
AlignLeftBox as AlignLeftBoxIcon,
StatsReport as StatsReportIcon,
OpenInWindow as OpenInWindowIcon,
Download as DownloadIcon,
};