I'm trying to make markdown editor with auto resizable textarea.
I'm using marked library. But when I change value with value={marked(this.props.text)}, it outputs like: <p>Hello</p>
I can't even use dangerouslySetInnerHTML or innerHTML property since textarea doesn't render HTML.
When I use elements such as p, It doesn't look like textarea.
Can someone give me a hint?
I've solved it, see this post
In other to make the element look like textarea, you should translate a carriage return into a br html tag.
In this post:
You could just apply CSS white-space:pre on the element, exactly like the HTML textarea element is internally doing:
<span style="white-space:pre">your text \n will \n be \n on multiple \n lines</span>
Also read this comment - about carriage return
Related
Yes the question sounds weird, but what I wanna achieve is when I am appending using
.html() function I want certain part of it to behave like
.text() function.
For example in this fiddle http://jsfiddle.net/KZBAy/ ` in
$("#htmltest").html("<ul><li>"+**unescape(escape(testvar))**+"</li></ul>");`
I want the +unescape(escape(testvar))+ to behave as text. i.e the html tags in it should be treated as text, it should not be parsed. This is a simple <li> example please provide a generic solution which can be used for all tags like appending into <div> tag <table> tag etc
Are there any tags like CDATA in html which can instruct the browser not to parse the text inside it??
Well after a lot of googling i found that it was <xmp> tag !!
Though its deprecated it has no exact substitute so far !!!
so where ever we want to instruct the browser not to parse we can prefix and suffix with tag
$("#htmltest").html("<ul><li><xmp>"+unescape(escape(testvar))+"</xmp></li></ul>");
http://jsfiddle.net/EgQSj/1/
You can use html() to set the element markup, then find() the container you want to insert text into and invoke text() on it.
In your case, something like:
$("#htmltest").html("<ul><li></li></ul>").find("li").text(testvar);
In my project, I am trying to add HTML tag letter (< and >) dynamically to a contenteditable div. Whenever user is pressing alphanumeric character, I am appending an empty span element which is used for calculating the position of the caret in contenteditable div.
The problem is that when I type some words like following:
when <
and press a alphanumeric character like b (which calls a function to append a span element), The contenteditable div is showing just when instead of when <b.
When I inspected the element I found the contenteditable div has the following content:
when <b<span class="spanPos"></b<span>
^ strange that span is holding '</b' instead of being empty
Here is a example JSFiddle.
I am not sure how this is happening. Please tell me what should I do to evade this issue.
PS: Here I am trying to add < and >, not HTML elements like <b></b>.
As you said, you're trying to add a symbol which can be interpreted as HTML. You need to escape it or use a different way to express it as an ISO entity:
$('#btnContent').click(function(){
$('#content').html("when <b" + "<span class='spanPos'></span>");
});
http://jsfiddle.net/Dekku/jXeVW/1/
I have visit your code and found there is a <b in JS don't know by are you using that.
Use the below code:
$('#btnContent').click(function(){
$('#content').html("when" + "<span class='spanPos'></span>");
});
By removing the <b tag you will not get this. or You should properly close to it to make the code proper.
EDITED:
After visiting your new code I got the solution you should use the following code:
$('#btnContent').click(function(){
$('#content').html("when <b");
$('#content').html($('#content').html() + "<span class='spanPos'></span>");
});
If you need the details then tell me.
The problem was actually that I was appending a span element to the text whenever the user types something in to the contenteditable div to grab the position of the caret. Something like this
Hello I am he|re
^ Caret position
Then I was adding a span element in between of that text using .html() something like this
Hello I am he<span></span>re
Now whenever I add any letter which represents Html like < or >, then it was merging some of the text inside the span (as I shown above in my post).
So, I solved it by removing it just after when I get the position through span element. I followed the below steps to solve this issue for each letter pressed by the user.
//Store the .text() in a variable.
//Replace Html letters inside the contenteditable div with alphabets which has same width. (for exact positioning).
//add span to the modified text through .html()
//get the offset position of the span
//Do something with that offset position
//Remove span
//Replace the .text() inside the contenteditable div with the text which was stored in a variable.
I did these many things to solve this issue because I was using .text() everywhere else in my project code. If I change it to .html() then I must have rewritten the complete code and might also can't complete the project.
Clearly, I couldn't have done the things which were mentioned in the other answered posts. I hope this will help someone.
I am looking for a javascript that can help me to change the color of a text inside the textarea tag. For example, to have a variable in the javascript:
var a = '<div class="carleft"><p class="coto1">';
now, the javascript should make the text that is inside the variable, to be displayed as bold with red color in the textarea.
See this previous question/answer: jQuery wrap selected text in a textarea
Inner HTML of the textarea element you cannot change the styles/colors of the partial words or characters.
You should use or some other element to implement this.
You can consider the
contenteditable="true" attribute for this purpose.
By using this attribute you can dynamically edit any html element. Which was styled before.
A textarea does not support different styles or colors in the text. You can use contenteditable="true", but that will probably give the user more freedom than you want. I think a better option would be to use a library like CodeMirror or MDK-Editor.
I am trying to read text from a textarea in IE8 using some JavaScript, using the prototype library selector - "$F(text-area-id)"
The text I get out of this does not preserve the new lines present in the textarea. Is there any CSS properties I need to set for achieving this?
Thanks!
Without seeing any of your code (ahem), new lines are usually put in "automagically" by the wrapping on the text area. You can override this with white-space style.
Alternatively, you can search your string for the newline character \n which sometimes gets "lost in translation".
I am describing some html elements as value of thickbox and its possible to fetch that elements inside textarea
Sample
<textarea id="txtarea_id"><div class="div_class">country</div></textarea>
I need to fetch the div element inside textarea
<!ELEMENT TEXTAREA - - (#PCDATA) -- multi-line text field -->
— http://www.w3.org/TR/html4/interact/forms.html#h-17.7
A textarea element can contain only PCDATA, no elements of any kind. The code you have presented is invalid HTML.
You could have the value of a textarea be some text that could be presented as HTML:
<textarea id="txtarea_id"><div class="div_class">country</div></textarea>
… but the content can only be text, not elements.
You can fetch the data using jQuery's val() method (or just use the standard DOM .value).
Use jQuery's .val()
alert($('#txtarea_id').val());
If you want to convert that text to an HTML element, use $ and wrap it like this.
$($('#txtarea_id').val());
you can not use HTML tags inside a textarea. It will be encoded and you will see "<div class="div_class">country</div>" as the default text in your textarea.
I am wondering why are you doing this?
You can give a class to the textarea and then define css for that class.