How do I show formatted text in rails text area?

Question

I'm using rails form. In that form, I've a text_area. I want to show pre-filled data in text area of rails. The data is html content.

I tried following,

<% test_val= "<h1>Test Value</h1>" %>
<%= form.text_area(:myval, :value => test_val.html_safe, size: '30x10', :style => 'border: 10;') %>

myval is my form variable. But instead of printing Test Value in bold and bigger font in text area, t showed <h1>Test Value</h1>. I want the content in HTML tag to be printed with HTML formatting. Is it possible? If yes, how do I achieve it?

p.s. I'm using ruby v1.9.3 & rails 3.1.0

You can't do it inside text_area but you might want to take a look at [contenteditable attribute](http://html5demos.com/contenteditable) — ex0ns, Aug 24 '15 at 07:56
After using that, how will I link the data of the text box with my form variable? — Abhishek, Aug 24 '15 at 08:13
You will not be able to use the default rails helper for that, and probably need a little javascript, see [this post](http://stackoverflow.com/a/11565267/1062711) — ex0ns, Aug 24 '15 at 08:15

Mohammad · Answer 1 · 2015-08-24T08:44:00.440

1

This is not possible in a textarea, this is not related to rails but to Html.

Instead you can use a div and set it with contenteditable =true

example:

<div contentEditable="true">content goes here </div>

If you are using javascript you can store the result in a variable like so:

var myvar = document.getElementById("divid").innerHTML

edited Aug 24 '15 at 08:44

answered Aug 24 '15 at 07:55

Mohammad

3,276
2
19
35

I can't use div, as I've to save the value of text area in form variable, `myval`, on click of submit. If I can use editable div and use same text in my form variable, then I'm good. – Abhishek Aug 24 '15 at 08:12
@Abhishek are you using javascript? If so you can use the .innerHTML method to store the value. – Mohammad Aug 24 '15 at 08:17
Now, how will I assign the javascript variable to my form variable? – Abhishek Aug 24 '15 at 08:51
1

You should have a hidden field for the "real" input, and then before submitting the form, copy (using javascript) the content from the contentEditable div into the hidden input. If you're using jquery you can use the "submit" event. http://stackoverflow.com/questions/21938788/jquery-function-before-form-submission – Max Williams Aug 24 '15 at 08:53

score 1 · Answer 2 · answered Aug 24 '15 at 10:28

1

You may want to use a wysiwyg editor. I suggest you to have a look at

https://github.com/Nerian/bootstrap-wysihtml5-rails

With simple_form you can simple use it as:

<%= f.input :content, as: :wysihtml5 %>

answered Aug 24 '15 at 10:28

fedetaglia

238
3
10

score 0 · Answer 3 · answered Aug 24 '15 at 08:23

As I said previously, you should probably use a contentEditable unfortunately, you won't be able to use the rails existing helper to send the form, and have to use a little Javascript to build the form, I do not find the method really 'clean' but it works:

<html>
    <head></head>
    <body>
        <form id="my_form" action="#" method="POST">
            <div id="editable_div" contenteditable>
                <h1>Editable HTML Content</h1>
            </div>
            <input type="submit" />
        </form>
    </body>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        var form = $("#my_form");
        form.submit(function() {
            console.log('submitted');
            form.append($('<input/>', {
                type: 'hidden',
                name: 'html_content',
                value: $("#editable_div").html()
            }));
        });
    </script>
</html>

You should be able to adapt this code to your rails one quite easily.

How will I assign the value to my form variable? I was using rails form because on submit I needn't create object by myself. Can it be done here as well? — Abhishek, Aug 24 '15 at 08:26

How do I show formatted text in rails text area?

3 Answers3

Linked