Question

我正在尝试为网站创建一个简单的文本编辑器。我想在他的网站上添加类似代码按钮的内容。因此，通过选择特定文本，使用灰色为背景着色。这是我现在所拥有的，但如果我选择了多行文本（通过按Enter键创建的行），则函数test（）不起作用。它只有在我每次选择一行时才有效。

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/html"> 
<head>



  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="Awesome/css/font-awesome.css">



</head>
<body onload="InitEditable()">


  <div style="margin-left:10px;">
        <p>
          <div class="btn-group">
           <a class="btn" href="#" onclick="fontEdit('bold')"><i class="icon-bold"></i></a>
           <a class="btn" href="#" onclick="fontEdit('italic')"><i class="icon-italic"></i></a>
           <a class="btn" href="#" onclick="fontEdit('underline')"><i class="icon-underline"></i></a>
           <a class="btn" href="#" onclick="test()"><i class="icon-link"></i></a>
                <a class="btn" href="#" onclick="fontEdit('justifyLeft')"><i class="icon-align-left"></i></a>
                <a class="btn" href="#" onclick="fontEdit('justifyCenter')"><i class="icon-align-center"></i></a>
                <a class="btn" href="#" onclick="fontEdit('justifyRight')"><i class="icon-align-right"></i></a>
                <a class="btn" href="#" onclick="fontEdit('justifyFull')"><i class="icon-align-justify"></i></a>
          </div>
        </p>
  </div>


  <div style="margin-left:10px;"><iframe id="textEditor" style="width:500px;height:170px;font-family:arial;font-size:11px;"></iframe></div>




 <script type="text/javascript">


var editorDoc;
var editor;


function InitEditable() 
{
  editor = document.getElementById("textEditor");
  editorDoc = editor.contentwindow.document;              
  var editorBody = editorDoc.body;


  if ('contentEditable' in editorBody) {
                  // allow contentEditable
          editorBody.contentEditable = true;
  }else {  // Firefox earlier than version 3

          if ('designMode' in editorDoc) {
                          // turn on designMode
                  editorDoc.designMode = "on";                          
          }
  }
}



function fontEdit(x,y)
{
editorDoc.execCommand(x,"",y);
editorDoc.focus();
}


function test(){


  var range = document.getElementById("textEditor").contentwindow.window.getSelection().getRangeAt(0);



  var newNode = document.createElement('div');
  newNode.style.backgroundColor = "gray";


  range.surroundContents(newNode);      
  return false;  


}
</script>


</body>
</html>

surroundContents（）和div一定存在问题，但无法想出解决问题的方法。

欢迎任何想法！提前致谢。

Answer 1

一个选项是我的class applier module图书馆Rangy（demo）

现场演示：http://jsfiddle.net/D7s5j/

CSS：

.code {
   background-color: #ccc;
   font-family: Courier New, monospace;
}

JS：

var codeApplier = rangy.createCssClassApplier("code");
codeApplier.applyToSelection();

Answer 2

所以问题在于，这个唯一的对象会创建<div>，所以这不能让surroundContents（）正常工作，并在所选范围内添加它自己的<div>s。

我最后通过添加此代码来解决我的问题

$("#textEditor>div").replaceWith(function() { return $(this).contents(); });

从可信对象中删除<div>s个标记。

此外，您可以在输入按下后添加此标记以创建<br>标记。

$("#textEditor > div").before("<br />").contents().unwrap();

对于第二个代码感谢VisioN。

用于文本编辑器的多行选择（getRangeAt）和surroundContents（）

2 个答案: