使用 Redactor 作为 WYSIWYG 编辑器和 Ruby on Rails答案

【问题标题】：Using Redactor as a WSIWYG editor with Ruby on Rails使用 Redactor 作为 WYSIWYG 编辑器和 Ruby on Rails
【发布时间】：2013-07-30 11:13:52
【问题描述】：

我正在尝试在表单中添加一些简单的所见即所得字段。最初编辑器工作得很好，但在某个地方我丢失了工具栏。我认为原始代码不知何故被团队中的其他成员覆盖，但我不知道，而且我对 Git 不太满意，无法回去检查。

这是在edit_content.html.erb中

<div id="edit_form">

     <fieldset>
         <span><legend><%= @category.title.capitalize %> Content</legend></span>
             <div class="field">
                 <%= f.label :statement %> <br />
                 <%= f.text_area :statement, rows: 10, cols: 80, :class=>'redactor_text' %>
             </div>

             <div class="field">
                  <%= f.label :quote %> <br />
                  <%= f.text_area :quote, row: 10, cols: 80, :class=>'redactor_text' %>
             </div>

    </fieldset>
</div>

这是在 assets\javascripts\redactor-rails\config.js 中

 $('.redactor').redactor(
   { "imageUpload":"/redactor_rails/pictures?" + params,
     "imageGetJson":"/redactor_rails/pictures",
     "fileUpload":"/redactor_rails/documents?" + params,
     "fileGetJson":"/redactor_rails/documents",
     "path":"/assets/redactor-rails",
     "css":"style.css"
  });
$('.redactor_text').redactor(
  { buttons: ["html", "|", "formatting", "|", "bold", "italic", "underline", "deleted", "|",
   "unorderedlist", "orderedlist", "outdent", "indent", "|", "image", "video", "file", "link", "table", "|",
   "fontcolor", "backcolor", "|", "alignment", "|", "horizontalrule"]
});

我最初选择 redactor 是因为我听说它可以与回形针一起使用，并且我想稍后使用该功能，因此非常感谢您对此事的任何帮助！

【问题讨论】：

@Nich 我添加了函数 .redactor_text

标签： ruby-on-rails redactor

【解决方案1】：

也许你可以这样做？

var buttons = ["html", "|", "formatting", "|", "bold", "italic", "underline", "deleted", "|",
   "unorderedlist", "orderedlist", "outdent", "indent", "|", "image", "video", "file", "link", "table", "|",
   "fontcolor", "backcolor", "|", "alignment", "|", "horizontalrule"];

 $('.redactor').redactor(
   { "imageUpload":"/redactor_rails/pictures?" + params,
     "imageGetJson":"/redactor_rails/pictures",
     "fileUpload":"/redactor_rails/documents?" + params,
     "fileGetJson":"/redactor_rails/documents",
     "path":"/assets/redactor-rails",
     "css":"style.css",
     "buttons": buttons

  });

你觉得怎么样？

【讨论】：

【解决方案2】：

如果您希望编辑器正确显示，您的课程应该是编辑器，而不是编辑器文本。

... :class=>' redactor redactor_text' %>

我目前正在努力使用自定义按钮自定义工具栏。但我希望我的回答有助于让工具栏再次显示。

【讨论】：