1 Frage zu Texteditor

Question

Ein einfacher Texteditor in JavaScript mit Zeilennummern.

Accepted Answer

Ein einfacher Texteditor in JavaScript, der Zeilennummern anzeigt, kann mit HTML, CSS und JavaScript erstellt werden. Hier ist ein einfaches Beispiel: ```html <!DOCTYPE html> <html lang=&quo... [mehr]

Accepted Answer

Ein einfacher Texteditor in JavaScript, der Zeilennummern anzeigt, kann mit HTML, CSS und JavaScript erstellt werden. Hier ist ein einfaches Beispiel: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="" content="width=device-width, initial-scale=1.0"> <title>Einfacher Texteditor</title> <style> body { display: flex; font-family: Arial, sans-serif; } #editor { width: 100%; height: 400px; padding: 10px; border: 1px solid #ccc; overflow: auto; resize: none; font-family: monospace; } #lineNumbers { padding: 10px; border-right: 1px solid #ccc; background: #f0f0f0; text-align: right; user-select: none; } </style> </head> <body> <div id="lineNumbers"></div> <textarea id="editor" oninput="updateLineNumbers()" onscroll="syncScroll()"></textarea> <script> function updateLineNumbers() { const editor = document.getElementById('editor'); const lineNumbers = document.getElementById('lineNumbers'); const lines = editor.value.split('\n').length; lineNumbers.innerHTML = Array.from({ length: lines }, (_, i) => i + 1).join('<br>'); } function syncScroll() { const editor = document.getElementById('editor'); const lineNumbers = document.getElementById('lineNumbers'); lineNumbers.scrollTop = editor.scrollTop; } </script> </body> </html> ``` In diesem Beispiel wird ein einfaches Textfeld (`textarea`) verwendet, um den Text einzugeben, und ein `div`, um die Zeilennummern anzuzeigen. Die Funktion `updateLineNumbers` aktualisiert die Zeilennummern basierend auf dem Inhalt des Textfelds, während `syncScroll` dafür sorgt, dass die Zeilennummern mit dem Scrollen des Textfelds synchronisiert werden.

1 Frage zu Texteditor

Fragen und Antworten zum Thema Texteditor

Ein einfacher Texteditor in JavaScript mit Zeilennummern.