[RUBY] Erstellen Sie in Rails 6 einen Drag-and-Drop-Markdown-Editor (mit Active Storage, SimpleMDE und Inline-Anhang).

Überblick

Dies ist ein Memo beim Erstellen eines Markdown-Editors, mit dem Sie Bilder wie den Qiita-Post-Bildschirm in Rails6 ziehen und ablegen können.

Klicken Sie hier als Referenzcode

Übrigens habe ich Rails von GW gelernt und ein Blog erstellt, das diese Editorfunktion implementiert. (Gebaut mit Heroku, GCS) Wenn Sie interessiert sind, schauen Sie sich bitte die lokalen Orte im östlichen Teil der Präfektur Shizuoka an. Surugabu

Umgebung

Mac OS 10.15.4 Ruby 2.6.3p62 Rails 6.0.2.2

Über die zu verwendende Funktion

Es wird hauptsächlich mit drei OSS und Funktionen implementiert.

• SimpleMDE
• Inline Attachment
• Active Storage

SimpleMDE

Ein großartiges OSS, das das Textarea-Tag in Ihrem Browser in einen Markdown-Editor verwandelt. Es ist auch mit verschiedenen Funktionen wie einer automatischen Speicherfunktion ausgestattet.

Link

Inline Attachment

Es implementiert die Dateiübertragung mit Ajax einfach durch Ziehen und Ablegen aus dem Browser. In Kombination mit SimpleMDE werden gezogene und abgelegte Bilder asynchron gesendet und das hochgeladene Ergebnis wird im Editor angezeigt.

Link

Active Storage

In Rails integrierte Funktionen zum Hochladen von Dateien. Mit dieser Funktion können Sie die Datei-Upload-Funktion problemlos implementieren. Sie ist eine hervorragende Funktion, die auch das Hochladen in Cloud-Speicher wie AWS, Azure und GCP unterstützt.

Verfahren

Erstellung von PJ und verschiedenen Installationen

#Rails-Projekterstellung
rails new markdown_drag_and_drop

#Installation des aktiven Speichers
rails active_storage:install
rails db:migrate

#Installation des erforderlichen js-Moduls
yarn add simplemde
yarn add inline-attachment

Turbolinks deaktivieren

Standardmäßig enthält Rails Turbolinks, die reguläre Websites aus Geschwindigkeitsgründen zu teilweisen DOM-Änderungen wie SPA zwingen. Es ist jedoch oft schlecht für js, es zu implementieren, deshalb habe ich es dieses Mal deaktiviert.

app/javascript/packs/application.js

//Invalidierung
// require("turbolinks").start()

erb:app/views/layouts/application.html.erb

<!-- 'data-turbolinks-track': 'reload'Löschen-->
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>

Modelle, Controller und Ansichten erstellen

Erstellen Sie eine Vorlage mit Gerüst. Der Inhalt ist ein Feld, in dem Markdown als Zeichenfolge gespeichert wird.

rails g scaffold article content:text

Platzieren Sie einen Textbereich auf dem Formularbildschirm, der als Markdown-Editor fungiert.

erb:app/views/articles/_from.html.erb

<!--Js auf dem Bildschirm verwendet(Später beschrieben) -->
<%= javascript_pack_tag 'article' %>

<%= form_with(model: article, local: true) do |form| %>
 <!--Abkürzung-->

<div class="field">
    <%= form.label :content %>
    <%= form.text_area :content, { id: "editor"} %>
</div>

<div class="actions">
    <%= form.submit %>
</div>
<% end %>

Erstellen Sie js zum Lesen auf dem Bildschirm.

• Textbereich bearbeiten
• Einstellung für die Kommunikation mit Ajax beim Ziehen und Ablegen im Editor

halten. Der Prozess für die Kommunikation mit Ajax wird später erstellt.

app/javascript/packs/article.js

import "inline-attachment/src/inline-attachment";
import "inline-attachment/src/codemirror-4.inline-attachment";
import 'simplemde/dist/simplemde.min.css'
import SimpleMDE from "simplemde";
import Rails from '@rails/ujs'

window.onload = function () {
  //Machen Sie den Textbereich zu einem Markdown-Editor
  const simplemde = new SimpleMDE({
    element: document.getElementById("editor"),
  });
  //Ziehen Sie das Bild in den Editor&Verarbeitung beim Ablegen
  inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
    uploadUrl: "/articles/attach", //Ziel-URL zu POST
    uploadFieldName: "image", //Name des Dateifelds(Schlüssel beim Abrufen mit Parametern)
    allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
    extraHeaders: { "X-CSRF-Token": Rails.csrfToken() }, //CSRF-Maßnahmen
  });
};

Erstellen eines Prozesses zum Senden einer Datei

Erstellen Sie ein Modell zum Senden von Dateien mit Active Storage.

rails g model attachment

app/models/attachment.rb

class Attachment < ApplicationRecord
    has_one_attached :image
end

Fügen Sie dem vom Gerüst erstellten Controller die Verarbeitung für die Ajax-Kommunikation hinzu. Speichern Sie das Bild und geben Sie die URL in JSON zurück. Da Dateiname ein Parameter ist, den inlineAttachment standardmäßig empfängt, stimmen Sie ihn ab.

app/controllers/articles_controller.rb

class ArticlesController < ApplicationController
  ...
  def attach
    attachment = Attachment.create! image: params[:image]
    render json: { filename: url_for(attachment.image) }
  end
  ...
end

Zum Routing hinzufügen.

routes.rb

  post 'articles/attach', to: 'articles#attach'

Funktionsprüfung

Wenn Sie es ausführen, ziehen Sie es in den Editor und legen Sie es ab. Der Markdown für den Bildlink wird ausgegeben. Er ist erfolgreich.

rails db:migrate
rails s

Bildgröße ändern

Anstatt das hochgeladene Bild so zurückzugeben, wie es ist Wenn Sie das verwenden möchten, dessen Größe Sie ändern möchten, können Sie die komprimierte Variante auch zurückgeben. Active Storage führt auch eine Komprimierung durch, sodass dies einfach ist.

app/models/attachment.rb

class Attachment < ApplicationRecord
  has_one_attached :image

  def image_compressed
    if image.attached?
      image.variant(resize_to_fit: [700, 600]).processed
    end
  end
end

Zusammenfassung und Eindrücke

Ich habe Ihnen gezeigt, wie Sie einen Markdown-Editor erstellen, mit dem Sie Bilder in Rails 6 ziehen und ablegen können. Ich habe kürzlich angefangen, Rails zu verwenden, und obwohl ich mich an verschiedene implizite Regeln erinnern muss, ist dies einfach, da verschiedene Prozesse leicht implementiert werden können.

Referenz

https://github.com/sparksuite/simplemde-markdown-editor/issues/328