CODEWITHSUNDEEP
javascriptjqueryhtmlnicedit
Venky
Venky

Reputation: 2067

Need to adjust a field in text editor after i type something

So i'm making a Text Editor,but what i need to do is

1)When i type in say "Col1" then after i press space it should automatically complete as "Column 1"

I'm new to HTML and Js,saw some examples on onkeyup and monitor events,but it doesnt seem to suit or i might be getting something wrong

Any Help would be deeply appreciated

BTW,using NicEdit as a base

My HTML

<html>
<head>
	<title>Custom Text Editor</title>
</head>
<body>

<div id="menu"></div>

<div id="intro">
By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced.
</div>
<br /> 

<div id="sample">
<script type="text/javascript" src="../nicEdit.js"></script>
<script type="text/javascript">
	bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>

<h4>Rich Text</h4>
<textarea name="area1" cols="40"  style="width: 100%" onkeyup="myFunction()"></textarea>
<br />

<h4>Second Textarea</h4>
<textarea name="area2" style="width: 100%;">
	Some Initial Content was in this textarea
</textarea>
<br />

<h4>Third Textarea</h4>
<textarea name="area3" style="width: 300px; height: 100px;">
	HTML <b>content</b> <i>default</i> in textarea
</textarea>
</div>

</body>
</html>

<script>

function myFunction() { var x = document.getElementById("a").value; document.getElementById("abc").innerHTML = x; }

</script>

Upvotes: 0

Views: 417

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

Because you are using nicEdit you cannot attach the function onkeydown="myFunction(this, event)" to the textarea name="area1" element.

This because the nicEdit change your DOM and create a div contenteditable where all run.

So, you can delegate the keydown event to the parent div sample.

document.getElementById('sample').addEventListener('keydown', function(e) {
   if (e.target.tagName == 'DIV' && e.target.classList.contains('nicEdit-main')) {
       e.stopPropagation();
       myFunction(e.target, e);
   }
});

For your myFunction you can use a different approach to get the caret position, change text and update.

The example:

function myFunction(obj, e) {
  // get the pressed key
  var charCode = e.keyCode || e.which;
  // covert the keycode to char
  var charStr = String.fromCharCode(charCode);
  // if a space
  if (charStr == ' ') {
    // get current position inside the textarea
    var startPoint = window.getSelection().anchorOffset;
    var node = window.getSelection().anchorNode;
    // check if the previous 4 chars are Col1
    if (node.nodeValue.substr(startPoint - 4, 4) == 'Col1') {
      // discard the space pressed
      e.preventDefault();
      // adjust the text
      node.nodeValue = node.nodeValue.substr(0, startPoint - 1) + 'umn 1' + node.nodeValue.substr(startPoint);
      obj.focus();
      var range = document.createRange();
      range.setStart(node, startPoint + 4);
      range.setEnd(node, startPoint + 4);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
}

bkLib.onDomLoaded(function () {
  nicEditors.allTextAreas()
});


document.getElementById('sample').addEventListener('keydown', function(e) {
  if (e.target.tagName == 'DIV' && e.target.classList.contains('nicEdit-main')) {
    e.stopPropagation();
    myFunction(e.target, e);
  }
});
<script src="http://js.nicedit.com/nicEdit-latest.js"></script>
<div id="menu"></div>

<div id="intro">
    By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with
    nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced.
</div>
<br/>

<div id="sample">

    <h4>Rich Text</h4>
    <textarea name="area1" cols="40" style="width: 100%"></textarea>
    <br/>

    <h4>Second Textarea</h4>
<textarea name="area2" style="width: 100%;">
	Some Initial Content was in this textarea
</textarea>
    <br/>

    <h4>Third Textarea</h4>
<textarea name="area3" style="width: 300px; height: 100px;">
	HTML <b>content</b> <i>default</i> in textarea
</textarea>
</div>

Upvotes: 2

Ram Segev
Ram Segev

Reputation: 2571

I change the code a little bit, start typing then press key down and tab You can use jquery ui for that

$( function() {
     var projects = [
      {
        value: "Column1",
        label: "col1"
      },
      {
        value: "Column2",
        label: "col2"
      },
      {
        value: "Column3",
        label: "col3"
      }
    ];
       $( "textarea" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( this ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
       // $( "textarea" ).val( ui.item.label );
       $( this ).val( ui.item.value );
        
 
        return false;
      }
    })
    
  } );
<html>
<head>
	<title>Custom Text Editor</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div id="menu"></div>

<div id="intro">
By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced.
</div>
<br /> 

<div id="sample">


<h4>Rich Text</h4>
<textarea  id="project" name="area1" cols="40"  style="width: 100%" ></textarea>
<br />

<h4>Second Textarea</h4>
<textarea name="area2" style="width: 100%;">
	Some Initial Content was in this textarea
</textarea>
<br />

<h4>Third Textarea</h4>
<textarea name="area3" style="width: 300px; height: 100px;">
	HTML <b>content</b> <i>default</i> in textarea
</textarea>
</div>

</body>
</html>

<script>

function myFunction() { var x = document.getElementById("a").value; document.getElementById("abc").innerHTML = x; }

</script>

Upvotes: 1

Related Questions