Text editieren

[Bernd]

Guten Morgen,

<div id="komm_va_user">
  <?php echo nl2br($b_allgemeiner_kommentar) ?>
</div>

<a href="">Bearbeiten</a>

ist es möglich mit JavaScript bzw. jQuery folgendes umzusetzen.

Wenn ich auf Bearbeiten klicke soll um das <?php echo nl2br($b_allgemeiner_kommentar) ?> ein Textfeld gelegt werden dass ich den Text bearbeiten kann. Nachdem ich wieder aus dem Feld geklickt habe soll es wieder verschwinden.

[RR]

Guten Morgen,

<div id="komm_va_user">
  <?php echo nl2br($b_allgemeiner_kommentar) ?>
</div>

<a href="">Bearbeiten</a>

ist es möglich mit JavaScript bzw. jQuery folgendes umzusetzen.

Wenn ich auf Bearbeiten klicke soll um das <?php echo nl2br($b_allgemeiner_kommentar) ?> ein Textfeld gelegt werden dass ich den Text bearbeiten kann. Nachdem ich wieder aus dem Feld geklickt habe soll es wieder verschwinden.

Und die Änderungen auch?

[Bernd]

Und die Änderungen auch?

Natürlich nicht. Gespeichert wird im Hintergrund.

[RR]

Und die Änderungen auch?

Natürlich nicht. Gespeichert wird im Hintergrund.

Aha!

Und dürfen wir etwas darüber erfahren, wer das wie macht, oder ist das geheim?

Eingriff in vorhandene Systeme kann nämlich ungeahnte Folgen haben!

LG
RoRo

[Bernd]

Hat zwar nichts mit dem Thema zu tun, aber gespeichert wird es wie hier bereits erwähnt: https://forum.selfhtml.org/self/2019/jun/22/automatisches-speichern-verarbeiten-nach-eine-klick-auf-ein-option-feld-html/1750959#m1750959

[Felix Riesterer]

Lieber Bernd,

Hat zwar nichts mit dem Thema zu tun, aber gespeichert wird es wie hier bereits erwähnt: https://forum.selfhtml.org/self/2019/jun/22/automatisches-speichern-verarbeiten-nach-eine-klick-auf-ein-option-feld-html/1750959#m1750959

also suchst Du nur nach einer Möglichkeit, entweder ein Textinput oder eine Textarea mit JavaScript so auszustatten, dass Dein Ajax im Hintergrund das tun kann, was es soll.

Dazu würde ich, wenn kein WYSIWYG-Editor gewünscht ist, wie folgt vorgehen:

1. das fragliche div über die textContent-Eigenschaft inhaltlich auswerten
2. vor das div eine textarea setzen
3. den Textinhalt in die textarea pasten
4. einen "übernehmen"-Button einrichten
5. einen EventListener für das click-Ereignis des Buttons einrichten
6. einen EventListener für das blur-Ereignis der Textarea einrichten
7. beide EventListener auf Deine Ajax-Funktion richten, die die textarea wieder verbirgt und den Textinhalt des div-Elementsbei erfolgreichem Speichern aktualisiert

Es stellt sich die Frage, ob Du für das bearbeitbar-Machen einen gesonderten Button haben willst. Dieser könnte ein umbenannter "übernehmen"-Button aus Schritt 4 sein.

Wo genau benötigst Du jetzt Hilfe?

Liebe Grüße

Felix Riesterer

[Der Martin]

Hallo,

<div id="komm_va_user">
  <?php echo nl2br($b_allgemeiner_kommentar) ?>
</div>

<a href="">Bearbeiten</a>

ist es möglich mit JavaScript bzw. jQuery folgendes umzusetzen.

Wenn ich auf Bearbeiten klicke soll um das <?php echo nl2br($b_allgemeiner_kommentar) ?> ein Textfeld gelegt werden dass ich den Text bearbeiten kann. Nachdem ich wieder aus dem Feld geklickt habe soll es wieder verschwinden.

frei nach Radio Eriwan: Im Prinzip schon.

Ich würde dafür von vornherein ein textarea-Element vorsehen und dem ein readonly-Attribut mitgeben. Vielleicht auch noch mit CSS den Rahmen wegformatieren, so dass es wie ein gewöhnlicher Textblock aussieht.
Dann mit Javascript a) eine Klasse des Elements umschalten, um andere CSS-Regeln wirksam werden zu lassen, und b) die readonly-Eigenschaft invertieren.

Die Frage ist aber noch: Wie und wo willst du den geänderten Text speichern?

Und dann habe ich noch zwei Anmerkungen:

1. Niemals mit PHP einfach so Text in den HTML-Kontext spucken. Der sollte immer kontextspezifisch aufbereitet sein, am besten mit htmlspecialchars(). Das nl2br() brauchst du übrigens nicht mehr, wenn du tatsächlich den textarea-Ansatz nehmen willst.
2. Für solche Interaktionen innerhalb der Webseite, die kein neues Dokument aufrufen, solltest du keinen Link verwenden, sondern besser ein button-Element.

So long,
 Martin

[Bernd]

Hallo,

Ich würde dafür von vornherein ein textarea-Element vorsehen und dem ein readonly-Attribut mitgeben. Vielleicht auch noch mit CSS den Rahmen wegformatieren, so dass es wie ein gewöhnlicher Textblock aussieht.
Dann mit Javascript a) eine Klasse des Elements umschalten, um andere CSS-Regeln wirksam werden zu lassen, und b) die readonly-Eigenschaft invertieren.

ok, hab es etwas umgebaut

<label for="allgemeiner_kommentar">Wünsche</label>	
  <textarea name="allgemeiner_kommentar"
                   id="allgemeiner_kommentar" 
                   class="readonly" 
                   readonly><?php echo htmlspecialchars($b_allgemeiner_kommentar); ?></textarea>

  <button id="kommentar_bearbeiten">Bearbeiten</button>

Und hier der jQuery Code

$(document).ready(function(){

 $( "#kommentar_bearbeiten" ).click(function() {
   $('#allgemeiner_kommentar').prop("readonly", false);
   $('#allgemeiner_kommentar').addClass("edit");
   $('#allgemeiner_kommentar').removeClass("readonly");
 });

});  

Die Frage ist aber noch: Wie und wo willst du den geänderten Text speichern?

Den Text möchte ich dann wie hier beschrieben speichern:
https://forum.selfhtml.org/self/2019/jun/22/automatisches-speichern-verarbeiten-nach-eine-klick-auf-ein-option-feld-html/1750959#m1750959

1. Niemals mit PHP einfach so Text in den HTML-Kontext spucken. Der sollte immer kontextspezifisch aufbereitet sein, am besten mit htmlspecialchars(). Das nl2br() brauchst du übrigens nicht mehr, wenn du tatsächlich den textarea-Ansatz nehmen willst.

Ich habe htmlspecialchars hinzugefügt. In der Regel mache ich dieses auch nur hier hatte ich das Problem wenn ich htmlspecialchars nutze, wurde mein nl2br nicht mehr richtig dargestellt, deshalb hatte ich es raus geworfen.

2. Für solche Interaktionen innerhalb der Webseite, die kein neues Dokument aufrufen, solltest du keinen Link verwenden, sondern besser ein button-Element.

Ok, habe ich auch geändert

<button id="kommentar_bearbeiten">Bearbeiten</button>

Problem ist, ich habe eigentlich noch einen weiteren Link mit Drucken

<a href="drucken-kommentarTa.php?code=<?php echo $_GET['code'] ?>" target="_blank">Drucken</a>

Jetzt stehe die nicht mehr nebeneinander und sehen natürlich total unterschiedlich aus. Hmmm

[Felix Riesterer]

Lieber Bernd,

<textarea name="allgemeiner_kommentar"
                   id="allgemeiner_kommentar" 
                   class="readonly" 
                   readonly>

warum benötigst Du eine zusätzliche Klasse "readonly", wenn Du doch ein readonly-Attribut verwendest? Mit dem Attribut-Selektor kannst Du genau so Dein Element selektieren:

.readonly { color: red; }
[readonly] { color: red; }

<button id="kommentar_bearbeiten">Bearbeiten</button>

Problem ist, ich habe eigentlich noch einen weiteren Link mit Drucken

<a href="drucken-kommentarTa.php?code=<?php echo $_GET['code'] ?>" target="_blank">Drucken</a>

Jetzt stehe die nicht mehr nebeneinander und sehen natürlich total unterschiedlich aus. Hmmm

Vermutlich verwendest Du verschiedene Selektoren. Den Button selektierst Du sicherlich über seine ID (#kommentar_bearbeiten { ... }), während Du für den Drucklink keine solche hast. Aber entweder selektiertst Du ihn über eine Teilübereinstimmung in seinem href-Attribut, oder über das Vorhandensein des target-Attributs (besser letzteres überhaupt nicht verwenden - Deine Seite hat ja keine Frames! oder doch...?).

Liebe Grüße

Felix Riesterer

[Felix Riesterer]

Lieber Bernd,

für so etwas gibt es die diversen WYSIWYG-Editoren wie z.B. den TinyMCE, die ein div-Element in einen Editor umbauen (auch gerne auf Button-/Link-Klick hin). Diese Editoren haben Anknüpfungspunkte (API), mit denen man den editierten Inhalt auslesen kann, um ihn dann mit einem im Hintergrund laufenden JavaScript (AJAX) an den Server zu POSTen. Diese Editoren haben in aller Regel auch ein blur-Ereignis, mit dem man feststellen kann, dass der User außerhalb des Editors geklickt hat, um das als Aufforderung zum Speichern zu werten - wenn man keinen "übernehmen"-Button anbieten will.

Lesetipp: JS-Tutorials: Text an Cursorposition einfügen

Liebe Grüße

Felix Riesterer

[Bernd]

Hallo,

solche Editoren kommt nicht in mein Projekt. Hast du mal mit dem Inhalt eine PDF erzeugen lassen? Ganz schlimm was dabei raus kommt.

[Felix Riesterer]

Lieber Bernd,

solche Editoren kommt nicht in mein Projekt.

Du musst wissen, welches Werkzeug für Deine Zwecke das geeignetste ist.

Hast du mal mit dem Inhalt eine PDF erzeugen lassen? Ganz schlimm was dabei raus kommt.

Meine PDF erzeuge ich nicht mit HTML als inhaltlicher Grundlage. Sollte ich einmal benötigen, dass ich irgendeine Form von RichText in PDF umwandeln sollte, werde ich wohl den Weg über ein zwischengeschaltetes LaTex gehen. Noch aber genügen sehr enge Vorlagen, in die nur kleinere Textbausteine eingefügt werden sollen. Und dafür habe ich mein PHP-Script maßgeschneidert.

Liebe Grüße

Felix Riesterer

[Krawallbürste]

wie z.B. den TinyMCE,

solche Editoren kommt nicht in mein Projekt. Hast du mal mit dem Inhalt eine PDF erzeugen lassen? Ganz schlimm was dabei raus kommt.

Tach Bernd!

Was kann denn der TinyMCE für dein Template bzw. CSS und Dein html2pdf-Dingens? Der Vorschlag von Felix ist wirklich gut. Was du dann mit den Resultaten des TinyMCE anstellst ist irgendwie dein Problem…

[Bernd]

Hallo,

Was kann denn der TinyMCE für dein Template bzw. CSS und Dein html2pdf-Dingens? Der Vorschlag von Felix ist wirklich gut. Was du dann mit den Resultaten des TinyMCE anstellst ist irgendwie dein Problem…

ich habe mich für eine TinyMCE freie Version entschieden https://forum.selfhtml.org/self/2019/jun/23/text-editieren/1750992#m1750992

[Krawallbürste]

Oi Bernd!

Wenn dir die Textarea technisch reicht ist das absolut in Ordnung. Allerdings braucht es dafür kein JQuery. Wenn du das nicht aus anderen Gründen benötigst - dafür jedenfalls kannst Du den Download sparen und die Performance pushen.

Weitere Hinweise:

"onclick" reicht womöglich nicht. Es dürfte einfach sein, "onfocus" hinzuzufügen. Dann wäre noch das Verlassen zu klären. Also in etwa so:

<textarea
    name="allgemeiner_kommentar"
    id="allgemeiner_kommentar" 
    class=readonly" 
    readonly
    onclick="activateKommentar(this)"
    onfocus="activateKommentar(this)"
    onblur="deActivateKommentar(this)"

>

function activateKommentar(objectItem) {
    objectItem.readonly=false;
    objectItem.classList.remove("readonly");
    objectItem.classList.add("edit");
}

function deActivateKommentar(objectItem) {
    objectItem.readonly=true;
    objectItem.classList.remove("edit");
    objectItem.classList.add("readonly");
}

Damit wäre es dann auch einfacher, z.B. Tasten hinzuzufügen.