Question

我在使用wysihtml5-rails gem实现wysihtlm5编辑器时遇到了麻烦：https://github.com/NARKOZ/wysihtml5-rails

首先，我的html标签未保存到数据库中。然后，如果表单提交失败，则text_area仅填充纯文本。我怎样才能确定，html标签是以正确的方式发送到服务器的？

在调试输出中，我可以看到描述是在没有html标签的情况下到达控制器：

Parameters: {"utf8"=>"✓", "authenticity_token"=>"fW5FMxr/sgNkLUowLT2E0UfIXtFbXvkOubPYM0GJm0I=",  "description"=>"sdfgsdfg"}, "_wysihtml5_mode"=>"1"}

的application.js：

//= require wysihtml5
//= require parser_rules/advanced

在我看来：

<%= form_for @auction do |f| %>
      <div class="control-group">
        <label class="control-label" for="auction_days">Beschreibung</label>
        <div class="controls">
          <div id="wysihtml5-toolbar" style="display: none;">
            <div class="btn-group">
              <a data-wysihtml5-command="bold" title="CTRL+B" class="btn"><i class="icon-bold"></i></a>
              <a data-wysihtml5-command="italic" title="CTRL+I" class="btn"><i class="icon-italic"></i></a>
              <a data-wysihtml5-command="underline" title="CTRL+U" class="btn"><i class="icon-underline"></i></a> 
            </div>
            <div class="btn-group">
              <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" class="btn">H1</a>
              <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" class="btn">H2</a>
            </div>
            <div class="btn-group">
             <a data-wysihtml5-command="insertUnorderedList" class="btn"><i class="icon-list-ul"></i></a>
             <a data-wysihtml5-command="insertOrderedList" class="btn"><i class="icon-list-ol"></i></a>
           </div>

           <a data-wysihtml5-command="createLink" class="btn"><i class="icon-link"></i> Link</a>

           <!--<a data-wysihtml5-action="change_view">switch to html view</a>-->
           <br /><br />
           <div data-wysihtml5-dialog="createLink" style="display: none;" class="alert alert-info input-xxlarge">
            <label><strong>Link einfügen:</strong></label>
            <input type="text" data-wysihtml5-dialog-field="href" value="http://" class="span3">

            <a data-wysihtml5-dialog-action="save" class="btn">OK</a> <a data-wysihtml5-dialog-action="cancel" class="btn">Abbrechen</a>
          </div>

        </div>
        <%= f.text_area :description, :id => 'wysihtml5-textarea', :label=>false, :class=>"input-xxlarge", :placeholder => "Beschreibung hier einfügen ..."  %>

        <script>              
          var editor = new wysihtml5.Editor("wysihtml5-textarea", {
            toolbar:      "wysihtml5-toolbar",
            parserRules:  "wysihtml5ParserRules"
          });
        </script>
      </div>

      <%= button_tag(type: 'submit', class: "btn btn-success") do %>
         <i class="icon-ok icon-white"></i> Send          
      <% end %>

<% end %>

Answer 1

是否正确加载编辑器？在验证失败的情况下尝试检查浏览器中的元素是因为你要保存的是纯文本，所以它也会为你显示纯文本。

我看到演示中有一个html视图标签，也许你试试看它是否可以改成html文本。

此外：我个人推荐没有宝石的普通1。 https://github.com/mindmup/bootstrap-wysiwyg

或ckeditor或tinymce：D

wysihtlm5表单提交和验证

1 个答案: