Rails WYSIWYG показывает код вместо стилизованного контента - PullRequest
0 голосов
/ 02 мая 2018

Ожидаемое поведение. Описание в стиле froala в шоу-акции.

Фактическое поведение. фактическое поведение

Действия по воспроизведению проблемы. У меня есть _form с кодом rails, поэтому я не могу запустить его в jsfiddle. Пожалуйста, позвольте мне добавить его в код ниже.

_form.html.erb

 <script> $(function() { $('textarea').froalaEditor() }); </script>
<div class="section">
<%= simple_form_for @post do |f| %>
  <div class="field">
    <div class="control">
      <%= f.input :title, input_html: { class: 'input' }, wrapper: false, label_html: { class: 'label' } %>
    </div>
  </div>    
  <div class="field">
    <div class="control">
      <%= f.input :content, input_html: { class: 'textarea' }, wrapper: false, label_html: { class: 'label' }  %>
    </div>
  </div>    
  <div>
   <%= f.label :image %>
   <%= f.file_field :image %>
 </div>    
  <%= f.button :submit, 'Create new post', class: "button is-primary" %>
<% end %>
</div>

show.html.erb

<% content_for :page_title, @post.title %>
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />
<section class="section" style="margin: auto;">
  <div class="container">
      <% if current_user.try(:editor) %>
    <nav class="level">
      <div class="level-left">
        <p class="level-item">
          <strong>admin</strong>
        </p>
      </div>
      <div class="level-right">
        <p class="level-item">
          <%= link_to "edytuj", edit_post_path(@post), class:"button"%>
        </p>
        <p class="level-item">
          <%= link_to "skasuj", post_path(@post), method: :delete, data: {confirm: "Are you sure?"}, class: "button-is-danger"%>
        </p>
      </div>
    </nav>
    <% end %>
    <hr />
  <p class="title is-2"><%=  @post.title %></p>
    <%= image_tag(@post.image.url, alt: 'Image') if @post.image? %>
      <div class="fr-view">
      <%= @post.content %>
</div>
    </div>
  </div>
</section>
<section class="section comments">
    <div class="container">
        <h2 class="subtitle is-5"><strong><%= @post.comments.count %></strong> Comments</h2>
        <%= render @post.comments %>
        <div class="comment-form">
            <hr />
            <h3 class="subtitle is-3">Leave a reply</h3>
            <%= render 'comments/form' %>
        </div>
    </div>
</section>

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require froala_editor.min.js    
#= require plugins/align.min.js
#= require plugins/char_counter.min.js
#= require plugins/code_beautifier.min.js
#= require plugins/code_view.min.js
#= require plugins/colors.min.js
#= require plugins/emoticons.min.js
#= require plugins/entities.min.js
#= require plugins/file.min.js
#= require plugins/font_family.min.js
#= require plugins/font_size.min.js
#= require plugins/fullscreen.min.js
#= require plugins/help.min.js
#= require plugins/image.min.js
#= require plugins/image_manager.min.js
#= require plugins/inline_style.min.js
#= require plugins/line_breaker.min.js
#= require plugins/link.min.js
#= require plugins/lists.min.js
#= require plugins/paragraph_format.min.js
#= require plugins/paragraph_style.min.js
#= require plugins/print.min.js
#= require plugins/quick_insert.min.js
#= require plugins/quote.min.js
#= require plugins/save.min.js
#= require plugins/table.min.js
#= require plugins/special_characters.min.js
#= require plugins/url.min.js
#= require plugins/video.min.js

application.scss.erb

/*
 @import "froala_editor.min.css";
 @import "froala_style.min.css";
 @import "font-awesome-sprockets";
 @import "font-awesome";
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require font-awesome    
 */
// *= require trix   
@import "bulma";
@import "functions";
@import "jobs";
@import "stripe";
@import "font-awesome";
@import 'plugins/char_counter.min.css';
@import 'plugins/code_view.min.css';
@import 'plugins/colors.min.css';
@import 'plugins/emoticons.min.css';
@import 'plugins/file.min.css';
@import 'plugins/fullscreen.min.css';
@import 'plugins/help.min.css';
@import 'plugins/image_manager.min.css';
@import 'plugins/image.min.css';
@import 'plugins/line_breaker.min.css';
@import 'plugins/quick_insert.min.css';
@import 'plugins/special_characters.min.css';
@import 'plugins/table.min.css';
@import 'plugins/video.min.css';

.notification {
  border-radius: 0;
}

.notification:not(:last-child) {
  margin-bottom: 0;
}

.hint {
    font-size: small;
}

.tag {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 9px !important;
}
.has-bg-img {
  background-image:url('<%= asset_path("ad.jpg") %>');
  background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
height:100%;
}

OS: Linux Ubuntu 17.10

Браузер: Хром 65.0.3325.181

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете использовать метод h() для экранирования содержимого html

<%=h @post.content %>
...