Develop Reference

Antd4 select maintain text selection in text area when selecting font

I am using antd4 select as a font family/ font size selector. So when highlight text I would like to preserve the text selection highlighting and maintaining focus on the text area when selecting another font.
I have tried to preventDefault() on mousedown, but that didn't work as expected as you can see from the sandbox below. Thanks for any help.
sandbox
EDIT: This was working with antd v3 select but they rewrote it and is no longer working.

Ciao, I modified your sandbox and now text stills highlited and focus is on textarea. In brief:
Added a ref to textarea called this.nameInput.
I replaced onMouseDown function with onChange.
On function onChange I move the focus into textarea by using this.nameInput.focus()

Making a button copy a text

I want to make the "COPY ADDRESS" button copy a text I specify. I already tried to do it myself, but couldn't do it. It is very simple, I just have minimal knowledge.
http://porcelaincoins.com
<a class="btn btn-lg" href="#">copy address</a>

This code will copy the text abc to the clipboard.
function copy(text) {
document.body.insertAdjacentHTML("beforeend","<div id=\"copy\" contenteditable>"+text+"</div>")
document.getElementById("copy").focus();
document.execCommand("selectAll");
document.execCommand("copy");
document.getElementById("copy").remove();
}
<button onclick="copy('abc')">Copy</button>
How does it work?
Firstly, it makes a contenteditable div with the id of copy (don't use this ID anywhere else on your page). contenteditable elements are elements which are designed to be edited by the user, and there is extensive native JavaScript around them in the form of document.execCommand provided to help people make rich text editors. Part of document.execCommand is a copy method, to add text to the clipboard - however this only works reliably with selected text in a contenteditable element.
The next step is for the code to focus on the div. This is as if the user had clicked on it - inputs are known as focused when they are active - for example the focused element in a form will receive the keyboard events
The code then uses document.execCommand to select all of the text inside of the contenteditable div. In the first step, we ensured that this text was the text passed to the function.
Then, it copies that content to the clipboard using document.execCommand("copy"). This is actually surprisingly simple.
Finally, it removes the div from the DOM (i.e. destroys the div)
These actions should all happen so fast that the user will not realise that a div has even been created, however the text will appear on their clipboard.

Getting user input text without HTML input elements

Is there a way using angular or just javascript to get the user input text not using HTML input boxes? For example when a user clicks on a paragraph he will be able to change its text without a text area popping so he could input. I tried focusing on angular ngHide element( a input HTML) but with no success. It only focused on the element when its showing.

Try contenteditable introduced in HTML 5.
Try Fiddle.
<p contenteditable="true" onfocus="alert(this.textContent)" onblur="alert(this.textContent)">
Enter Name
</p>

But there is. contenteditable is an HTML attribute that makes divs and cells editable. you can make a directive in angularjs to use that, but beware of the caveats that it introduces.

Take a look at x-editable. It will suit your needs, i think.

jQuery select on div content

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?

The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.

In accordance with jQuery docs, "this event is limited to fields and boxes".

From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here

All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here

we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/

tinyMCE inside hidden div updates only first time and becomes readonly

I have a grid and div with tinyMCE (textarea) in it on my page.
Div is initially hidden. After populating textarea:
$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
InitMCE();
Content in tinyMCE appears and component is editable but, after hidding div with textarea (#divCard), populating again $('#editor').val(data.Content);
tinyMCE appears readonly and content is not shown.
in function InitMCE() is code:
tinyMCE.init({
mode: "textareas",
theme: "advanced",
...
});
I tried with
tinyMCE.execCommand("mceRemoveControl", false, '#editor');
$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
InitMCE();
and with:
tinyMCE.remove($('textarea'));
$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
tinyMCE.execCommand("mceAddControl", false, '#editor');
InitMCE();
and some other variations but no success.

Why are you hiding the textarea.
If you inspect the html DOM struture after TinyMCE is initialized, you will see that TinyMCE uses div and span infront of textarea to render your text, but when you try to edit it, you are actually editing the textarea.
So if you hide your textarea, you won't be able to edit it anymore.

There are several problem that may arise when the source html element (in your case a textarea) is hidden on editor initialization.
Tinymce will take care of hiding the former textarea.
The solution to your problem will be to set the textarea visible just before initialization - then you will have no problem editing its contents afterwards.