[FRAGE] TextArea (Editor) Inhalt via JavaScript den html Code anzeigen lassen.

[vpdberlin]

Hallo zusammen,

ich bin in der Javawelt sehr frisch und benötige bitte Eure Hilfe.

Ich habe ein Formular, welches die Eingaben in den einzelnen Felder im Hintergrund zu einem HTML Code zusammen setzt und in mir sofort unter dem Formular live anzeigt.

Die einzelnen Felder funktionieren bereits wunderbar, doch nun benötige ich für ein Texteingabefeld mit Editor Funktion die Programmiercodes für die Liveausgabe des entstandenen HTML Codes, der dann an den anderen Code (Einzelfelder) hinzugefügt wird.

Erworbener Editor für Websites:
gbRichEdit 5 - JavaScript | CodeCanyon

Irgendwie schwer zu erklären. Sorry


Hier einmal mein bestehender JS Quellcode:

<SCRIPT>

    function generateOutput() {

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementById("c");
              document.getElementById("output").value = 

'<br><br><b>Textbeispiel </b> <br><br><b>Feld: </b>Weitere Textbeispiele<br><b>Feld: </b>' + a.value + '<br><b>FELD 3: </b>' + b.value + '<br><b>ID: </b>' + c.value + '<br><b>Testfeld: </b> Bla bla bla.<br><br>'

;}

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}

</SCRIPT>

Hier das Formluar:

<form id="macreset" name="mac" action="" oninput="generateOutput();">

<fieldset>

<div class="form-row">
          <div class="col col-6">
                  <div class="field-group">
                           <input id="a" type="text" step="any" class="mdn-input" placeholder="1-XXXXXXXXXX">
                           <label class="mdn-label">Deine ID</label>
                           <span class="mdn-bar"></span>
                  </div>
         </div>
         <!-- end col-6 -->

         <div class="col col-6">
                  <div class="field-group">
                           <input id="b" type="test" class="mdn-input" placeholder="Deine Angabe">
                           <label class="mdn-label">Grund</label>
                           <span class="mdn-bar"></span>
                  </div>
         </div>
         <!-- end col-6 -->
</div>
<!-- end form-row -->

<div class="form-row">
        <div class="col col-6">
                 <div class="field-group">
                          <input id="c" type="text" step="any" class="mdn-input" placeholder="Eingabe">
                          <label class="mdn-label">Feldname</label>
                          <span class="mdn-bar"></span>
                 </div>
        </div>
        <!-- end col-6 -->
</div>
<!-- end form-row -->


<!-- TEXTEDITOR - Start -->

<textarea id="udescription" name="udescription" class="gre" rows="50"></textarea>

<!-- TEXTEDITOR - Ende -->

</fieldset>


<!-- AUSGABEBOX - Start -->

<div style="background-color:transparent;
            font-size:13px;
            width:px;
            height:150px;
            border:1px black solid;
            border-style: solid;
            border-color: lightgray;
">

<output id="output" ></output>

</div><br>

<!-- AUSGABEBOX - Ende -->


</form>

Das was jetzt im Texteditor eingegeben und auch angepasst wird, soll nun oben im bestehenden HTML Code ergänzt werden. Wichtig ist nur, dass es nicht wörtlich wiedergeben wird sondern logischerweise als HTML Code.

Beispiel Eingabe: Hallo in Fettschrift = Ausgabe: <b>Hallo</b>



Ich hoffe ihr versteht mich was ich möchte und könnt mir helfen


Vielen Dank im Voraus.

VG
Ben

 

[kkapsner]

Das oninput wird nicht gefeuert, wenn der Inhalt einer <textarea> per JS geändert wird, was der Texteditor wahrscheinlich macht. Aber bei dem Teil wird es sicherlich irgendeine Möglichkeit geben, eine JS-Funktion nach Änderung auszuführen (sollte in der Doku stehen). Dort musst du deine generateOutput registrieren.