Question

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

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

无论我做什么：cols或：rows，都没有改变宽度和列（即：input_html，：cols =＆gt;'x'等）。我还在帖子中看到了回复：Rails text_area size。

问题1：如何更改文本区域的高度和宽度？是否可以限制它，以便当内容多于初始框大小而不是展开框时，它只会向下滚动？

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

问题2：我可以自动换行文本编辑器中的内容，以便宽度固定，如果一行太长，文本会继续到下一行吗？

感谢。

Answer 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的网站并查找文档。您可以将key：value对插入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网站上的文档部分。

Answer 2

试试这个：

在config.js

创建app/assets/javascripts/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",
       "minHeight" : 200, ### => Add this line!! ( The 200 is in pixels )
      "css":"style.css"}
  );
});

重新启动服务器。

Rails - 为Redactor Text Editor调整f.text_area和自动换行的大小

2 个答案: