Adding a Rich Text Editor to your Rails Application
2008-01-26 14:33
651 查看
Adding a Rich Text Editor to your Rails Application
Posted April 23, 2006Adding a rich text editor to your application enables users to markup their input text without having to know a markup syntax such as markdown or html. This page describes how to easily add this functionality to your rails application.
There are several free javascript rich text editors that can be incorporated into your application. These work by providing a javascript WYSIWYG interface that allows the user to generate the required html for each element that is enabled in the interface. So for example, if the user selects “XYZ” and presses the bold button, this generates the text
<b>XYZ</b>which is saved to the database.
Since using these editors allows users to create html that will be input into the database, make sure that you sanitize the html when you are rendering it back from the database. You can use rails’ sanitize method or since you probably want to allow several tags you could use this Ruby sanitize function with the okTags parameter set to whatever set of tags you want to allow. Alternatively check out the whitelist recipe in the rails recipes book.
widgEditor
widgEditor is a small simple lightweight editor. It provided basic rich functions such as bold, italics, links, lists, images and headings. Its very easy to get setup with your rails application.Download widgEditor
Extract the files
Copy the widgEditor.js file into your applications public/javascripts folder (you can configure it by changing this file)
Copy the widgEditor.css file into your applications public/stylesheets folder.
Copy all the images from the widgEditor distribution to your public/images folder.
Include the javascript and css files in your layout file.
Give any text field you want to be an editor field a class of “widgEditor”.
Here is an example of what you might have in your view file:
<%= stylesheet_link_tag 'widgEditor' %> <%= javascript_include_tag "widgEditor" %> <%= text_area 'node', 'content', :cols => "50", :rows=>"3", :class=>"widgEditor" %>
TinyMCE
TinyMCE is a much more full featured rich text exitor. Check out the demo to see all the features that can be enabled for it. It is easy to incorporate TinyMCE into your rails application.Download TinyMCE and place the tiny_mce directory in your applications public/javascripts directory.
Include tinymce/tinymce and
Call tinyMCE.init with the options that you want enabled. This call controls which of the available TinyMCE elements are enabled. See the TinyMCE documentation or look at the examples in the distribution for a list of all the options.
All your text area fields will now be TinyMCE editor instances. Below is an example of what you might have in your layout file. It only enables a small subset of the available TinyMCE widgets.
<%= javascript_include_tag 'tiny_mce/tiny_mce' %> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", convert_urls : false, plugins : "emotions,preview", theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough, bullist,numlist,link", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src| border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" }); </script>
In your view create a text area.
<p><label for="blog_content">Content</label><br/> <%= text_area 'blog', 'content', :cols => "50" %></p>
TinyMCE includes quite a lot of javascript files. It is a good idea to include these files only on pages that actually use the rich text editor. This will save on bandwidth and make for quicker page loads for the pages that aren’t using the rich text editor. You could do this by having a separate layout for the part of the application that uses the TinyMCE or by adding a condition in your layout file that checks the controller name before deciding to load it.
Also worth investigating
Another option worth investigating is FCKEditor. I haven’t tried this but it looks a bit more complicated that those discussed above.Update (05/06/06)
You can now integrate TinyMCE using the TinyMCE plugin created by Blake Watters. See John Wulff’s tutorial for more details.Bookmark/Search this post with:
Delicious
Digg
»
Printer friendly version
|
rails
Thank you for providing this excellent review and usage of WYSIWYG editors and showing how easy it is to add them to you rails app.
Submitted by Skiz on Sat, 2006-05-13 23:53.
»
Excellent article! I'll definitely be coming back to this when I start the admin section of my blog.
Submitted by carlos on Tue, 2006-06-06 06:26.
»
For "widgEditor", I do think it's a very good rich text editor, while I want know how to setup a db column to handle the rich text field. Appreciate your advise. Thank you
Submitted by Terry on Tue, 2006-06-06 09:58.
»
Terry,
Anything that accepts text input would work. CHAR, VARCHAR, TEXT. Having said that, if used for anything large, you'll want this to be of type TEXT since I believe that VARCHAR tops out at 8000 characters.
Submitted by Carlos on Tue, 2006-06-20 06:24.
»
There seems to be two potential pitfalls using widgEditor.
The latest version on date of writing requires that you need to have an "id" attribute also on each textbox you use it on (unlike your example).
Also, if you have an "onload" attribute on your "body" element, the editor seems to refuse to start.
But otherwise, great article! Thank you! :)
Submitted by Charl van Niekerk on Fri, 2006-12-08 16:37.
»
Implemeting FCKEditor in RoR applications is realy simple.
Put
<%= javascript_include_tag "fckeditor" %>
in header of .rhtml file where is textarea.
then put this:
window.onload = function(){
var oFCKeditor = new FCKeditor( 'fck' ) ;
oFCKeditor.ReplaceTextarea() ;
}
and finnaly texarea:
<%= text_area 'article', 'text', :id => 'fck' %>
Submitted by sloser on Sat, 2006-12-09 14:08.
»
In the case of widgEditor you have to add a method in helper that is:-
def widgEditor_text_field(object, method, options = {}) text_area(object, method, options ) + javascript_tag( "var widgeditor = new widgEditor('" + object + "_" + method + "');widgeditor.replacedTextareaID()" ) end
Submitted by Nishant Sinha on Fri, 2006-12-15 11:12.
»
相关文章推荐
- 5 Tips to Scale Your Ruby on Rails Application
- Adding a Google AdMob(6.2.1) to Your Application
- Adding XP Visual Styles to Your Visual Basic Application
- CHtmlEditCtrl (2): Add a Source Text Editor to Your HTML Editor
- Adding vertical guides to the Visual Studio text editor
- Adding Open Source 3D Physics to Your iOS Applications (3)Using Bullet in Your iOS Application
- 如何在win32控制台加入MFC对话框(Adding Windows To Your Console Application)
- NicEdit - WYSIWYG Content Editor, Inline Rich Text Application
- In-App Purchase--Adding a Store to Your Application[5]
- 11 Things to Consider Before Deploying Your Rails Application
- Adding Windows To Your Console Application
- How To Use MySQL with Your Ruby on Rails Application on Ubuntu 14.04
- Adding XP Visual Styles to Your Visual Basic Application
- ProgrammingError: You must not use 8-bit bytestrings unless you use a text_factory that can interpret 8-bit bytestrings (like text_factory = str). It is highly recommended that you instead just switch your application to Unicode strings
- How to debug your application (http protocol) using Fiddler
- [Eclipse]How to export eclipse rich client application?
- You may need to configure your browser or application to trust the Charles Root Certificate.
- Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package.
- How To Show Line Numbers In vi / vim Text Editor
- Window7—64位:Ruby on Rails - “Add 'gem sqlite3'' to your Gemfile”