[RUBY] Créez un éditeur de démarques par glisser-déposer dans Rails 6 (à l'aide d'Active Storage, SimpleMDE et Inline Attachment)

Aperçu

Ceci est un mémo lors de la création d'un éditeur Markdown qui vous permet de faire glisser et déposer des images comme l'écran de publication Qiita dans Rails6.

Cliquez ici pour le code de référence

Au fait, j'ai appris Rails de GW et créé un blog qui implémente cette fonction d'éditeur. (Construit avec Heroku, GCS) Si vous êtes intéressé, veuillez consulter les spots locaux dans la partie orientale de la préfecture de Shizuoka. Surugabu

environnement

Mac OS 10.15.4 Ruby 2.6.3p62 Rails 6.0.2.2

À propos de la fonction à utiliser

Il est implémenté principalement à l'aide de trois OSS et fonctions.

• SimpleMDE
• Inline Attachment
• Active Storage

SimpleMDE

Un excellent OSS qui transforme la balise textarea de votre navigateur en un éditeur Markdown. Il est également équipé de diverses fonctions telles qu'une fonction de sauvegarde automatique.

Lien

Inline Attachment

Il implémente facilement la transmission de fichiers avec Ajax par glisser-déposer depuis le navigateur. En combinaison avec SimpleMDE, les images glissées et déposées sont envoyées de manière asynchrone et le résultat téléchargé est reflété dans l'éditeur.

Lien

Active Storage

Fonctionnalité de téléchargement de fichiers intégrée à Rails. Vous pouvez facilement implémenter la fonction de téléchargement de fichiers en l'utilisant, et c'est une excellente solution qui prend également en charge le téléchargement vers un stockage cloud tel qu'AWS, Azure, GCP.

procédure

Création de PJ et de diverses installations

#Création de projet Rails
rails new markdown_drag_and_drop

#Installation de stockage actif
rails active_storage:install
rails db:migrate

#Installation du module js requis
yarn add simplemde
yarn add inline-attachment

Désactiver les turbolinks

Par défaut, Rails inclut des turbolinks qui forcent les sites Web réguliers à effectuer des changements DOM partiels comme SPA pour la vitesse. Cependant, il est souvent mauvais pour js de l'implémenter, donc je l'ai désactivé cette fois.

app/javascript/packs/application.js

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

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

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

Création de modèles, de contrôleurs et de vues

Créez un modèle avec échafaudage. Le contenu est un champ qui enregistre Markdown sous forme de chaîne.

rails g scaffold article content:text

Placez une zone de texte sur l'écran du formulaire qui sera l'éditeur Markdown.

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

<!--Js utilisé à l'écran(Décrit plus tard) -->
<%= javascript_pack_tag 'article' %>

<%= form_with(model: article, local: true) do |form| %>
 <!--Abréviation-->

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

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

Créez js pour lire à l'écran.

--Edition de zone de texte

• Réglage pour communiquer avec ajax lorsqu'il est glissé et déposé dans l'éditeur

tenir. Le processus de communication avec ajax sera créé ultérieurement.

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 () {
  //Faire de textarea un éditeur Markdown
  const simplemde = new SimpleMDE({
    element: document.getElementById("editor"),
  });
  //Faites glisser l'image dans l'éditeur&Traitement en cas de chute
  inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
    uploadUrl: "/articles/attach", //URL de destination vers POST
    uploadFieldName: "image", //Nom du champ de fichier(Clé lors de la récupération avec des paramètres)
    allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
    extraHeaders: { "X-CSRF-Token": Rails.csrfToken() }, //Mesures CSRF
  });
};

Créer un processus d'envoi de fichier

Créez un modèle pour l'envoi de fichiers avec Active Storage.

rails g model attachment

app/models/attachment.rb

class Attachment < ApplicationRecord
    has_one_attached :image
end

Ajoutez le traitement pour la communication ajax au contrôleur créé par scaffold. Enregistrez l'image et renvoyez l'URL dans JSON. Puisque filename est un paramètre que inlineAttachment reçoit par défaut, faites-le correspondre.

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

Ajouter au routage.

routes.rb

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

Contrôle de fonctionnement

Si vous l'exécutez, faites-le glisser et déposez-le dans l'éditeur, et le Markdown pour le lien d'image est sorti, il réussit.

rails db:migrate
rails s

Redimensionnement d'image

Au lieu de renvoyer l'image téléchargée telle quelle Si vous souhaitez utiliser ce que vous souhaitez redimensionner, vous pouvez également renvoyer la variante compressée. Active Storage effectue également la compression, donc c'est facile.

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

Résumé et impressions

Je vous ai montré comment créer un éditeur Markdown qui vous permet de faire glisser et déposer des images dans Rails 6. J'ai récemment commencé à utiliser Rails, et bien que je doive me souvenir de diverses règles implicites, c'est facile car divers processus peuvent être facilement implémentés.

référence

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