Get all text before SelectionStart and after SelectionEnd

54
August 11, 2018, at 9:40 PM

I am creating a text editor from scratch.

code for getting bold

$('#bold').click(function(){
            var start = window.getSelection().toString();
            var bolded = '<b>' + start + '</b>';
            var cursorPositionBegin = $('#TextEditor').prop("selectionStart");
            var cursorPositionEnd = $('#TextEditor').prop("selectionEnd");
// to check 
                alert(bolded);
            })  

HTML CODE

<table width="50%">
    <tr>
        <td>
            <div>
                <div>
                    <span><input type=button value="B" id="bold"></span>
                </div>
                <div contenteditable="true">
                    <textarea cols="47" rows="23" placeholder="editor" id="TextEditor"></textarea>
                </div>
            </div>  
        </td>
    </tr>
</table>

When I click #bold for a selected set of characters I want to add characters in the #TextEditor. I thought maybe getting the beginning and ending position of cursor could help break up and join the begin and end together along with the characters to form what I require.

I also use jQuery

[update 1] Or is there an alternate method to do what I require? [update 2] added contenteditable="true" to div where #TextEditor id placed

Your help would be appreciated.

Answer 1

As @weBBer said you will not allowed to add tag inside textarea element use div with attribute contenteditable="true" instead

$('#bold').click(function(){ 
  var string = window.getSelection().toString(); 
  var bolded = '<b>' + string + '</b>'; 
  var selC, range; 
      if (window.getSelection) { 
          selC = window.getSelection(); 
          if (selC.rangeCount) { 
              range = selC.getRangeAt(0); 
              range.deleteContents(); 
              range.insertNode(document.createTextNode(bolded)); 
          } 
      } else if (document.selection && document.selection.createRange) { 
          range = document.selection.createRange(); 
          range.text = bolded; 
      } 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table width="50%"> 
    <tr> 
        <td> 
            <div> 
                <div> 
                    <span><input type=button value="B" id="bold"></span> 
                </div> 
                <div contenteditable="true" style="height: 300px;width: 300px;border: 1px solid black"> 
                     
                </div> 
            </div>   
        </td> 
    </tr> 
</table>

READ ALSO
Video Slider with active slide bigger than remaining slides [on hold]

Video Slider with active slide bigger than remaining slides [on hold]

Need to make the active slide bigger than the remaing slidePlease share any source code or example

72
How to give Admin panel list view link (Docx file download) in Codigniter

How to give Admin panel list view link (Docx file download) in Codigniter

Actually,I'm working on Codigniter adminpanel modules,i'm implemented a module i want give download link in separate column how will give please help

84
How to retrieve text values from websites using javascript [on hold]

How to retrieve text values from websites using javascript [on hold]

I am trying to create a system where one can paste the url of any news site and they can see all the values of title and text

52