Question

我使用的是没有任何库的javascript。现在我想只更改文本区域的所选文本的字体样式。我使用以下函数提取了选择文本。谁能帮忙？

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);
}

Answer 1

怎么样

console.log(selectedText.fontsize(100))，有关详细信息，请参阅docs

Answer 2

您可以使用带有内容可编辑属性的div替换文本区域，然后将其分成3个文本块。 / 之前选择 / 之后并将每个包装在自己的<span>中，并将样式应用于包含所选文本的范围：

.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>

Answer 3

您可以使用CCS ::selection选择器为您的选择设置样式，如下所示：

::selection { color: red; background-color: yellow; }
::-moz-selection { color: red; background-color: yellow; }

<textarea>
  Select me!
</textarea>

列出了浏览器兼容性here。

Answer 4

这是一个使用span的静态样式，但我愿意在文本编辑器中动态使用它。这是我到目前为止所做的代码。

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);
}

建议我如何在我的代码中使用contenteditable div !!!!!!

在javascript中更改所选文本的字体样式

4 个答案: