键入内容后需要在文本编辑器中调整字段

Question

所以我正在制作一个文本编辑器，但我需要做的是

1) 当我输入 "Col1" 然后在我按下 space 后它应该自动完成 "Column 1"

我是 HTML 和 Js 的新手，看过一些关于 onkeyup 和监视器事件的示例，但它似乎不适合或者我可能会出错

任何帮助将不胜感激

顺便说一句，使用 NicEdit 作为基础

我的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>

Answer 1

我稍微更改了代码，开始输入然后按下键和 Tab 您可以使用 jquery ui

$( 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>

Answer 2

因为您正在使用 nicEdit 您无法附加函数 onkeydown="myFunction(this, event)"到文本区域名称="area1"元素。

这是因为 nicEdit 更改了您的 DOM 并创建了一个 div contenteditable，其中所有运行.

因此，您可以将 keydown 事件委托给父级 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);
   }
});

对于您的 myFunction，您可以使用不同的方法来获取插入符号位置、更改文本和更新。

例子：

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>

键入内容后需要在文本编辑器中调整字段

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

html

javascript

jquery

nicedit