Inhalte können in Phoenix LiveView bearbeitet werden

Das Problem

Der Grund dafür ist, dass wir der Meinung sind, dass ein Formular (so etwas wie ein Formular) nicht immer für die Verwendung in Ihrer Benutzeroberfläche geeignet ist. In bestimmten Fällen muss es lediglich wie die reguläre Benutzeroberfläche aussehen, die Sie bereits haben. Es handelt sich allerdings um eine Art versteckte Benutzeroberfläche, und Sie denken vielleicht anders darüber, aber wir haben sie so implementiert, wie Sie es im Video oben sehen, und es gefällt uns.

Der Grund dafür, dass wir es so implementieren, ist, dass der Titel auf jeder Seite vorhanden ist, um Ihnen zu zeigen, wo Sie sich in unserem Admin-Panel von mave befinden. Es gehört dazu, sich zurechtzufinden und zu verstehen, wo man sich befindet. Aber die Videoseite, auf der Sie etwas hochgeladen haben, verwendet standardmäßig den Dateinamen als Titel. Und wir haben viele Anfragen erhalten, diesen Titel ändern zu können. Wenn Sie es also ändern möchten, können Sie darauf klicken und es wird in eine (so etwas wie eine) Eingabe umgewandelt: das inhaltsbearbeitbare Element.

Leider wird Phoenix Liveview derzeit nicht mit einer Komponente zum Verwalten von inhaltsbearbeitbaren Elementen in einem <.form /> ausgeliefert. Wie Sie es beispielsweise mit text_input/3 tun würden, das normalerweise ein Eingabeelement und die zugehörigen Daten rendert.

Die Lösung

Lassen Sie uns untersuchen, wie Sie etwas Ähnliches erreichen können. Beginnen wir mit unserer Komponente, bei der es sich lediglich um etwas HTML handelt. Als nächstes möchten Sie einige CSS-Klassen hinzufügen (wir verwenden Tailwind), damit es zu Beginn der Bearbeitung gut aussieht, ähnlich wie Sie es von einem regulären Eingabeelement erwarten würden:

Jetzt müssen wir dafür sorgen, dass es gut mit Phoenix zusammenspielt. Dafür gibt es mehrere Ansätze. Sie können beispielsweise einen JavaScript MutationObserver verwenden, der Änderungen am contenteditable-Element erkennt und es mit einem Phx-Hook verknüpft. Wenn Sie später auch eine Fehlerbehandlung ergänzen möchten, ist die Formularkomponente mit hidden_input/3 jedoch praktischer. So können Sie Ihren Ecto.Changeset verwenden, die Eingabe wie gewohnt validieren und zusätzlich das Attribut contenteditable hinzufügen:

Wir haben der Komponente einige Zuweisungen hinzugefügt, damit wir diese Komponente wiederverwenden können. Jetzt wollen wir Änderungen, die am contenteditable vorgenommen wurden, widerspiegeln, um sie in den hided_input einzufügen und umgekehrt. Auch hier können wir MutationObserver verwenden, wir können aber auch einfach einzelne Ereignisse (Keyup usw.) verfolgen. Bevor wir unseren Hook einrichten, müssen wir einen id und einen phx-hook="content_editable" hinzufügen. Wir machen auch einen netten kleinen Trick, bei dem wir unseren Titel kürzen, wenn er zu lang wird. In unserem HTML verwenden wir Phoenix, um die Zeichenfolge abzuschneiden. Aber wir wollen trotzdem einen langen Titel speichern und bearbeiten (und ihn nicht mit ... am Ende speichern). Wir müssen also ein Datenattribut hinzufügen, das wir in unserem Hook verwenden:

Erstellen wir also unseren content_editable-Hook (keine Sorge, wenn Sie ihn noch nicht haben):

Es ist viel, aber lassen Sie mich es Ihnen erklären. Mit der Funktion mounted() beginnt alles und richtet diese Ereignisse ein. Die Idee ist, wenn Sie focus auf das Element klicken und darauf klicken, wird der vollständige Titeltext angezeigt, der von Phoenix über das Attribut data-title bereitgestellt wird. Das bedeutet, dass beim Abschneiden der gesamte Text im Element angezeigt wird.

Und wann immer focusout auftritt oder Sie die Eingabetaste auf Ihrer Tastatur drücken, wird save() aufgerufen, das tut, was es verspricht. Das Tastaturereignis wird durch keyup ausgelöst und ruft showText() auf, wodurch auch die nicht benötigten Zeilenumbrüche (aufgrund der Eingabetaste) entfernt werden. focusout passiert immer dann, wenn Sie außerhalb des Elements klicken, sobald es den Fokus hatte, oder wenn wir blur() für das Element aufrufen, was wir tun, wenn Sie die Eingabetaste drücken.

Zum Schluss kürzen wir beim Speichern den Text noch einmal ab und ändern den Wert des Formularelements, wenn er tatsächlich anders ist. Um sicherzustellen, dass das Formular von Phoenix verarbeitet wird, müssen wir ein Ereignis für das Eingabeelement auslösen.

Das ist es. Wir haben eine inhaltsbearbeitbare Komponente in Phoenix:

Sie können den endgültigen Code auf Github überprüfen.