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>

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, Python, PHP, DevOps and Opensource Frameworks. Purab's Github Repo Youtube Chanel Video Tutorials Connect to on LinkedIn

Leave a Reply

Your email address will not be published.