只編輯Javascript編輯器中的選擇

我正在編寫一個非常專業的編輯器。簡而言之，我草擬了一個在firefox中運行的代碼示例（如下）。 iText功能將填寫示例內容。

用戶應該選擇示例內容的一部分命中「字母」，那麼iLetter函數應該僅取出句子的選定部分，並且只在選擇中將大寫字母翻轉爲小寫字母和小寫字母或大寫字母反演本身不是問題）。

我搜索了幾個小時，瞭解如何在顯示的文本/字符串中獲取選擇的位置或如何獲取開始和結束位置。如果我可以提取選擇內容，將其修改爲一個字符串（我管理它）並用修改後的字符串替換（我失敗了），那將是非常好的。它有可能嗎？任何提示或建議都非常受歡迎。只編輯Javascript編輯器中的選擇

<html> 
 
<head> 
 
<script> 
 
function iFrameOn(){ 
 
\t richTextField.document.designMode = 'On'; 
 
} 
 

 
function iText(){ 
 
\t window.frames['richTextField'].document.body.innerHTML = "Hello World ready for simple text trial?"; 
 
} 
 

 
function iLetters(){ 
 
    var range = window.frames['richTextField'].getSelection(); 
 
\t range.deleteFromDocument(); 
 
} 
 
</script> 
 
</head> 
 
<body onLoad="iFrameOn();"> 
 
<h2>Edit Test</h2> 
 
<form action="parse_file.php" name="form" id="form" method="post"> 
 
<p> 
 
<div id="wysiwyg_cp" style="padding:8px; width:700px;"> 
 
    <input type="button" onClick="iText()" value="Text"> 
 
    <input type="button" onClick="iLetters()" value="Letters"> 
 
</div> 
 
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea> 
 
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe> 
 
<!-- End replacing your normal textarea --> 
 
</p> 
 
</form> 
 
</body> 
 
</html>

來源

2017-06-06 A. Untergasser

謝謝您的答覆。是的，getSelection（）。toString（）會讓我選擇文本。但是，如何將字符串寫回到替換它的選擇？ –

我想通了......有很大的幫助是： replace selected text in contenteditable div

該功能只將其設置爲小寫，但就是做保留的例子緊湊一個簡單的修改。

<html> 
 
<head> 
 
<script> 
 
function iFrameOn(){ 
 
\t richTextField.document.designMode = 'On'; 
 
} 
 

 
function iText(){ 
 
\t window.frames['richTextField'].document.body.innerHTML = "HELLO WORLD READY FOR A SIMPLE TEXT TRIAL?"; 
 
} 
 

 
function iLetters(){ 
 
    var sel, range; 
 
    if (window.frames['richTextField'].getSelection) { 
 
     sel = window.frames['richTextField'].getSelection(); 
 
\t \t var theSelection = sel.toString(); 
 
\t \t var replacementText = theSelection.toLowerCase(); 
 
     if (sel.rangeCount) { 
 
      range = sel.getRangeAt(0); 
 
      range.deleteContents(); 
 
      range.insertNode(window.frames['richTextField'].document.createTextNode(replacementText)); 
 
     } 
 
    } 
 
} 
 
</script> 
 
</head> 
 
<body onLoad="iFrameOn();"> 
 
<h2>Edit Test</h2> 
 
<form action="parse_file.php" name="form" id="form" method="post"> 
 
<p> 
 
<div id="wysiwyg_cp" style="padding:8px; width:700px;"> 
 
    <input type="button" onClick="iText()" value="Text"> 
 
    <input type="button" onClick="iLetters()" value="Letters"> 
 
</div> 
 
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea> 
 
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe> 
 
<!-- End replacing your normal textarea --> 
 
</p> 
 
</form> 
 
</body> 
 
</html>

來源

2017-06-07 19:26:31

只編輯Javascript編輯器中的選擇

回答

相關問題