Hvorfor?
Conviviality
Hvordan?
Ved hjælp af en lokalt afviklet kunstig intelligens, har vi lavet en simpel HTML-teksteditor med basale funktioner:
- skrive i et tekstfelt
- mulighed for fed, kursiv og underline
- give dokumentet et navn
- samt gemme og åbne
Programmet er simpelt og kan let redigeres af andre – med eller uden lokal kunstig intelligens. Kan tilgås her:
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<title>ConvivialSkriver</title>
<style>
/* Grundlæggende styling for body og editor */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#editor {
border: 1px solid #ccc; /* Grå kant rundt om editoren */
padding: 10px; /* Indvendig margen */
min-height: 500px; /* Minimum højde for editoren */
width: 100%; /* Bredde på editoren */
outline: none; /* Ingen kant, når den er valgt */
}
/* Styling for værktøjslinjen */
.toolbar button,
.toolbar input[type="file"],
.toolbar input[type="text"] {
margin-right: 5px; /* Margen mellem knapper og inputfelter */
padding: 5px; /* Indvendig margen for knapper og inputfelter */
}
</style>
</head>
<body>
<h2>ConvivialSkriver</h2>
<!-- Værktøjslinje til formatering og filhåndtering -->
<div class="toolbar">
<input type="text" id="titleInput" placeholder="Indtast titel..." />
<button onclick="formatText('bold')">Fed</button>
<button onclick="formatText('italic')">Kursiv</button>
<button onclick="formatText('removeFormat')">Normal</button>
<button onclick="saveFile()">Gem</button>
<input type="file" id="fileInput" accept=".html" onchange="openFile()" />
</div>
<!-- Redigeringsområde, hvor brugeren kan skrive og formatere tekst -->
<div id="editor" contenteditable="true"></div>
<script>
// Funktion til at formatere tekst i editoren
function formatText(command) {
document.execCommand(command); // Udfører den valgte formateringskommando
}
// Funktion til at gemme indholdet af editoren som en HTML-fil
function saveFile() {
const editorContent = document.getElementById('editor').innerHTML; // Henter indholdet fra editoren
const title = document.getElementById('titleInput').value.trim() || 'tekst'; // Henter titlen, eller sætter 'tekst' som standard
const filename = `${title}.html`; // Opretter filnavnet
const blob = new Blob([editorContent], { type: 'text/html' }); // Opretter en blob med HTML-indholdet
createDownloadLink(blob, filename); // Kalder funktionen for at oprette downloadlink
}
// Funktion til at oprette og klikke på downloadlinket
function createDownloadLink(blob, filename) {
const link = document.createElement('a'); // Opretter et hyperlink-element
link.href = URL.createObjectURL(blob); // Genererer URL for blob'en
link.download = filename; // Sætter downloadnavnet
link.click(); // Simulerer klik for at starte download
}
// Funktion til at åbne en eksisterende HTML-fil og indlæse indholdet i editoren
function openFile() {
const file = document.getElementById('fileInput').files[0]; // Henter den valgte fil
if (!file) return; // Hvis ingen fil er valgt, afslut funktionen
const reader = new FileReader(); // Opretter en FileReader til at læse filindholdet
reader.onload = (e) => {
document.getElementById('editor').innerHTML = e.target.result; // Indlæser indholdet i editoren
};
reader.readAsText(file); // Læser filen som tekst
}
</script>
</body>
</html>