how to implement editing/formating text area in rails - ruby-on-rails

i want to implement text box(text area) as shown in picture .I know the simple textarea but dont know this type of text area which gives formatting ,numbering facility,Since iam new to rails plz help me

This is not something that Rails provides, but there are many javascript wysiwyg plugins that solve this problem. This has worked well for me before: https://github.com/spohlenz/tinymce-rails

Related

Making a basic SO-like WYSIWYG editor in Rails

I am relatively new to Rails, having recently completed Hartl's Rails Tutorial, and am now embarking on my first full fledged project. What I am interested in adding to my web app is something similar to the text input feature in SO, where you could type, and see directly how your text will turn out. After some digging around on SO, I have decided on using the gem bluecloth, which is Markdown implemented in Ruby, but now have the following questions:
I am unsure about how to tie what bluecloth outputs to the form_for helper. My understanding was that you could convert to strings via the function html = BlueCloth.new(str).to_html(), but I am unsure what to do when you have a text field as part of form_for, where I should plug in the bluecloth part? In other words, I am still a bit confused about the magic of typing in one box and seeing the item show elsewhere on the page.
Are the WMD bar button items and functions included Markdown editors (such as bluecloth), or would this be something I have to build manually? If so, how would I get something like the bold button to show "** **" in the editor as you type?
Thanks for your help!
As comments have noted, Markdown is a markup language like HTML, so its not easy to do WYSIWYG.
There are probably two approaches to getting this kind of functionality.
Server side
Post your markdown text to a server and get the server to return HTML. I've done this a lot in Python, but for Ruby this SO answer suggests maruku. The disadvantage of this approach is that it requires a server request every time you want to view the preview, and then some way to integrate that back into your UI without disrupting the user. Stackoverflow uses this approach with the WMD editor and some C# on the server.
Client side
Another option is to use a client side library to take your markdown "code" and generate html which you can then integrate into your page using javascript. An example of this is dillinger. This uses a textarea and something like showdown to render the HTML in the browser. I'm taking this approach one step further in a WYSIWYG Markdown editor I'm developing called demarcate.js
Or... ditch Markdown
The comments have already suggested alternative WYSIWYG editors... most of these are not markdown editors but rich text editors which produce HTML at the end. TinyMCE and wysihtml5 are good options and I've also used CKeditor before with some success - it has a cool "in-place" feature in the latest version which inspired my Markdown editor above.

Rails: How to change CSS/HTML view code on the fly like with jsfiddle?

Is there a way to edit your views and CSS and see the results on the fly like with a jsfiddle program? I can't seem to use jsfiddle when programming with Rails because so many of my views are Rails code.
Try the Webkit web inspector, or Firebug in Firefox. You can select any element, edit attributes, modify the css, and change the text on the page.
If you have your web running on a server (localhost works too) you can try WebPutty from Fog Creek guys to change your CSS and see the results on the fly. It's free for now.
You can read how to import your site here

Rich text editor for rails application

I need to add a rich text editor to my website. This my first time doing this, so which rich text editor do you suggest I use? I need one that is fully functional and easy to integrate with a rails application, also I am using prototype.
Thanks in advance :)
A very promising one is the Aloha Editor
You can add an editor like TinyMCE as the posters above have recommended. However IMHO the HTML generated by these editors tends to get messy. I would suggest you look at something like Redcloth. With a text field. And for added bling you could give a ajaxy preview, just like stackoverflow does!. This would be a much more cleaner solution IMHO.
If you are going to use a WYSIWYG editor, take a look at CKeditor and also the Yahoo YUI2 Rich Text Editor.
As for TinyMCE there is a Rails plugin that would make things easier if you decide to use it.
I would suggest TinyMCE which is really easy to implement. You just add an id for the textarea you want to use and then use that id in the configuration of TinyMCE. You could even configure TinyMCE to put a RTE on ALL textareas.
It's written in javascript so it doesn't matter what backend you use.
http://tinymce.moxiecode.com/
And here's an example with source:
http://tinymce.moxiecode.com/tryit/full.php
Aloha looks nice and has some very nice features, but I've run into some annoying bugs. You may want to take a look at Mercury.

Adding an RTE to salesforce text areas

Does anyone know if there's a way to add an RTE to textarea fields within salesforce? I'm fairly new to the platform but i haven't been able to find any useful documentation on this.
In addition to the component, there's also an example of integrating the open source FckEditor component into Visualforce here:
http://blog.sforce.com/sforce/2009/05/a-rich-editor-component-for-visualforce.html
If you're using VisualForce, you can use the inputTextArea tag to edit/save rich text. Set the "richText" attribute to true.

popup WYSIWYG editor ROR

Hi I have to have a popup WYSIWYG editor into my ROR application. I want to develop the editor like www.wikispaces.com used. Here they used Jquery (if you want like that editor , you need to login ) . I want the same functionality . Can anyone please suggest how can i do this and please give me the reference site for the development JQuery with WYSIWYG.
Well, a quick google search turns up jwysiwyg: http://code.google.com/p/jwysiwyg/
And there seem to be some articles on how it's used.
I've always used TinyMCE, it works very well.

Resources