Trix im Vergleich

Die meisten WYSIWYG-Editoren sind Wrapper um HTMLs contenteditable- und execCommand-APIs. Diese APIs wurden von Microsoft entwickelt, um die Live-Bearbeitung von Webseiten in Internet Explorer 5.5 zu unterstützen, und wurden schließlich von anderen Browsern rückentwickelt und kopiert.

Da diese APIs nie vollständig spezifiziert oder dokumentiert wurden und WYSIWYG-HTML-Editoren einen enormen Umfang haben, hat jede Browserimplementierung ihre eigenen Fehler und Eigenheiten. JavaScript-Entwickler sind somit gezwungen, die Inkonsistenzen zu lösen.

Trix umgeht diese Inkonsistenzen, indem es contenteditable als Ein-/Ausgabegerät behandelt: Wenn Eingaben im Editor erfolgen, wandelt Trix diese in eine Bearbeitungsoperation auf seinem internen Dokumentmodell um und rendert dann dieses Dokument zurück in den Editor. Dies gibt Trix vollständige Kontrolle darüber, was nach jedem Tastenanschlag geschieht, und vermeidet die Notwendigkeit, execCommand überhaupt zu verwenden.

Installation

Führen Sie bin/rails action_text:install aus, um das Yarn-Paket hinzuzufügen und die erforderliche Migration zu kopieren. Außerdem müssen Sie Active Storage für eingebettete Bilder und andere Anhänge einrichten. Bitte lesen Sie den Leitfaden "Active Storage Overview" für weitere Informationen.

Action Text verwendet polymorphe Beziehungen mit der Tabelle action_text_rich_texts, sodass sie mit allen Modellen geteilt werden kann, die Rich-Text-Attribute haben. Wenn Ihre Modelle mit Action Text-Inhalten UUID-Werte für Bezeichner verwenden, müssen alle Modelle, die Action Text-Attribute verwenden, UUID-Werte für ihre eindeutigen Bezeichner verwenden. Die generierte Migration für Action Text muss ebenfalls aktualisiert werden, um type: :uuid für die :record references-Zeile anzugeben.

Nach Abschluss der Installation sollte eine Rails-Anwendung folgende Änderungen aufweisen:

// application.js
import "trix"
import "@rails/actiontext"

Die Trix-Stylesheet wird zusammen mit den Action Text-Stilen in Ihrer application.css-Datei eingebunden.

Erstellen von Rich-Text-Inhalten

Fügen Sie ein Rich-Text-Feld zu einem vorhandenen Modell hinzu:

# app/models/message.rb
class Message < ApplicationRecord
  has_rich_text :content
end

oder fügen Sie ein Rich-Text-Feld hinzu, während Sie ein neues Modell erstellen, indem Sie:

$ bin/rails generate model Message content:rich_text

Sie müssen kein Content-Feld zu Ihrer Tabelle "messages" hinzufügen

Verwenden Sie dann rich_text_area, um auf dieses Feld im Formular für das Modell zu verweisen:

<%# app/views/messages/_form.html.erb %>
<%= form_with model: message do |form| %>
  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>
<% end %>

Und schließlich zeigen Sie den bereinigten Rich-Text auf einer Seite an:

<%= @message.content %>

Um den Rich-Text-Inhalt zu akzeptieren, müssen Sie nur das referenzierte Attribut zulassen:

class MessagesController < ApplicationController
  def create
    message = Message.create! params.require(:message).permit(:title, :content)
    redirect_to message
  end
end

Rendern von Rich-Text-Inhalten

Standardmäßig wird Action Text Rich-Text-Inhalte innerhalb eines Elements mit der Klasse .trix-content rendern:

<%# app/views/layouts/action_text/contents/_content.html.erb %>
<div class="trix-content">
  <%= yield %>
</div>

Elemente mit dieser Klasse, ebenso wie der Action Text Editor, werden durch das Trix-Stylesheet gestylt. Um eigene Styles bereitzustellen, entfernen Sie die Zeile = require trix aus der app/assets/stylesheets/actiontext.css-Datei, die vom Installationsprogramm erstellt wurde.

Um das HTML, das um Rich-Text-Inhalte gerendert wird, anzupassen, bearbeiten Sie das Layout app/views/layouts/action_text/contents/_content.html.erb, das vom Installationsprogramm erstellt wurde.

Um das HTML anzupassen, das für eingebettete Bilder und andere Anhänge (sogenannte Blobs) gerendert wird, bearbeiten Sie die Vorlage app/views/active_storage/blobs/_blob.html.erb, die vom Installationsprogramm erstellt wurde.

Rendering attachments

Zusätzlich zu Anhängen, die über Active Storage hochgeladen wurden, kann Action Text alles einbetten, was durch eine signierte GlobalID aufgelöst werden kann.

Action Text rendert eingebettete <action-text-attachment>-Elemente, indem es deren sgid-Attribut in eine Instanz auflöst. Sobald aufgelöst, wird diese Instanz an render weitergegeben. Das resultierende HTML wird als Nachfolger des <action-text-attachment>-Elements eingebettet.

Zum Beispiel betrachten Sie ein Benutzermodell:

# app/models/user.rb
class User < ApplicationRecord
  has_one_attached :avatar
end

user = User.find(1)
user.to_global_id.to_s #=> gid://MyRailsApp/User/1
user.to_signed_global_id.to_s #=> BAh7CEkiCG…

Als Nächstes betrachten Sie einen Rich-Text-Inhalt, der ein <action-text-attachment>-Element einbettet, das auf die signierte GlobalID der Benutzerinstanz verweist:

<p>Hello, <action-text-attachment sgid="BAh7CEkiCG…"></action-text-attachment>.</p>

Action Text verwendet die Zeichenkette "BAh7CEkiCG…", um die Benutzerinstanz aufzulösen. Als Nächstes betrachten Sie das Teilansichtsfragment users/_user der Anwendung:

<%# app/views/users/_user.html.erb %>
<span><%= image_tag user.avatar %> <%= user.name %></span>

Das resultierende HTML, das von Action Text gerendert wird, sieht möglicherweise so aus:

<p>Hello, <action-text-attachment sgid="BAh7CEkiCG…"><span><img src="..."> Jane Doe</span></action-text-attachment>.</p>

Um eine andere Teilansicht zu rendern, definieren Sie User#to_attachable_partial_path:

class User < ApplicationRecord
  def to_attachable_partial_path
    "users/attachable"
  end
end

Deklarieren Sie dann diese Teilansicht. Die Benutzerinstanz wird als lokale Variable user in der Teilansicht verfügbar sein:

<%# app/views/users/_attachable.html.erb %>
<span><%= image_tag user.avatar %> <%= user.name %></span>

Wenn Action Text die Benutzerinstanz nicht auflösen kann (zum Beispiel, wenn der Datensatz gelöscht wurde), wird automatisch eine Standardersatzteilansicht gerendert.

Rails stellt eine globale Teilansicht für fehlende Anhänge bereit. Diese Teilansicht ist in Ihrer Anwendung unter views/action_text/attachables/missing_attachable installiert und kann geändert werden, wenn Sie unterschiedliches HTML rendern möchten.

Um eine andere Teilansicht für fehlende Anhänge zu rendern, definieren Sie eine Klassenmethode to_missing_attachable_partial_path:

class User < ApplicationRecord
  def self.to_missing_attachable_partial_path
    "users/missing_attachable"
  end
end

Deklarieren Sie dann diese partial.

<%# app/views/users/missing_attachable.html.erb %>
<span>Deleted user</span>

Um sich mit dem Rendern des <action-text-attachment>-Elements in Action Text zu integrieren, muss eine Klasse folgendes tun:

Das Modul ActionText::Attachable einbinden.
Die Methode #to_sgid(**options) implementieren (die durch das GlobalID::Identification-Concern verfügbar gemacht wird).
(Optional) Die Methode #to_attachable_partial_path deklarieren.
(Optional) Eine Klassenmethode #to_missing_attachable_partial_path für den Umgang mit fehlenden Datensätzen deklarieren.

Standardmäßig binden sich alle Abkömmlinge von ActiveRecord::Base das GlobalID::Identification-Concern ein und sind daher ActionText::Attachable kompatibel.

Qelle:
https://guides.rubyonrails.org/action_text_overview.html
https://github.com/basecamp/trix/tree/main
https://gorails.com/episodes/trix-editor

Meld dich an und schreibe ein Kommentar