0

我正在尝试为网站创建一个简单的文本编辑器。我想向他添加类似此站点中的代码按钮的内容。因此，通过选择特定的文本，将其背景设置为灰色。这是我现在所拥有的，但如果我选择了多行文本（通过按 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 有问题，但想不出什么办法来解决。

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

4

2 回答 2

0

一种选择是我的Rangy库（演示）的类应用程序模块

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

CSS：

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

JS：

var codeApplier = rangy.createCssClassApplier("code");
codeApplier.applyToSelection();
于 2013-02-12T15:33:32.450 回答
0

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

我最终通过添加此代码解决了我的问题

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

从 contenteditable 对象中删除<div>s标签。

您也可以添加它以<br>在按下输入后创建标签。

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

对于第二个代码，感谢 VisioN。

于 2013-02-13T16:47:28.710 回答