Rich Text Editor in Rails Application


Many times you need normal CMS for your application. You want to need some pages data need to handle through CMS.

It is really very easy to Install any RTE in the Rails. There are many open source RTE available.

I used the Cross-Browser Rich Text Editor for my project.
I downloaded files from there and uploaded to my public folder. I added required CSS and JS file to my layout.

You need to add following lines to your application.html.erb file.(you will find this file in view/layout/ folder)

1. You can add that files on conditional base also. Means for that particular page.
2. Add following lines to your form
:html => { :name => ‘BlogRTE’, :onsubmit => “submitForm();”}

In to add following lines to your form;

<script language=”JavaScript” type=”text/javascript”>
<!–
function submitForm() {
updateRTEs();
return false;
}
initRTE(“/cbrte/images/”, “/cbrte/”, “”, true);
//–>
</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
<script language=”JavaScript” type=”text/javascript”>
<!–
//build new richTextEditor
var rte1 = new richTextEditor(‘text_content’);
rte1.html = ‘Write your thoughts here.’;
rte1.toggleSrc = true;
rte1.width = 500;
rte1.build();
//–>
</script>

You will get the text_content params in Rails.

For Edit page functionality i got error in form. So you need to this default code for all languages.
rte1.html =””;

When i used this i got an error.

But i solved this issue after some R&D and modification in code.

Use following code for Rails(Edit functionality)
rte1.html =”<%=text_content.gsub(/”/, “‘”).gsub(/\n/, ”).gsub(/\r/, ”) %>”;

this will solve your problem.

Full code: (IF YOUR CODE NOT WORKS THAN USE MY FULL CODE)

<script language=”JavaScript” type=”text/javascript”>
<!–
function submitForm() {
updateRTEs();
return false;
}
initRTE(“/cbrte/images/”, “/cbrte/”, “”, true);
//–>
</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
<script language=”JavaScript” type=”text/javascript”>
<!–
//build new richTextEditor
var rte1 = new richTextEditor(‘text_content’);
rte1.html = ‘Write your thoughts here.’;
rte1.toggleSrc = true;
rte1.width = 500;
rte1.build();
//–>
</script>

Advertisements
This entry was posted in PHP and tagged , , , by Purab Kharat. Bookmark the permalink.

About Purab Kharat

I am WordPress and Drupal Architect. I worked on many technologies like Ruby on Rails, Flex, PHP etc... I am Purab Kharat from India, Pune. I love to play chess and listen music and read books. I work in SY Smartsourcing Global Pvt Ltd in Princeton, NJ, USA. Now I am living at Plainsboro, 164 Hampshire Drive, Princeton Meadows, NJ. I have more then Ten years experience in Web Application Development (Specially in Php 5.0, Ruby on Rails, Mysql 5.0, RIA, Wordpress, Drupal, Joomla, Ecommerce)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s