jQuery: Inserting formatted text into a textarea - javascript

I have a drop-down list which causes a text-area to populate with different text depending on what's selected. I have this part working fine, but I'm not able to format the text to show paragraphs. using regular html, just causes it to be printed out.
Does any one know can I create paragraphs, etc?
Thanks Guys!!

You'll need to use some sort of rich text editor, like CKEditor, or, use newlines \n. The <p> will be interpreted literally in a textarea.

<p> is an HTML tag. <textarea> doesn't recognize HTML tags, unless you're using some kind of rich-text editor.
That said, you can create line breaks in your <textarea> using \n like this:
$('#my-text-area').text('foo\nbar');

Related

Preserving Formatting from HTML to textarea

I use markdown for text editing within my project. The markdown is converted to HTML and stored in the database for rendering in the view.
Currently, when users would like to edit a post, for example, the stored text is pulled from the database and used as the initial value in the textarea that my markdown editor/converter makes use of.
It's easy enough to strip the tags from the text so they don't show up in the textarea, but I'd really like to preserve things like line breaks as well.
This seems possible, as Stackoverflow uses markdown and during editing line breaks from the text being edited are preserved in the textarea.
The markdown is converted to HTML and stored in the database for rendering in the view.
This is your problem.
You should store the markdown and then use that in your textarea.

javascript - how to show multiple textarea in code editor (one of my attempt is to use CKEditor)

I am using jquery and CKEditor on the project. I want users can write/edit their html codes in CKEditor.
When I input multiple textarea tag in the editor, they look fine because they both stay inside of the textarea as follows,
Then I save it, and I confirmed it is saved correctly because I checked the source code in the file.
However, if I open the file in CKEditor again, it is not being shown properly as follows,
The following is the sample codes I used. It is not the completed codes though.
<textarea id="eidtArea" name="editScriptContent"><!--Load the saved file here (I will skip this part here)--></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'eidtArea');
</script>
My questions are :
Do I miss setting anything in this plugin or is there workaround I
can do ?
In fact, I do not really need to use this plugin. I can simply use textarea for users to edit codes. Basically the main reason I want to
use this plugin is because I want users can create textarea tag in
the editor. However, if I simply use textarea tag as the editor, they cannot add any other textarea tag inside this editor. If there is any workaround for this approach? If so, then I do really need to use CKEditor in this case.
You must encode HTML before printing it out in <textarea>. Otherwise your backend produces this:
<textarea id="editor">
<p>Some text: <textarea>foo</textarea></p>
<p>Some text: <textarea>bar</textarea></p>
</textarea>
Which will be parsed by browser as:
<textarea id="editor">
<p>Some text: <textarea>foo
</textarea>
// And here the rest of the content of the editor,
// but outside the editor's textarea
Therefore, you need to at least replace all < characters with <. E.g. if you use PHP you should pass the content through the htmlspecialchars() function.

html markup in form field does not work

I am creating a site that a user can login and write or paste a text in a form field like so
<textarea name="descr" id="descr" class="textformfront" rows="24" cols="50" required onFocus="cleari();"></textarea>
The text is saved in a DB (postgreSQL 9.1-extended with PostGIS 2.0). The data type of the column in the DB is "text". Then the text is displayed in the front-end, in a div like so
<div id="formdescr" style="overflow-y:auto; height:400px; width:100%;"></div>
My problem is that if the user insert a long text in the form, with paragraphs and breaks, in the div none of those is displayed. In the div all I see is a continuous text with no breaks, no paragraphs.
How do I fix this?
Thanks.
UPDATE
I use nodejs 0.10.12 / websockets to transfer from DB to browser and from browser to DB. I put text in the div like document.getElementById("formdescr").innerHTML=descr; where descr came from websockets in the client. In the source code I see no text. The user has to search first and then the div will get text.
Your problem is that browsers ignore white space in content. Multiple spaces and new lines are all collapsed down into one space in the rendered output.
If you want to preserve all of the original formatting, with indents and line breaks, you could output the text into a <pre> block inside that div.
Your other option is to encode the white space into html entities. Use <br> for line breaks and for spaces that should be preserved.
Your solution very likely depends on the backend programming language you use, not the database. I guess this should answer your question if you use php (and if not, you should be able to do the transfer ;-) )

Detect if an HTML table has been pasted into a textarea

I was wondering if there was a way to detect (or at least make a good assumption) whether text pasted into a textarea includes content copied from an HTML table?
I'm finding users of my website are pasting tabular data (from other websites) into their comments and I'm wanting to clean up the way my website displays those comments.
I'm using PHP, but I'm not too fussed if there's a way to do this with Javascript.
And bonus points if your suggestion can keep the table formatting :)
A pure textarea can't receive formatted content. If your users copy a table, div, or whatever HTML structure from other sites and paste into a textarea, you'll have access only to the pure visible text of the copied content, not the HTML code. Using a textarea, the only way to paste HTML code is if your user copy the code directly =).
An alternative is to use a WYSIWYG like Redactor or CKeditor, it can retain rich text and you'll be able to get the HTML that your users paste there.
Or you can simplify and use the attribute contenteditable with other tag (like a div) and test if there's a table using a Regex, this way:
<div id="yourDiv" contenteditable>Paste a table here!!</div>
var yourHTML = document.getElementById("yourDiv").innerHTML;
var thereIsATableHere = /<table[^>]*>(.*?)<\/table>/.test(yourHTML);

How do Rich Text Editors in HTML documents achieve their rich text formatting?

Could you please explain how the text in the textarea gets styled in rich-text editors? I've tried to style text in the form but it doesn't change.
Is it JS that recognizes characters typed by the user? How's that done?
Edit:
After a bit of research (Google rules!), I've found some excellent information. For others who might be interested, these links were very helpful to me:
http://www.webreference.com/programming/javascript/gr/column11/
http://www.webreference.com/programming/javascript/gr/column12/
I think the answer is that what you're looking at is typically NOT an actual <textarea>. It's a <div> or <span> made to look like a text area. A regular HTML textarea doesn't have individual formatting of the text.
"Rich-Text editors" will have controls that modify the contents of the span/div with regular html markup (<strong>, <em>, etc.) to emulate a full-blown rich text editor
Usually, the rich text editor will provide a variable to specify a style sheet in. That style sheet will then be loaded and applied to the textarea (Most, if not all, rich text editors use a IFRAME to display the editor in, and obviously styles specified in the main document won't apply to it.)
It's a textarea when you send the HTML to the user but the editor replaced it with a div when it can start.
This way, the code gracefully degrades: Users with unsupported web browsers or disabled JavaScript can still edit the text in the textarea while all the other users get a nice rich text editor.
Basically, the TEXTAREA contents are used as the HTML source for the IFRAME.

Categories