how can I do this? is there a gem for this? if, say I copy and paste formatted text from word into my rails app it doesn't keep the formatting, like line breaks bullet points etc, so I'm wondering how can i achieve this? thanks.
3 Answers
You need simple format
Returns text transformed into HTML using simple formatting rules
Some example
my_text = "Here is some basic text...\n...with a line break."
simple_format(my_text)
# => "<p>Here is some basic text...\n<br />...with a line break.</p>"
3 Comments
user2472480
would this work for users? if they copy and paste text into my form? because they would not use \n
Roman Kiselenko
\n it is just new line character
BroiSatse
If I understand correctly, he doesn't want to display waht user insert in formatted way - he wants user to copy text from word document and paste it to text area together with formatting (before the form is even submitted)
Have a look at CKEditor - it is an open source HTML text editor.
4 Comments
user2472480
hey thanks! this works great, how ever after saving i see the html, show up in my view instead of the edits, how do i make the html render?
BroiSatse
Instead of having
<%= @model.value %> use `<%= @model.value.html_safe %>. However check first whether user input is nicely escaped, so it won;t open a gate for html injection atacksuser2472480
is there a difference between this and doing <% raw model.value %>?
BroiSatse
If you llok at raw source code it reads:
def raw(stringish) stringish.to_s.html_safe end, so I would go with no. :)I think you probably need to use a DIV/SPAN with contenteditable.
<div contenteditable="true"></div>
note that you can not submit the content directly for a div, so you can listen for keyboard events keyup keypress click or just on form submit, and copy the HTML to the form element.
<script type="text/javascript">
window.onload = function () {
var myForm = document.getElementById('my-form');
myForm.onsubmit = function(e){
var myFormattedText = document.getElementById("my-formatted-text");
var htmlData = myFormattedText.innerHTML;
document.getElementById("my-html").value = htmlData;
}
}
// or with jQuery
/**
$(function(){
$('form#my-form').bind('submit', function(){
var htmlData = $("div#my-formatted-text", this).html();
$('input#my-html', this).val(htmlData);
});
});
**/
</script>
<form action="" id='my-form'>
<input type="hidden" name='my-html' id='my-html'>
<div contenteditable='true' id='my-formatted-text'></div>
<input type="submit">
</form>
