introduction

Cette fois, je développe une application de mémo, mais je voudrais implémenter la publication de mémo avec markdown, et cette fois j'apprendrai comment le faire.

La fonction que je voulais cette fois ・ Markdown ・ Aperçu en temps réel

Introduction de gemme

gem 'redcarpet', '~> 2.3.0'
gem 'coderay'

bundle install

Implémentation de la notation markdown

app/heplers/markdown_helper.rb Créez un nouveau fichier markdown_helper.rb dans le fichier ci-dessus.

`markdown_helper.rb`


module MarkdownHelper
  def markdown(explanation) #()Entrez le nom de la colonne à l'intérieur
    options = {
    filter_html: true,
    hard_wrap: true,
    space_after_headers: true,
    with_toc_data: true
    }

    extensions = {
    autolink: true,
    no_intra_emphasis: true,
    fenced_code_blocks: true,
    tables: true
    }

    renderer = Redcarpet::Render::HTML.new(options)
    markdown = Redcarpet::Markdown.new(renderer, extensions)
    markdown.render(explanation).html_safe #()Nom de colonne dans
  end
end

Veuillez vous référer au site de référence pour le contenu des options et extensions (comme filter_html). Il est rédigé avec plus de soin et devrait être utile.

Implémentation de l'aperçu en temps réel

Tout d'abord, écrivez pour charger vue.js et marqué.js.

`application.html.erb`


<-- Vue.Description de js lecture-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>
<--marked.Description de js lecture-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>

voir la modification

new

`_form.html.erb`


<%= form_with model:note, local: true do |f| %>
  <div class='form-group'>
    <%= f.label :Titre%>
    <%= f.text_field :title, class: 'form-control', id: 'note_title' %>
  </div>
  <div class='form-group'>
    <%= f.label :Catégorie%>
    <%= f.collection_select :category_id, Category.all, :id, :name %>
  </div>
  <div class='form-group'>
    <div id='editor'>
      <%= f.label :Contenu%>
      <%= f.text_area :explanation, rows: 5, class: 'form-control', id: 'note_explanation', "v-model" => "input", name: "note[explanation]" %>
    <div v-html='input | marked'></div>
  </div>
  <%= f.submit 'enregistrement', class: 'btn btn-success' %>
  </div>
  <% end %>

  <!--Aperçu en temps réel-->
  <script type="text/javascript">
    window.onload = function() {
      new Vue({
      el: '#editor',
      data: {
        input: '<%== j @note.explanation %>',
      },
      filters: {
      marked: marked,
      },
      });
    };
  </script>

Ce sera comme ci-dessus, mais je vais vous expliquer en partie.

<!--Aperçu en temps réel-->
  <script type="text/javascript">
    window.onload = function() {
      new Vue({
      el: '#editor',
      data: {
        input: '<%== j @note.explanation %>',   #Variable d'instance et nom de colonne définis par vous-même
      },
      filters: {
      marked: marked,
      },
      });
    };
  </script>

ʻInput: '<% == j @ note.explanation%>' `est de mettre note.explanation dans le formulaire au moment de l'édition.

La difficulté suivante était de savoir comment faire pour que f.text_area de form_with ait une entrée v-model. v- semble être une description propre à Vue.js, et à l'utiliser dans une balise Ruby

"v-model" => "input"

Je devais le faire comme. Puisqu'il est séparé par-, il n'y a pas eu de réponse même s'il a été décrit sans "".

Vient ensuite l'attribut name.

name: "note[explanation]"nom de l'application[Nom de colonne]

Précisez comme ci-dessus.

Enfin, il faut décrire pour que la partie décrite dans text_area soit affichée.

v-html est également une expression de vue.js.

Ici, ce n'est pas une balise ruby mais une balise HTML, donc il n'y a pas de problème tel quel.

show Dans mon cas, je veux que l'action show affiche l'article en notation markdown, donc je vais corriger cela.

<div class='stretch-text'>
  <h2>Titre:<%= @note.title %></h2>
  <h2>Catégorie:<%= @note.category.name %></h2>
  <h2>Explication:<%= markdown(@note.explanation) %></h2>   #Fixez ici
  <%= link_to "Éditer", edit_note_path(@note),data: {"turbolinks" => false} %>
  <%= link_to "Supprimer", note_path(@note), method: :delete %>
</div>

Le changement est markdown ("# {@ note.explanation}).

En faisant cela, j'ai pu lire la notation markdown.

Ceci est terminé!

Je pense qu'il peut être mis en œuvre à ce stade.

finalement

Il y a de nombreuses parties qui manquent d'explication et de compréhension, mais je les actualiserai dès que je les comprendrai. De plus, s'il y a des erreurs, merci de votre coopération.

Markdown implémenté dans Rails