Nicht eigenloggt

Sie sind nicht eingeloggt. Wenn Sie ohne Login fortfahren, wird Ihr Fortschritt nicht gespeichert.

Jetzt einloggen
Zum Hauptinhalt springen

HTML Editor

Der SVG Editor ist eine Komponente, welche auf dem CodeBlock aufbaut - es muss also nichts zusätzlich installiert werden.

<HtmlEditor id="79ba3332-b43d-421a-8702-e5ac7890435d" title='website.html'>
    ```html
    <!DOCTYPE html>
    <html>
        <head>
            <title>Gummibären</title>
            <style>
                img {
                    border-radius: 8px;
                    width: 300px;
                }
            </style>
        </head>
        <body>
            <h1>Gummibären</h1>
            <p>Bunte <a href="https://de.wikipedia.org/wiki/Gummib%C3%A4r">Gummibären</a> sind beliebte Fruchtgummis.</p>
            <img alt="Gummibären" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Gummy_bears.jpg/1200px-Gummy_bears.jpg">
        </body>
    </html>
    ```
</HtmlEditor>
http://localhost:3000
website.html
Wird nicht gespeichert.
<!DOCTYPE html>
<html>
<head>
<title>Gummibären</title>
<style>
img {
border-radius: 8px;
width: 300px;
}
</style>
</head>
<body>
<h1>Gummibären</h1>
<p>Bunte <a href="https://de.wikipedia.org/wiki/Gummib%C3%A4r">Gummibären</a> sind beliebte Fruchtgummis.</p>
<img alt="Gummibären" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Gummy_bears.jpg/1200px-Gummy_bears.jpg">
</body>
</html>
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
file:///website.html

HTML Transformation​

Für Übungen, in welchen "lokale" Medien referenziert werden sollen, kann der HTML-Code vorprozessiert werden:

<HtmlEditor 
    id="b0a6fa06-2275-4744-a6d1-ae51eab6436b"
    htmlTransformer={(html) => {
        return html.replaceAll('"./gummibär.jpg"', '"https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Gummy_bears.jpg/1200px-Gummy_bears.jpg"')
    }}
>
    ```html
    <img src="./gummibär.jpg" width="200">
    ```
</HtmlEditor>
http://localhost:3000
website.html
Wird nicht gespeichert.
<img src="./gummibär.jpg" width="200">
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
file:///website.html

HTML IDE​

Der HTML IDE ist eine Komponente, welche auf dem CodeBlock und dem HtmlEditor aufbaut - es muss also nichts zusätzlich installiert werden. Sie ermöglicht das Editieren von mehreren Dateien in einem Dateibaum, wobei auch relative Verlinkungen möglich sind.

<HtmlIDE>
    ```html path=/index.html id=a877cf87-8505-4309-8129-c3a60ed831ad
    <h1>Foo Bar</h1>
    <a href="./dir/sub.html">Zu SubPage</a>
    ```
    ```html path=/dir/sub.html id=c1d27537-aaba-493d-8da5-15c45d5b05c4
    <h1>SubPage</h1>
    <a href="../index.html">Zurück zur Startseite</a>
    ```
</HtmlIDE>
http://localhost:3000
  • /
    • index.html
    • dir
      • sub.html
    • /index.html
    Wird nicht gespeichert.
    <h1>Foo Bar</h1>
    <a href="./dir/sub.html">Zu SubPage</a>
    הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    file:////index.html
    import HtmlIDE from '@tdev-components/documents/CodeEditor/HtmlEditor/HtmlIDE';
    <HtmlIDE
        assets={{
            '/gummibär.jpg': 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Gummy_bears.jpg/1200px-Gummy_bears.jpg',
            '/dir/example.png': 'https://cdn-icons-png.flaticon.com/512/9584/9584876.png'
        }}
    >
    ```html path=/index.html id=c80067ae-1cd2-4117-b44d-4605fc847d50
    <h1>Foo Bar</h1>
    <img src="./gummibär.jpg" width="100">
    <img src="./dir/example.png" width="100">
    <a href="./dir/sub.html">Zu SubPage</a>
    ```
    ```html path=/dir/sub.html id=edc961ef-f629-46a3-8f87-c49460e8b32b
    <h1>SubPage</h1>
    <img src="../gummibär.jpg" width="100">
    <img src="./example.png" width="100">
    <img src="/gummibär.jpg" width="50">
    <a href="../index.html">Zurück zur Startseite</a>
    ```
    </HtmlIDE>
    http://localhost:3000
  • /
    • index.html
    • dir
      • sub.html
      • example.png
    • gummibär.jpg
    • /index.html
    Wird nicht gespeichert.
    <h1>Foo Bar</h1>
    <img src="./gummibär.jpg" width="100">
    <img src="./dir/example.png" width="100">
    <a href="./dir/sub.html">Zu SubPage</a>
    הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    file:////index.html