Edit only a selection in Javascript editor

Question

I am working on an very specialized editor. In short, I drafted an example of the code (below) which runs in firefox. The iText function will fill in example content.

The user should select a part of the example content an hit "Letters", then the iLetter function should take only the selected part of the sentence and invert capital letters to small letter and small letters ot capital letters only in the selection (the inversion itself is not the issue).

I searched for hours on how to get the position of the selection within the displayed text/string or how to get the start and end position. It would be great if I could extract the selection, modify it as a string (I managed that) and replace the selection with the modified string (I failed). Is it possible at all? Any hints or suggestions are very welcome.

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

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

function iLetters(){
    var range = window.frames['richTextField'].getSelection();
 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>

Thank you for your response. Yes, getSelection().toString() would get me the selection text. But how do I write a string back to the selection replacing it? — A. Untergasser, Jun 06 '17 at 13:19

score 0 · Answer 1 · answered Jun 07 '17 at 19:26

I figured out... A great help was: replace selected text in contenteditable div

The function only sets it to lowercase, but that is a trivial modification made to keep the example compact.

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

function iText(){
 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();
  var theSelection = sel.toString();
  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>

Edit only a selection in Javascript editor

1 Answers1