• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 624
  • Last Modified:

Trying to implement TinyMCE Editor on Ruby on Rails

Hai,

I am doing a Ruby on Rails application wherein I need to have a Rich Text Editor. I tried setting up TinyMCE Editor following step-by-step instructions I found on this link.

http://www.ricroberts.com/articles/2008/06/16/tinymce-wysiwyg-text-editor-on-rails

It does not throw any errors, but does not render the editor as well. I added the code in which I am trying to put the text editor below. All the rest of the pieces are in their corresponding folders as explained in the link above. I need this editor, so is there any other way I can do this.

PS: I AM A JAVASCRIPT/HTML/CSS/JAVA GUY. Absolutely new to RoR. This is my first.
<head>
  <!-- ... -->
  <%= javascript_include_tag "prototype" %>
  <%= yield :tinymce %>
  <%= javascript_include_tag "scriptaculous" %> 
  <%= javascript_include_tag "effects" %> 
  <%= javascript_include_tag "controls" %>
  <%= yield :tinymce_init %> 
  <!-- ... -->
</head>
 
<div align="center" style="width: 900px">
<h1>Post New Message</h1>
<% form_tag :action => 'create'  do %>
<p style="margin-left:-10px;"><label for="from">From</label>:
<%= text_field 'message', 'from' %></p>
<p style="margin-left:5px;"><label for="message_to">To</label>:
 
<%= text_field 'message', 'to' %></p>
<p style="margin-left:175px;"><label for="message_description" style="vertical-align:top;">Description:</label>
<% use_tinymce -%>
 
<%= text_area 'message', 'description', :cols => 50, :rows => 6, :class => "mce-editor"%></p>
<%= submit_tag "Post" %>
<% end  %>
<%= link_to 'Back', {:action => 'home'} %>

Open in new window

0
sreekanthvasireddy
Asked:
sreekanthvasireddy
  • 3
  • 3
1 Solution
 
cminearCommented:
I have not personally worked with TinyMCE, but I think I see the problem.

According to the directions, you need to place the "<head> ... </head>" information into app/views/layouts/application.rhtml.  However, the rest of the RHTML ("<div ...>" to end of code snippet) needs to go into the correct controller/action template file.

For example, let's say you are working with the BogusController, and you've added the 'myedit' action to that controller.  Then you would want the template file 'myedit.rhtml' to appear in the directory app/views/bogus.

When you point your browser at "http://your.server/bogus/myedit", Rails runs the 'def myedit' code in BogusController, and at the end of that code will then render the HTML using app/views/bogus/myedit.rhtml, (with app/views/layouts/application.rhtml surrounding that).

Just to be clear, the app/views/layouts/application.rhtml needs to have all the things an HTML file typically has: HTML start and end tags; HEAD start and end; BODY start and end.  I've attached what a typical initial 'application.rhtml' file looks like, in totality.  I believe the TinyMCE directions are to add the extra lines within this existing HEAD section.

I'm typing fast, so hopefully this makes some sense.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title><%= controller_class_name %>: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
</head>
<body>
 
<p style="color: green"><%%= flash[:notice] %></p>
 
<%= yield %>
 
</body>
</html>
 

Open in new window

0
 
cminearCommented:
In fact, I should have just given the example 'application.rhtml' with the lines already added.  Here you go.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title><%= controller_class_name %>: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
 
  <%= javascript_include_tag "prototype" %>
  <%= yield :tinymce %>
  <%= javascript_include_tag "scriptaculous" %> 
  <%= javascript_include_tag "effects" %> 
  <%= javascript_include_tag "controls" %>
  <%= yield :tinymce_init %>
</head>
<body>
 
<p style="color: green"><%%= flash[:notice] %></p>
 
<%= yield %>
 
</body>
</html>

Open in new window

0
 
sreekanthvasireddyAuthor Commented:
Hai cminear,

Thanks for you reply. As I stated earlier i am an absolute newbie to RoR. So please bear with me if I ask anything dumb.

Previously, before I read your post, I did not have a application.rhtml in the app/views/layouts/application.rhtml. So now I copied the code you gave me and added a application.rhtml. But It still did not work. I tried the view source for this and found the js files, correctly added.

http://219.91.165.21:3000/main/home

The above is a link to my app. In case you would want to have a look.

Thank you for your interest.







0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
cminearCommented:
It is clear from the source on the pages you supplied that no layout file exists and is being used.

First, try renaming 'application.rhtml', in the app/views/layouts directory, to 'application.html.erb'.  I don't immediately see how this would change the behavior, as the 'rhtml' extension is still supposed to work, but it's worth a try.

Second: from the page that you pointed me at, it would appear that the controller you are working with is 'MainController'.  If so, copy 'application.html.erb' to 'main.html.erb', so they are both in the 'app/views/layouts' directory, or use the one I attached below (drop the 'txt' extension).  (If your controller is named something else, then use that name in the filename.  Also, I have not dealt with any TinyMCE in the file below; I'm just looking to get HTML and BODY tags into the page source supplied by your application.)  If this works, then for every action in the MainController, you will have a layout, but once you add a new controller, you will lose the use of the layout.  (Hence why the 'application.html.erb' is used.)

Another comment/question: from what class does MainController inherit?  The 'class' definition line of the MainController should look like this:
   class MainController < ApplicationController

If you are inheriting directly from 'ActionController::Base', that would be why it is not picking up the 'application.rhtml' file.

Finally, if none of these suggestions work, I would suggest you 'cd' to the directory above your application directory, and start a new project.  Do 'rails proj_name'; cd into 'proj_name' and then do 'ruby script/generate controller main home message'.  Compare the files created by the generate script with what you have; see if there are any major differences.

If none of this works, include your controller and view files (app/controllers/main_controller.rb and app/views/main/*).
main.html.erb.txt
0
 
sreekanthvasireddyAuthor Commented:
@cminear. I love you. :)

It worked. Thank you so very much for your help. I put application.html.erb in the layout folder and it worked. Thanks again for your time.
0
 
sreekanthvasireddyAuthor Commented:
Thnx
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now