I have a mini question regarding how to select text and place it in a selected div.
This demo was created from codepen.io.
In this demo, you will see a blue button and text in a textarea. I would like to be able to select the text "Select this text", click the blue button, and have the selected text transformed into
<div class="selected">Select this text.</div>Can someone assist me with this? Thanks!
$(document).ready(function() {
$("body").on("click", ".Bold", function() {
// Code goes here...
});
});html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-color: #fafafa;
}
.container {
position: relative;
width: 100%;
max-width: 500px;
margin: 0px auto;
margin-top: 30px;
}
.editor {
float: left;
width: 100%;
padding: 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.editButtons {
width: 100%;
float: left;
margin-bottom: 15px;
}
.Bold {
padding: 5px;
border-radius: 3px;
-webkit-border-radius: 3px;
background-color: blue;
position: relative;
max-width: 150px;
text-align: center;
color: #ffffff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="editButtons">
<div class="Bold">Add in Div</div>
</div>
<textarea class="editor" id="editor">Select this text. and click blue button. It should be add the following div tag like this:
<div class="selected">Select this text.</div>
</textarea>
</div>