Question

我的目标是在文本区域上方设置用户界面文本编辑器。我从Stack Overflow中汲取灵感，他也使用了这种技术。

我刚为Rails安装了TinyMCE gem。

根据TinyMCE文档，我创建了一个config / tinymce.yml文件

toolbar:
  - styleselect | bold italic | link image | undo redo
  - table | fullscreen
plugins:
  - table
  - fullscreen

在application.js中，我添加了这一行

//= require tinymce

这是困扰我的部分。我设置了这样的代码

<p>
  <%= f.label :body, class: 'marker' %>
  <%= f.text_area :body, :class => "tinymce", :rows => "15" %>
  <%= tinymce %>
</p>

根据文档，我应该这样做

<%= f.text_area :content, :class => "tinymce", :rows => 40, :cols => 120 %>

然后调用tinymce帮助器来初始化TinyMCE：

<%= tinymce %>

我认为他们的意思是我应该在 f.text_area 行下面放置一行。

我认为在Stack Overflow上问这个问题会更有礼貌，而不是用问题轰炸他们。

修改

看起来我设法让它自己工作，但我有另一个问题。文本区域框现在占据页面的整个宽度，而我指定我的文本区域元素的宽度为500px。

我认为问题在于CSS，所以我要看看能不能解决这个问题

Answer 1

是的，TinyMCE是要走的路。

有一个易于使用的宝石

gem 'tinymce-rails'

他们对如何在github页面上使用和安装有很好的指导 https://github.com/spohlenz/tinymce-rails

Answer 2

可以在tinymce.yml文件中为tinymce-rails指定tinymce编辑框的高度和宽度，如下所示：

width: 600
height: 200
toolbar:
  - styleselect | bold italic | undo redo | alignleft aligncenter alignright
plugins:
  - image
  - link