froala / wysiwyg-rails

Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
MIT License
465 stars 102 forks source link

cant get froala display in simple_form textarea #37

Closed roccia closed 8 years ago

roccia commented 8 years ago

I follow the solution mentioned in https://github.com/froala/wysiwyg-rails/issues/14 but it still did not work, hope someone could help me the code:

<div class = "row">
<%= simple_form_for @event, :html=>{:multipart => true } do |f|  %>
  <% if @event.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>

      <ul>
      <% @event.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
<div class="container">
      <%= f.input :name %>
      <%= f.input :desc %>
      <%= f.input :stdate %>
      <%= f.input :place %>
      <%= f.input :days %>
      <%= f.input :price %>
      <%= f.input :place %>
      <%= f.text_area :notes , :class => "myEditor"  %>
      <%= f.button :submit %>
<% end %>

</div>
  <script>
    $(function() {
      $('#myEditor'). editable()
    });
  </script>
</div>
lebart commented 8 years ago

Hello,

You give a class to your input but you use an id in your javascript.

You can change to this:

</div>
  <script>
    $(function() {
      $('.myEditor'). editable()
    });
  </script>
</div>
roccia commented 8 years ago

@lebart still, nothing happens, just a plain textarea showed on screen, I think the js does not working at all.

lebart commented 8 years ago

Have your require all the files like mentioned in the docs? Do you see any error in the js console?

roccia commented 8 years ago

@lebart do I need put the js in application.js? the code I showed is in _form.html.erb , but I don't think that is the problem right?

roccia commented 8 years ago

@lebart oh yes new:165 Uncaught TypeError: $(...).editable is not a function .... I forgot to check the js console

lebart commented 8 years ago

I think you need to initialize Froala with this:

<script>
      $(function() {
          $('.myEditor').froalaEditor()
      });
</script>

.froalaEditor() instead of .editable()

roccia commented 8 years ago

@lebart yes! should be froalaEditor() , I checked the doc : https://www.froala.com/wysiwyg-editor/docs/concepts/save Thank you so much !

lebart commented 8 years ago

Your welcome.

ps: Don't forget to mark this as close if you think this solve your issue.

roccia commented 8 years ago

@lebart sure TX agian!