Fatal编程技术网
  • javascript/
  • 更改javascript中选定文本的字体样式

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

javascript html css

更改javascript中选定文本的字体样式,javascript,html,css,Javascript,Html,Css,我使用的javascript没有任何库。现在我只想更改文本区域中选定文本的字体样式。我使用以下函数提取了select文本。有人能帮忙吗 function ShowSelectionInsideTextarea(editor){ var textComponent = document.getElementById(editor); var selectedText; // IE version if (document.selection != undefined) {

我使用的javascript没有任何库。现在我只想更改文本区域中选定文本的字体样式。我使用以下函数提取了select文本。有人能帮忙吗

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);
}
怎么样

console.log（selectedText.fontsize（100））
，有关更多信息，请参阅您可以使用具有内容可编辑属性的div替换文本区域，然后将其分为3个文本块。在前/选定/后，并将每个文本包装在各自的
，并将样式应用于保存选定文本的范围：

.red\u bold{
颜色：红色；
字体大小：粗体；
}

这是一个长样式的文本
您可以使用CCS选择器为您的选择设置以下样式：

：：选择{颜色：红色；背景色：黄色；}
：-moz选择{颜色：红色；背景色：黄色；}

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

很简单，将其分为3个文本块。before/selected/after，并将每一个都包装在自己的
中，并将样式应用于保存所选文本的范围。@Banana在
文本区域内
？@RobbyCornelissen在文本区域内这是不可能的，但他可以创建一个自定义编辑器，使其看起来像文本区域，a
例如…@Banana您能发布如何更改所选文本的字体样式吗？当然，请稍等片刻否我想更改textarea中不同文本的字体样式。例如：如果下面是文本：“这是测试值”如果通过选择像“测试值”这样的几个词，那么我们应该能够更改该值的字体样式，就像它应该是粗体OK一样，然后创建大小为的字体标记将内部文本放入所选值，将其替换为现有html。不过我得做点什么来证明这一点。但不是在房间里textarea@UtsabNeupane你必须正确地反映这些事件。

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