Rails - 为 Redactor 文本编辑器调整 f.text_area 的大小和自动换行答案

【问题标题】：Rails - Resizing f.text_area and word wrap for Redactor Text EditorRails - 为 Redactor 文本编辑器调整 f.text_area 的大小和自动换行
【发布时间】：2013-05-11 14:47:57
【问题描述】：

对于我的应用程序，我使用的是 Redactor Rails。使用form_for，我当前使用redactor的输入如下：

<%= f.text_area :content, label: "Blog Updates", :class => "redactor", :cols => 100, :rows => 100 %>

无论我在 :cols 或 :rows 中做什么，都不会改变宽度和列（即 :input_html、:cols =>'x' 等）。我还看到了以下帖子中的回复：Rails text_area size。

问题一：如何更改文本区域的高度和宽度？是否可以限制它，使其仅在内容超过初始框大小时向下滚动，而不是让框展开？

另外，如果我要连续输入一个长句子，那么该框现在会扩展到屏幕右侧，直到我按enter 转到下一行。

问题 2：我可以在文本编辑器中对内容进行自动换行，以便在一行太长的情况下固定宽度并继续到下一行？

谢谢。

【问题讨论】：

标签： ruby-on-rails rich-text-editor redactor

【解决方案1】：

我认为 :cols 和 :rows 不会以任何方式影响 Redactor 框，这很可悲（或者我做错了什么）。要更改高度，您可以使用添加 <div> 并在 .css 文件中定义 div（请注意，您必须使用“redactor_box”）。这对我有用：

这是我的edit.html.erb：

<div class="redactor_box">
    <%= f.text_area :content, placeholder: "Blog entry goes here...", :class => "redactor"%>
</div>

这是我的custom.css.scss：

.redactor_box {
    width: 600px;
}

您也可以更改框的某些行为。在终端中，运行：

rails generate redactor:config

这将创建一个名为app\assets\redactor-rails\config.js 的配置文件。现在访问 Redactor 的网站并查找文档。您可以将键：值对插入到app\assets\redactor-rails\config.js 文件中。

这是文件刚生成时的样子：

$(document).ready(
  function(){
  var csrf_token = $('meta[name=csrf-token]').attr('content');
  var csrf_param = $('meta[name=csrf-param]').attr('content');
  var params;
  if (csrf_param !== undefined && csrf_token !== undefined) {
    params = csrf_param + "=" + encodeURIComponent(csrf_token);
  }
  $('.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"
    }
  );
})

现在，只需在 "css":"style.css" 之后添加键：值对。例如，下面的代码将禁止框展开。

$(document).ready(
  function(){
  var csrf_token = $('meta[name=csrf-token]').attr('content');
  var csrf_param = $('meta[name=csrf-param]').attr('content');
  var params;
  if (csrf_param !== undefined && csrf_token !== undefined) {
    params = csrf_param + "=" + encodeURIComponent(csrf_token);
  }
  $('.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",
      "autoresize":"false"
    }
  );
});

您可以更改许多其他设置。只需转到 Redactor 网站上的文档部分。

【讨论】：

【解决方案2】：

试试这个：

在app/assets/javascripts/redactor-rails/config.js 创建一个config.js 文件

把你的代码改成：

$(document).ready(
  function(){
  var csrf_token = $('meta[name=csrf-token]').attr('content');
  var csrf_param = $('meta[name=csrf-param]').attr('content');
  var params;
  if (csrf_param !== undefined && csrf_token !== undefined) {
    params = csrf_param + "=" + encodeURIComponent(csrf_token);
  }
  $('.redactor').redactor(
    { "imageUpload":"/redactor_rails/pictures?" + params,
      "imageGetJson":"/redactor_rails/pictures",
      "fileUpload":"/redactor_rails/documents?" + params,
      "fileGetJson":"/redactor_rails/documents",
      "path":"/assets/redactor-rails",
       "minHeight" : 200, ### => Add this line!! ( The 200 is in pixels )
      "css":"style.css"}
  );
});

重启你的服务器。

【讨论】：