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.
Related
I have a form that users create a profile. In the form there is a textarea in which hey put their blurb / description whatever.
Later when I want to show the profile in a view only screen, what is best practice? To use a <p> tag or an html tag?
It appears I lose the paragraphs etc when I display the data in a <p> tag.
If, the best practice is to maybe use a readonly textarea for view purposes, how can one dynamically adjust the rows depending on the length of text?
Textareas are designed for accepting input from users, not displaying data back to them.
You need to process the submitted data before displaying it on the user profile. Typically this would involve formatting (like splitting the content on double new lines and then wrapping each part of the result with paragraphs) and implementing protection against XSS attacks.
For formatting, you might consider using a Markdown engine (similar to what Stackoverflow does).
Use the <p> tag.
It is ok, but you should modify the contents, before output at least with two functions:
1) htmlentities() - to protect against XSS attacks and print any html symbols as text
2) nl2br() - to add <br/> tags (html new line) next to \n symbols (new line in text format)
You can look at the <pre> tag as well, then you do not need the nl2br() function
I've just learned about math MathJax. I've read some documentation, and it looks nice but If I understood it right it scans html page for equations and automatically replace them with HTML/SVG or whatever.
My concern is that I'm generating my page from raw text (simply strings) in JS and I would like to just simply pass certain parts of it to MathJax and get html string in return. I looked at the API but unless I'm missing something, there is no such option and I can only do things like MathJax.Hub.Process().
So it would look like
I'm creating and adding HTML elements to document based on my text.
I'm telling MathJax to search for the content I've just created.
MathJax is searching for text to parse and removing the content I've just added, striping out text, parsing....
MathJax is creating it's own elements add it to document.
Is there a way (without modifying the source code) to do something like this:
I'm passing text to MathJax, telling it what is the format.
MathJax is returning HTML text string.
I'm creating HTML element besed on that text and inserting it at desired place.
I hope I overlooked something.
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 ;-) )
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);
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');