コンテンツ内の選択されたテキストの周囲にbbコードを囲みますDIV

Question

したがって、私はRTE環境を作成しようとしています。 私はコンテンツを編集可能なdivにしておき、ユーザーがテキストを選択してBBCodeを囲むボタンを押すことを許可したいと考えています。

私は以下の機能を作成しようとしましたが、選択したテキストが置き換えられました。 それが適切なVALUを格納しているように見えるEIN selectedText

しない

function wrap(tag) 
{ 


    var sel, range; 
    if (window.getSelection) 
    { 
     sel = window.getSelection(); 
     if (sel.rangeCount) 
     { 
      range = sel.getRangeAt(0); 
      var selectedText = range; 
      range.deleteContents(); 
      range.insertNode(document.createTextNode('['+tag+']'+selectedText+'[/'+tag+']')); 
     } 
    } 
    else if (document.selection && document.selection.createRange) 
    { 
     range = document.selection.createRange(); 
     selectedText = document.selection.createRange().text; 
     console.log(text); 
     range.text = '['+tag+']'+text+'[/'+tag+']'; 
    } 
} 


</script> 

jQueryが可能ですが、私は定期的にJavascriptを好むだろう。

Answer 1

selectedText = range;からselectedText = range.toString();に変更してください。範囲はオブジェクトで、deleteContentsを実行するとデータが消去されるため、ラップされません。

DEMO

JS：

function wrap(tag) { 
    var sel, range; 
    var selectedText; 
    if (window.getSelection) { 
     sel = window.getSelection(); 

     if (sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      selectedText = range.toString(); 
      range.deleteContents(); 
      range.insertNode(document.createTextNode('[' + tag + ']' + selectedText + '[/' + tag + ']')); 
     } 
    } 
    else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     selectedText = document.selection.createRange().text + ""; 
     range.text = '[' + tag + ']' + selectedText + '[/' + tag + ']'; 
    } 

} 

Answer 2

範囲は、そのdeleteContents()メソッドが呼び出された後何のテキストが含まれることはありませんので、あなたは...

var selectedText = range.toString(); 

ではなく

var selectedText = range; 

を必要としています。

もう1つの注意：console.log(text);は、コンソールなしで、またはコンソールを無効にしてIEのバージョンでIEブランチを実行すると、IEブランチにスローされます。

Answer 3

ここにあった仕事を行いますが、選択には画像が存在しない場合にのみ、他の答え。私はそれを簡素化し、それは同様の選択で画像を扱う作った：

https://jsfiddle.net/skeets23/go1nxf06/

function wrap(tag) { 

    sel = window.getSelection(); 

    if (sel.rangeCount) { 
    range = sel.getRangeAt(0); 
    range.insertNode(document.createTextNode("["+tag+"]")); 
    range.collapse(); 
    range.insertNode(document.createTextNode("[/"+tag+"]")); 
    } 

} 

私は社内のプロジェクトに取り組んでいるので、私はすべてのブラウザと互換性作る気にしませんでした他の答えのようですが、それは現在のバージョンのfirefoxとchromeで動作します。 IEでは動作しません。