Ankündigung

Einklappen
Keine Ankündigung bisher.

Bild anklicken und an eine beliebige Stelle in einem Text einfügen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • #16
    Genau deswegen brauchst du Javascript.
    Das Img Element hat ja nicht nur den Text am Anfang sondern auch ein Alt Attribut, und die schliessende Klammer am Ende, das du vor dem ablegen (drop) dem Text hinzufügen musst.
    Du kannst in der Konsole des Browsers testen. Dazu [F12] im Browser drücken und console auswählen.

    HTML-Code:
    <script>
    var img = '<img src="' + hier kommt deine URI aus dem Bild rein + '" alt="Bild">';
    console.log(var);
    </script>
    https://wiki.selfhtml.org/wiki/JavaS...Objekte/String

    Mit ziemlicher Sicherlich kann dir das kaminbausatz als Einzeiler zeigen

    Kommentar


    • #17
      Zitat von protestix Beitrag anzeigen

      Mit ziemlicher Sicherlich kann dir das kaminbausatz als Einzeiler zeigen
      #5 macht ohne js genau das gleiche wie mit js (sofern textarea den blinkenden Cursor zeigt)

      Wenn textarea den Focus hat reicht tatsächlich ein Einzeiler der auch im IE funktioniert.

      HTML-Code:
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8" />
      <title>Drag and drop</title>
      </head>
      <body>
      <p>
          <img src="http://lorempixel.com/200/200/food" alt="image1">
          <span>Image1</span>
      </p>
      <p>
          <img src="http://lorempixel.com/400/200/sports" alt="image2">
          <span>Image2</span>
      </p>
      <textarea id="mytext" rows="10" cols="50">text text</textarea>
      <script>
        [].forEach.call(document.querySelectorAll('img'),function(el){el.addEventListener('dragstart', function(ev){ev.dataTransfer.setData('Text','<img src="'+this.src+'" alt="'+this.alt+'">')})})
      </script>

      Kommentar


      • #18
        Das funktioniert tatsächlich.
        Bin immer wieder fasziniert, auch wenn ich den Zaubertrick nicht verstehe.

        Kommentar


        • #19
          Ist ganz simpel,
          mit [].forEach klaue ich mir die Array.forEach Methode,
          da Textarea immer drop text akzeptiert, muss ich nur noch dafür sorgen, dass beim Image dragstart img.src durch den kompletten Text ersetzt wird...

          Kommentar


          • #20
            Wow super genial das Funktioniert! Ich hatte das Script erst falsch gesetzt, muss natürlich unter das <img src sonst kann es ja nicht ersetzen. Ich danke Dir vielmals.
            Wenn es jetzt noch möglich wäre gleich zwei <br> tags vor und hinter das Bild gleich mit einzufügen wäre das noch sehr Praktisch. Oder geht das nur über eine eigene Funktion?

            Kommentar


            • #21
              Schau dir den Code an und die Stelle wo img steht, da fügst du einfach vor < die Br hinzu. Gleiches am Ende des Strings vor der Klammer,
              Das solltest du selber hinbekommen.

              Kommentar


              • #22
                Passt, danke Dir protestix. Hab gedacht das ist viel Komplizierter. Der ersetzt die tags gleich mit.

                Kommentar

                Lädt...
                X