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

我使用的JavaScript没有任何库。现在我只想改变文本区域的选定文本的字体样式。我已经使用下面的函数提取了选择的文本。谁能帮忙？更改字体样式的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); 
}

来源

2014-12-05 Utsab Neupane

简单，将其分成3个文本块。 * *之前的*/*选择*/*之后*并将其各自包装在其自己的''中，并将样式应用于保存所选文本的跨度。 – Banana 2014-12-05 09:49:00

@Banana在'textarea'里面？ – 2014-12-05 09:51:45

@RobbyCornelissen里面的textarea不可能，但他可以创建一个自定义编辑器看起来像一个文本区域，例如'

'...... – Banana 2014-12-05 09:53:38

如何

console.log(selectedText.fontsize(100))，以获取更多信息，请参阅docs

来源

2014-12-05 09:46:13 argentum47

不，我想改变textarea不同文本的字体样式。对于例如：如果下面是文本：“这是测试值”，如果通过选择像“测试值”这样的几个单词，那么我们应该能够改变该值的字体样式，只要它应该是大胆的 – 2014-12-05 09:50:33

ok，然后创建字体标签大小将innerText设置为选定的值，将其替换为现有的html。我必须做出一些事情来证明它。但不是里面的textarea – argentum47 2014-12-05 09:54:34

好吧，然后请张贴如何完成！ – 2014-12-05 10:01:20

你可以用与内容编辑属性的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>

来源

2014-12-05 10:04:53 Banana

可以使用CCS ::selection选择器按如下方式选择样式：

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

<textarea> 
 
    Select me! 
 
</textarea>

列出浏览器兼容性here。

来源

2014-12-05 10:05:34

这是一个使用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); 
}

好建议我怎么在我的代码在这里使用DIV CONTENTEDITABLE !!!! ！

来源

2014-12-05 10:11:13

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

回答

相关问题