logo标签列表

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

javascripthtmlcss
3

我正在使用没有任何库的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个文本块。 之前 / 选择的 / 之后 并将每个文本块包装在自己的 <span> 中，并对包含所选文本的 span 应用样式。 - Banana
@Banana 在一个 textarea 里面？ - Robby Cornelissen
@RobbyCornelissen 在文本区域内不可能实现，但他可以创建一个自定义编辑器，看起来像一个文本区域，例如 <div contenteditable></div>... - Banana
@Banana，你能否发布一下如何使用<div contenteditable></div>来更改所选文本的字体样式的内容？ - john smith
当然，给我一会儿。 - Banana
4个回答
0

这是一个使用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！

0

怎么样呢

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

不，我想要改变文本区域中不同文本的字体样式。例如：如果以下是文本：“这是测试值”，如果选择“测试值”这几个词，则应该能够仅更改该值的字体样式，比如加粗。 - john smith
好的，那么创建一个带有指定大小的字体标签，并将innerText设置为所选值，将其替换为现有的HTML。不过我必须做些什么来证明它，但不能在文本区域内进行。 - argentum47
@UtsabNeupane http://jsfiddle.net/qbx9mqwn/1/ 你需要正确地重构事件。 - argentum47
0

您可以将文本区域替换为带有可编辑内容属性的 div，然后将其分成 3 个文本块。之前 / 已选中 / 之后 并将每个文本块包装在自己的 <span> 中，并对包含所选文本的 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>

0

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

::selection { color: red; background-color: yellow; }
::-moz-selection { color: red; background-color: yellow; }
<textarea>
  Select me!
</textarea>

浏览器兼容性在这里列出。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接