0

Web サイト用の単純なテキスト エディターを作成しようとしています。このサイトのコードボタンのようなものを彼に追加したい. したがって、特定のテキストを選択することで、その背景にグレーの色を付けます。ここに私が今持っているものがありますが、複数行のテキストが選択されている場合(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

1つのオプションは、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(); });

<div>scontenteditable オブジェクトからタグを削除します。

<br>また、Enter キーを押した後にタグを作成するためにこれを追加することもできます。

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

2 番目のコードについては、VisioN に感謝します。

于 2013-02-13T16:47:28.710 に答える