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

51
web/templates/editor.html
View File

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

7
web/templates/index.html
View File

@ -7,7 +7,7 @@
<title>Orient Editor</title> <title>Orient Editor</title>
<link href="/web/static/css/style.css" rel="stylesheet"> <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> </head>
<body <body
@ -43,7 +43,9 @@
</footer> </footer>
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <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> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const toggleSwitch = document.getElementById('theme-toggle'); const toggleSwitch = document.getElementById('theme-toggle');
@ -70,6 +72,7 @@
}); });
}); });
</script> </script>
<script> <script>
htmx.on('htmx:responseError', function (event) { htmx.on('htmx:responseError', function (event) {
var notification = document.getElementById('notification'); var notification = document.getElementById('notification');