在CKeditor中实现JQuery UI自动完成功能

我想在CKEditor中实现JQuery UI自动完成功能，但它不工作。我看到了一些例子和解决方案，如果用户键入“＃”，则下拉列表显示出选项。我想要的是用户从文字列表中随时随地在文本编辑器中输入自动填充建议。我想要像CKeditor下的代码，而不是textarea。在CKeditor中实现JQuery UI自动完成功能

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Autocomplete - Multiple values</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <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> 
    <script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script> 
</head> 
<body> 

<div class="ui-widget"> 
    <!--<input id="tags" size="50">--> 
    <textarea id="tags"></textarea> 
</div> 
<script> 
// CKEDITOR.replace('tags'); 
    $(function() { 
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme" 
     ]; 
     function split(val) { 
      return val.split(/ \s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

     $("#tags") 
     // don't navigate away from the field on tab when selecting an item 
      .on("keydown", function(event) { 
       if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).autocomplete("instance").menu.active) { 
        event.preventDefault(); 
       } 
      }) 
      .autocomplete({ 
       minLength: 0, 
       source: function(request, response) { 
        // delegate back to autocomplete, but extract the last term 
        response($.ui.autocomplete.filter(
         availableTags, extractLast(request.term))); 
       }, 
       focus: function() { 
        // prevent value inserted on focus 
        return false; 
       }, 
       select: function(event, ui) { 
        var terms = split(this.value); 
        // remove the current input 
        terms.pop(); 
        // add the selected item 
        terms.push(ui.item.value); 
        // add placeholder to get the comma-and-space at the end 
        terms.push(""); 
        this.value = terms.join(" "); 
        return false; 
       } 
      }); 
    }); 
</script> 

</body> 
</html>

来源

2017-04-03 Soumyo Dey

如果你没有被自动完成库的限制，At.js写有特定标签的工作 - 使用表情符号@供用户参考，或:。关于如何将其与CKEditor集成，还有一个wiki page。

来源

2017-04-03 11:42:31 Mottie

我不希望它只启用引用。我想要的是，当你用代码编辑器编写类似的类。所以，当你输入你的关键字和东西的建议。 –

在CKeditor中实现JQuery UI自动完成功能

回答

相关问题