Question

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

1）当我输入说“Col1”然后按空格后它应自动完成“第1列”

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

任何帮助都将深表感谢

BTW，使用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

因为您使用的是 nicEdit ，所以无法附加功能 onkeydown =＆＃34; myFunction（this，event）＆＃34; < / em> 指向 textarea name =＆＃34; area1＆＃34; 元素。

这是因为nicEdit会改变你的DOM并在所有运行的地方创建一个div contenteditable。

因此，您可以将keydown事件委派给父div 示例。

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 ，您可以使用其他方法获取插入符号位置，更改文本和更新。

示例：

＆＃13;
＆＃13;
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); } });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我稍微更改了代码，开始输入然后按下键和标签你可以使用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>

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

2 个答案: