在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自動完成功能

回答

相關問題