Changing font style of selected text in javascript
I am using javascript without any library. Now I want to change the font style of the selected text in the text area only. I have extracted the selection text using the following function. Can anyone please help?
function ShowSelectionInsideTextarea(editor){
var textComponent = document.getElementById(editor);
var selectedText;
// IE version
if (document.selection != undefined)
{
textComponent.focus();
var sel = document.selection.createRange();
selectedText = sel.text;
}
// Mozilla version
else if (textComponent.selectionStart != undefined)
{
var startPos = textComponent.selectionStart;
var endPos = textComponent.selectionEnd;
selectedText = textComponent.value.substring(startPos, endPos)
}
console.log(selectedText);
}
+3
source to share
4 answers
you can replace your text area with a div with content edit attribute and then split it into 3 text blocks. before / selected / after and wrap each in its own <span>
and apply style to the range that contains the selected text:
.red_bold{
color:red;
font-weight:bold;
}
<div contenteditable="true">
<span>this is a</span> <span class="red_bold">long sty</span><span>led text</span>
</div>
0
source to share
You can use the CCS selector ::selection
to create your selection like this:
::selection { color: red; background-color: yellow; }
::-moz-selection { color: red; background-color: yellow; }
<textarea>
Select me!
</textarea>
Browser compatibility is shown here .
0
source to share
Well, it's a static style using span, but I'm willing to use it dynamically in a text editor. here is the code i have done so far.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Editor</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/layout.css" />
</head>
<body>
<div class="main-wrapper">
<div class="title"> Text Editor </div>
<div class="menu">
<ul>
<li>
<button onclick="changeFont('editor','bold')"><strong>B</strong> </button>
</li>
<li>
<button onclick="changeFont('editor','italic')"><em>I</em> </button>
</li>
<li>
<button onclick="changeFont('editor','underline')"><u>U</u> </button>
</li>
<li>
<ul>
<li>
<input id="fsize" type="text" value="10" />
</li>
<li>
<button onclick="changeFont('editor','fontSize')">Size</button>
</li>
</ul>
</li>
<li>
<button onclick="changeFont('editor','adjustR')">R</button>
</li>
<li>
<button onclick="changeFont('editor','adjustC')">C</button>
</li>
<li>
<button onclick="changeFont('editor','adjustL')">L</button>
</li>
<li>
<select id="fontFamily" value="" onclick="changeFont('editor','fontFamily')">
<option value="1">Times New Roman</option>
<option value="2">Arial</option>
<option value="3">Verdana</option>
</select>
</li>
<li> <button onclick="ShowSelectionInsideTextarea('editor')">Area</button>
</ul>
</div>
<div class="line"> </div>
<div class="main-body">
<textarea id="editor"></textarea>
</div>
<div class="footer"></div>
</div>
<script type="text/javascript" src="js/script.js">
</script>
</body>
</html>
Css code:
@charset "utf-8";
/* CSS Document */
.main-wrapper{
width:1000px;
background-color:#e0e7e7;
margin:0px auto;
}
.title{
font-size:24px;
text-align:center;
color:#357f7c;
}
.menu{
width:auto;
height:70px;
background-color:#f2f6f6;
padding-top:50px;
}
.menu ul {
list-style:none;
}
.menu ul li{
float:left;
margin-left:10px;
}
button{
width:55px;
height:30px;
border-radius:5px;
font-size:24px;
}
input{
width:55px;
height:25px;
}
select{
height:25px;
}
.line{
height:17px;
background:url(../img/bar.jpg) repeat-x;
}
.main-body{
width:750px;
height:450px;
margin:0px auto;
background-color:#fff;
}
#editor{
width:750px;
height:450px;
overflow:hidden;
text-align:left;
}
.footer{
height:55px;
background-color:#d2d9d3;
}
Js code:
// JavaScript Document
var editor=document.getElementById("editor");
//change font style
function changeFont(txt,change) {
var editor=document.getElementById(txt);
//for bold
if (change == 'bold') {
if (editor.style.fontWeight == 'bold')
editor.style.fontWeight = 'normal';
else
editor.style.fontWeight = 'bold';
}
//for italic
else if (change == 'italic') {
if (editor.style.fontStyle == 'italic')
editor.style.fontStyle = 'normal';
else
editor.style.fontStyle = 'italic';
}
//for underline
else if (change=='underline'){
if (editor.style.textDecoration == 'underline')
editor.style.textDecoration = 'none';
else
editor.style.textDecoration = 'underline';
}
//for fontsize
else if (change=='fontSize'){
var fsize=document.getElementById("fsize");
var fontSize=fsize.value;
editor.style.fontSize=fontSize+"px";
}
//for adjust right
else if (change=='adjustR'){
if(editor.style.textAlign=="right")
editor.style.textAlign="left";
else
editor.style.textAlign="right";
}
//for adjust center
else if (change=='adjustC'){
if(editor.style.textAlign=="right" || editor.style.textAlign=="left" )
editor.style.textAlign="center";
else
editor.style.textAlign="left";
}
//for adjust left
else if (change=='adjustL'){
editor.style.textAlign="left";
}
//for font family
else if (change=='fontFamily'){
var fontFamily=document.getElementById("fontFamily");
var value=fontFamily.value;
if(value==1){
editor.style.fontFamily="Times New Roman";
}
if(value==2){
editor.style.fontFamily="Arial";
}
if(value==3){
editor.style.fontFamily="Verdana, Geneva, sans-serif";
}
}
}
//select text from texarea
function ShowSelectionInsideTextarea(editor){
var textComponent = document.getElementById(editor);
var selectedText;
// IE version
if (document.selection != undefined)
{
textComponent.focus();
var sel = document.selection.createRange();
selectedText = sel.text;
}
// Mozilla version
else if (textComponent.selectionStart != undefined)
{
var startPos = textComponent.selectionStart;
var endPos = textComponent.selectionEnd;
selectedText = textComponent.value.substring(startPos, endPos)
}
console.log(selectedText);
}
Well tell me how to use the contenteditable div here in my code !!!!!!
0
source to share