jason/cpolis
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases 58 Wiki Activity

Replace EasyMDE with Toast UI Editor

Browse Source
This commit is contained in:
Jason Streifling 2025-03-01 08:59:52 +01:00
parent 30c35f2112
commit c3d924cd77
2 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/templates/editor.html
View File

@ -26,7 +26,7 @@
<div class="flex flex-col gap-1">
<h3>Artikel</h3>
<textarea id="easyMDE">{{.Content}}</textarea>
<div id="editor"></div>
<input id="article-content" name="article-content" type="hidden" value="{{.Content}}" />
</div>
@ -88,16 +88,13 @@
</form>
<script>
var easyMDE = new EasyMDE({
element: document.getElementById('easyMDE'),
hideIcons: ['image'],
imageTexts: {sbInit: ''},
showIcons: ["code", "table", "upload-image"],
uploadImage: true,
imageUploadFunction: function (file, onSuccess, onError) {
var formData = new FormData();
formData.append('article-image', file);
var editor = new toastui.Editor({
el: document.querySelector('#editor'),
height: '500px',
hooks: {
addImageBlobHook: (blob, callback) => {
const formData = new FormData();
formData.append('article-image', blob);
fetch('/article/upload-image', {
method: 'POST',
@ -105,17 +102,23 @@
})
.then(response => response.json())
.then(data => {
onSuccess(data);
callback(data, 'Alternativtext');
})
.catch(error => {
htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}});
onError(error);
console.error('Upload fehlgeschlagen:', error);
});
}
},
initialEditType: 'wysiwyg',
initialValue: '{{.Content}}',
language: 'de',
theme: localStorage.theme,
usageStatistics: 'false'
});
easyMDE.codemirror.on("change", () => {
document.getElementById('article-content').value = easyMDE.value();
editor.on('change', () => {
document.getElementById('article-content').value = editor.getMarkdown();
});
</script>
{{end}}

7
web/templates/index.html
View File

@ -7,7 +7,7 @@
<title>Orient Editor</title>
<link href="/web/static/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body
@ -43,7 +43,9 @@
</footer>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script src="https://uicdn.toast.com/editor/latest/i18n/de-de.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const toggleSwitch = document.getElementById('theme-toggle');
@ -70,6 +72,7 @@
});
});
</script>
<script>
htmx.on('htmx:responseError', function (event) {
var notification = document.getElementById('notification');