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

【问题标题】：Change Font Style of selected text in javascript在javascript中更改所选文本的字体样式
【发布时间】：2014-12-05 18:11:13
【问题描述】：

我正在使用没有任何库的 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);
}

【问题讨论】：

简单，分成3个文本块。 before / selected / after 并将每个包装在其自己的<span> 中，并将样式应用于包含所选文本的跨度。跨度>
@Banana 在textarea?
@RobbyCornelissen 在文本区域内是不可能的，但他可以创建一个自定义编辑器，使其看起来像一个文本区域，例如 <div contenteditable></div>...
@Banana 你能发布如何使用
更改所选文本的字体样式吗？？
当然，给我一点时间

标签： javascript html css

【解决方案1】：

怎么样

console.log(selectedText.fontsize(100))，更多信息请参考docs

【讨论】：

不，我想改变textarea不同文本的字体样式。例如：如果以下是文本：“这是测试值”如果通过选择像“测试值”这样的几个词，那么我们应该能够更改该值的字体样式，就像它应该是粗体一样
好的，然后创建带有大小的字体标签，将innerText设置为选定的值，将其替换为现有的html。不过，我必须做一些事情来证明这一点。但不在文本区域内
@UtsabNeupane jsfiddle.net/qbx9mqwn/1 你必须正确地纠正事件。

【解决方案2】：

您可以将文本区域替换为具有内容可编辑属性的 div，然后将其分成 3 个文本块。 before / selected / after 并将每个包装在其自己的<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>

【讨论】：

【解决方案3】：

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

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

<textarea>
  Select me!
</textarea>

浏览器兼容性已列出here。

【讨论】：

【解决方案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！！！！！！

【讨论】：