I am looking for some textarea that help me to translate text to HTML. Like what stackoverflow input area does.
For example
**bold** is translated to <span><b>bold</b></span>
I am not sure what this is called. Thanks!
Stackoverflow is actually using WMD editor. Please refer to https://github.com/derobins/wmd
Related
I have a sms editor created with textarea, where you can add text and pre defined custom tag like %%voucher?id=1%%.
<textarea dir="ltr">%%voucher?id=1%%</textarea>
My problem is when the text direction is changed , this tag becoms voucher?id=1%%%%. this is messing up the tag structure.
<textarea dir="rtl">%%voucher?id=1%%</textarea>
I tried this in tinyMCE and CKEditor, both have same behaviour when customised to work as sms editor.
Any solution for this?
You can take help of invisible control character to preserve the direction.
<textarea dir="ltr">%%voucher?id=1%%</textarea>
<textarea dir="rtl">%%voucher?id=1%%</textarea>
For conditionally adding , you'll need to parse the textarea value. This will help.
Working example with normal textarea
If you have this code code:
<textarea dir="auto"></textarea>
And you start writing, e.g., Arabic, you'll find that the text is automatically right-aligned, as it should be.
Non-working example with Angular Material's textarea
<mat-form-field appearance="outline">
<mat-label>Post</mat-label>
<textarea dir="auto" matInput></textarea>
</mat-form-field>
If you start writing, e.g., Arabic, unfortunately, the text remains left-aligned :(
The question
So, the question: How to use dir="auto" with Angular Material's textarea? Or how to get the text right-aligned in Angular Material's textarea when the user starts writing Arabic automatically?
Previously, I couldn't even get dir="rtl" to work with Angular Material's textarea. But thanks to the the example in this GitHub issue, seems like it's possible by setting dir="rtl" on the parent form.
So, perhaps a temporary workaround is possible by having the form's dir attribute take its value from a member variable, and take this variable's value from the user or calculate it based on the first character in the textarea or something.
But yeah, not a perfect solution and I hope someone has a better one. But it partially answers my question so I'm going to leave it here in case it's a solution for someone else as well.
I have created but now when user add html formating in that text area with html codes like
<b>the codes are working </b>
they are showing up same as written, instead of "the codes are working "
so how do i enable that in simple HTML form.
Textarea cannot display any html structure. You should use <pre> tag, but if you want to edit in the same time, use contenteditable attribute.
<pre contenteditable="true"><b>the codes are working</b></pre>
I think that you are trying some editor. You can use CKEditor. Quirksmode.org also can be useful.
Im using sublime 2 with Emmet plugin. Is there a way to write a comment with speed coding that would produce me something like that:
<div class="container">
Lorem ipsum
</div> <!-- custom comment -->
I've tried
div.container
And it's not working.
Is it possible to add comments to each div or element created via speed coding snippets?
You can write quick comand c+tab for simple comment or you can write in this form c{my comment}+tab to add text into de comment tags
Use filters:
div>div#page>p.title+p|c
Reference: http://docs.emmet.io/filters/
c>{some comment} will give you a comment with text "some comment" in it.
To have a comment after a div, you can use the following:
div.container+c{custom comment}
If you also want to have some text inside the div, you can use the following:
div.container{Hello World}+c>{custom comment}
If you want to have something after the comment, you need to group it using brackets as shown below:
div.container{Hello World}+(c>{custom comment})+div#nav
I believe this is what you're looking for:
c{test}+div>p{Comments!}^c{/test}
I have a further question about a solution provided elsewhere on this site (HTML textbox, auto highlighting text)
The solution for making auto select text worked, but I can't figure out how to include HTML in the box, without it disappearing. I have used the text on the following page:
http://www.tennessee-scv.org/camp1640/Tour/media/
For example, I need the first box to read:
Germantown Tour
but if I set it up like that, then it it only displays up to the first ("), so I had to use (').
This is what you require!!
<textarea name="textarea" cols="85" rows="10" wrap="VIRTUAL" onclick="this.select();">CODE HERE!!/textarea>
Fiddle Link : http://jsfiddle.net/qNmXr/8/
Updated Fiddle Link. This is the exact thing which works for you. Check it out!
Try using "
<a href="http://www.germantowntour.com" target="_blank">Germantown Tour</a>
W3c reference