在javascript中更改所选文本的字体样式 [英] Change Font Style of selected text in javascript
本文介绍了在javascript中更改所选文本的字体样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用javascript没有任何图书馆。现在我想改变只有文本区域的选定文本的字体样式。我已经提取了选择文本使用以下功能。任何人都可以帮助？
I am using javascript without any library. Now I want to change font style of selected text only of text area. I have extracted the select text using following function. Can anyone 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);
}
推荐答案
使用span，但我愿意在文本编辑器中动态使用它。这是我到目前为止所做的代码。
well this is a static styling using span but i am willing to use it dynamically in a text editor . here is the code I have done so far.
Html代码：
<!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代码：
@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代码：
// 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);
}
$ b。 !!
Well suggest me how to use contenteditable div here in my code!!!!!!
这篇关于在javascript中更改所选文本的字体样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
