i was wondering how does on many websites when i add a smile on textarea appears image instead of ex. :), so i want to ask you how it is possible, i need a simple example...
for example
i have :
<img class="smile" src="smiles/smile1.gif" alt=":)" onclick="add_smile(1);"/><br/>
<textarea></textarea>
so i want onclick of image (.smile) to be added image on textarea, then to be possible to insert some words after image, or just explain me how does it may be done ( is there an <div> element or it is a <textarea> or idk what it can be.. )
thanks
What you are seesing on many sites is not a textarea. It's a div with contentEditable attribute which acts like a textarea. That's how wysiwyg editors are created.
<div contentEditable="true"> Type here. You can insert images too </div>
Check working example at http://jsfiddle.net/6bCRJ/
Related
How to double click on partial value of the text from a element using javascript.
Example:
Site : https://www.crm.com/resource-category/all/
Xpath of Html element : (//div[#class='col-12 offset-md-1 col-md-11'])[2]
text value : Helpful resources to get you oriented around CRM.COM
Now, I want to go to the above Site and get the text of the element with the above xpath. until this point its fine. Its a tag with simple text. But now, I want to double click on the partial text of the div element which is "Resources" in javascript
Attached image. tag has whole text value as "Helpful resources to get you oriented around CRM.COM" but I want code to double click the partial text which can be "resources to get".
please help
Inspected value on the website
#skr, Its a simple text element within tag. when I double click on partial text, a popup appears and I need to automate the scenario. Thanks –
Here is what you asked. I used jQuery, but you can use vanilla if you want.
$('.clickable span').click(function(){
alert('do something');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickable">
<p>A small text so you can <span><u>click here</u></span></p>
</div>
I have a contenteditable div and using keyboard shortcuts like ctrl+i the user is able to format the text. And as they type the innerHTML changes reflecting the tags i.e:
Hello <i>thanks for <br><br>for showing up<b> y'all b</b></i>
This is fine, and works well for my purposes. but the issue arises that when I go to print the html in a different div IF a user adds any other html tags, they could really mess up the application.
For instance, if they added a <script> tag or style etc.. How do I make it that the user is only allowed to add <i>, <br>, <b>, <s>, and without being able to add anything else?
Any ideas? Thank you
I think that you can use a regExpresion to avoid the "indeseables" tags. Some like
<textarea #data [(ngModel)]="value" (input)="replace(data)"></textarea>
<div [innerHtml]="valueParse">
</div>
replace(control:any)
{
this.valueParse=control.value.replace(/<(?!br|i|u)((\w+))>/gm,"<$1>")
.replace(/<\/(?!br|i|u)((\w+))>/gm,'<\/$1>');
}
See stackblitz
I have a div containing a span (the span could be a paragraph, too; I don't care):
<div id="aDiv">
<span id="aQuestion">What's next?</span>
</div>
I would like to be able to toggle the span's text's appearance between disabled and enabled. I've tried stuff along the lines of
document.getElementById('aQuestion').setAttribute("disabled", "disabled");
but haven't had any luck: The text doesn't have that grayed-out "disabled" look. When I inspect the element, I can see the attribute has been added. In fact, even if my original code looks like this:
<div id="aDiv">
<span id="aQuestion" disabled>What's next?</span>
</div>
the text doesn't appear disabled.
It seems I'm going down the wrong path, but online searches haven't resulted in a solution. Is there any way to accomplish this? I realize the concept of text being disabled doesn't exactly make sense, since they don't involve user interaction, but I need that look.
The only thing I've come up with is to use CSS, something along these lines:
CSS:
<style type="text/css">
.disableMe {
color:darkgrey;
}
</style>
The HTML:
<span id="aQuestion" class="disableMe">What's next?</span>
The JS:
document.getElementById('aSpan').classList.remove('disableMe');
This kind of gets me around the problem with the text, but some of my text spans will have adjacent spans containing bootstrap icons, and I need these to appear disabled, as well. Am I overlooking something very obvious?
Thanks in advance.
It's a span element so it doesn't have a disabled modifier, just create a css class that gives the look you want and use that.
span includes only the global attributes. So you cannot disable it. More here
I want to create a very simple html editor (not WYSIWYG) based on jQuery.
My question is how can I make textarea or div possible to
write some text on it
then style i.e tags ( <strong>some stuff</strong> change <strong> color to blue for example)
I don't ask how to use regular expression and how to manipulate DOM later becouse it's my own problem to solve :D Just how to make "playgroud" for it ;)
When I use textarea it's hmm ( impossible? ) to style stuff inside, but also when I use div... hmm I can just write on div :D So how can I link textarea behaviour on div?
EDIT Here is something similar : http://codemirror.net/mode/xml/index.html
Check out this quick fiddle to show how you could do this possibly.
$('#edit').keydown(function(){
var text = $(this).val();
$('#preview').html(text);
});
this is your html
<textarea id="edit">
</textarea>
<div id="preview"></div>
and your css
#preview{ width:100%; background-color:#eee; padding:20px}
#preview strong{color:blue;}
I have one question. I try to develop a little WYSIWYG editor.
I would like create a <h1> button which allows me to generate a <h1> title (by clicking on button after text selection in <p> element).
I obtain the selection with window.getSelection().... But now, I would like to put my append("<h1>my text selected</h1>") just before the <p>. It’s my problem, because my <p> elements don’t have id or class. So do you know a means to put my append just before the <p> where my text has been selected?
I don’t know if with my bad English you’ll understand me!
Thanks very much for your help.
Have you tried using something like jQuery?
$("#yourButton").click(
function(){
$('<h1>'+window.getSelection()+'</h1>').insertBefore("???");
}
);
Just replace "???" with the location of your <p> element. How you would find that location depends how you wrote your HTML. Feel free to post your HTML for more assistance.