Einführung

Dieses Mal entwickle ich eine Memo-Anwendung, aber ich möchte Memo-Postings mit Markdown implementieren, und dieses Mal werde ich lernen, wie es geht.

Die Funktion wollte ich diesmal ・ Abschlag ・ Echtzeitvorschau

Einführung von Edelstein

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

bundle install

Implementierung der Markdown-Notation

app/heplers/markdown_helper.rb Erstellen Sie eine neue Datei "markdown_helper.rb" in der obigen Datei.

`markdown_helper.rb`


module MarkdownHelper
  def markdown(explanation) #()Geben Sie den Spaltennamen ein
    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 #()Spaltenname in
  end
end

Informationen zum Inhalt von Optionen und Erweiterungen (z. B. filter_html) finden Sie auf der Referenzseite. Es ist sorgfältiger geschrieben und sollte hilfreich sein.

Implementierung der Echtzeitvorschau

Schreiben Sie zunächst, um vue.js und markierte.js zu laden.

`application.html.erb`


<-- Vue.Beschreibung der Lesung-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>
<--marked.Beschreibung der Lesung-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>

Ansichtsänderung

new

`_form.html.erb`


<%= form_with model:note, local: true do |f| %>
  <div class='form-group'>
    <%= f.label :Titel%>
    <%= f.text_field :title, class: 'form-control', id: 'note_title' %>
  </div>
  <div class='form-group'>
    <%= f.label :Kategorie%>
    <%= f.collection_select :category_id, Category.all, :id, :name %>
  </div>
  <div class='form-group'>
    <div id='editor'>
      <%= f.label :Inhalt%>
      <%= 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 'Anmeldung', class: 'btn btn-success' %>
  </div>
  <% end %>

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

Es wird wie oben sein, aber ich werde es teilweise erklären.

<!--Echtzeitvorschau-->
  <script type="text/javascript">
    window.onload = function() {
      new Vue({
      el: '#editor',
      data: {
        input: '<%== j @note.explanation %>',   #Instanzvariable und Spaltenname selbst festgelegt
      },
      filters: {
      marked: marked,
      },
      });
    };
  </script>

input: '<% == j @ note.explanation%>' dient dazu, note.explanation zum Zeitpunkt der Bearbeitung in das Formular einzufügen.

Die nächste Schwierigkeit bestand darin, f.text_area von form_with mit v-model input zu erstellen. v- scheint eine Beschreibung zu sein, die Vue.js eigen ist, und sie in einem Ruby-Tag zu verwenden

"v-model" => "input"

Ich musste es tun als. Da es durch- getrennt ist, gab es keine Antwort, auch wenn es ohne "" beschrieben wurde.

Weiter ist das Namensattribut.

name: "note[explanation]"App Name[Spaltenname]

Geben Sie wie oben an.

Schließlich muss beschrieben werden, damit der in text_area beschriebene Teil angezeigt wird.

v-html ist auch ein Ausdruck von vue.js.

Hier handelt es sich nicht um ein Ruby-Tag, sondern um ein HTML-Tag, sodass es kein Problem gibt.

show In meinem Fall möchte ich, dass die Show-Aktion den Artikel in Markdown-Notation anzeigt, also werde ich das beheben.

<div class='stretch-text'>
  <h2>Titel:<%= @note.title %></h2>
  <h2>Kategorie:<%= @note.category.name %></h2>
  <h2>Erläuterung:<%= markdown(@note.explanation) %></h2>   #Hier beheben
  <%= link_to "Bearbeiten", edit_note_path(@note),data: {"turbolinks" => false} %>
  <%= link_to "Löschen", note_path(@note), method: :delete %>
</div>

Die Änderung ist ein Abschlag ("# {@ note.explanation}).

Auf diese Weise konnte ich die Markdown-Notation lesen.

Damit ist fertig!

Ich denke, dass es an dieser Stelle implementiert werden kann.

Schließlich

Es gibt viele Stellen, an denen es an Erklärung und Verständnis mangelt, aber ich werde es aktualisieren, sobald ich es verstehe. Auch wenn es Fehler gibt, danke für Ihre Mitarbeit.

Markdown in Rails implementiert