如何使用codemirror啓用代碼提示？

Question

我正在使用codemirror來允許用戶輸入任何代碼，如css/html/js。

我需要啓用如果用戶輸入像在CSS模式下

div { 
padding- 
} 

應該提示用戶使用選擇列表中的可用選項，如

div { 
padding-top 
padding-left 
padding-right 
padding-bottom 
} 

喜歡的東西崇高編輯器codemirror。請參閱所附的圖像崇高汽車的暗示

這裏的演示是我的代碼：

<script src="codemirror-5.4/mode/javascript/javascript.js"></script> 
    <script src="codemirror-5.4/mode/css/css.js"></script> 
    <script src="codemirror-5.4/mode/htmlmixed/htmlmixed.js"></script> 
    <script src="codemirror-5.4/addon/display/fullscreen.js"></script> 
    <script src="codemirror-5.4/keymap/sublime.js"></script> 
    <script src="codemirror-5.4/addon/hint/show-hint.js"></script> 
    <script src="codemirror-5.4/addon/hint/css-hint.js"></script> 
    <script src="codemirror-5.4/addon/hint/javascript.js"></script> 

<h3>Editor</h3> 
    <div class="control-group"> 
    <label class="control-label" for="textarea2">HTML</label> 
    <div class="controls"> 
     <textarea class="code" name="code" id="codert" cols="40" rows="5" placeholder="Enter code here ..." style="width: 810px; height: 200px"> 
     </textarea> 
     </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label" for="textarea3">CSS</label> 
     <div class="controls"> 
      <textarea id="code" class="code" name="codeCSS" cols="40" rows="5" placeholder="Enter code here ..." style="width: 810px; height: 200px"> 
     </textarea> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="textarea3">javascript</label> 
     <div class="controls"> 
      <textarea id="codeJS" class="code" name="codeJS" cols="40" rows="5" placeholder="Enter code here ..." style="width: 0px; height: 0px"> 
      </textarea> 
     </div> 
    </div> 

JavaScript代碼codemirror

<script> 

    function loadCSS() { 
    var $head = $("#preview").contents().find("head");     
    $head.html("<style>" + editor.getValue() + "</style>"); 
}; 

function loadJS() { 
    var scriptTag = "<script>"+editorJS.getValue()+"<"; 
    scriptTag += "/script>"; 

    var previewFrame2 = document.getElementById('preview'); 
    var preview2 = previewFrame2.contentDocument || previewFrame2.contentWindow.document; 
    preview2.open(); 
    preview2.write(editor2.getValue()+scriptTag); 
    preview2.close(); 

    loadCSS(); 
}; 

var delay; 
// Initialize CodeMirror editor with a nice html5 canvas demo. 

// css editor 
var editor = CodeMirror.fromTextArea(document.getElementById('code'), { 
    lineNumbers: true, 
    styleActiveLine: true, 
    matchBrackets: true, 
    mode: "text/x-scss", 
    keyMap: "sublime", 
    theme: 'monokai', 
    autoCloseTags: true, 
    lineWrapping: true, 
    extraKeys: {"Ctrl-Space": "autocomplete"} 
}); 
editor.on("change", function() { 
    clearTimeout(delay); 

    delay = setTimeout(updatePreview, 0); 
}); 

function updatePreview() { 
    loadCSS(); 
} 
setTimeout(updatePreview, 0); 


var delay2; 
// Initialize CodeMirror editor with a nice html5 canvas demo. 
var editor2 = CodeMirror.fromTextArea(document.getElementById('codert'), { 
    lineNumbers: true, 
    styleActiveLine: true, 
    matchBrackets: true, 
    mode: "text/html", 
    keyMap: "sublime", 
    theme: 'monokai', 
    autoCloseTags: true, 
    lineWrapping: true, 
    extraKeys: {"Ctrl-Space": "autocomplete"} 
}); 
editor2.on("change", function() { 
    clearTimeout(delay2); 

    delay2 = setTimeout(updatePreview2, 0); 
}); 

function updatePreview2() { 
    var scriptTag = "<script>"+editorJS.getValue()+"<"; 
    scriptTag += "/script>"; 

    var previewFrame2 = document.getElementById('preview'); 
    var preview2 = previewFrame2.contentDocument || previewFrame2.contentWindow.document; 
    preview2.open(); 
    preview2.write(editor2.getValue()+scriptTag); 
    preview2.close(); 

    loadCSS(); 
} 
setTimeout(updatePreview2, 0); 


var delayJS; 
// Initialize CodeMirror editor with a nice html5 canvas demo. 
var editorJS = CodeMirror.fromTextArea(document.getElementById('codeJS'), { 
    lineNumbers: true, 
    styleActiveLine: true, 
    matchBrackets: true, 
    mode: 'javascript', 
    keyMap: "sublime", 
    theme: 'monokai', 
    autoCloseTags: true, 
    lineWrapping: true, 
    extraKeys: {"Ctrl-Space": "autocomplete"} 
}); 
editorJS.on("change", function() { 
    clearTimeout(delayJS); 

    delayJS = setTimeout(updatePreviewJS, 0); 
}); 

function updatePreviewJS() { 
    loadJS(); 
} 
setTimeout(updatePreviewJS, 0); 
</script> 

Answer 1

從code mirror website

function getCompletions(token, context) { 
    var found = [], start = token.string; 
    function maybeAdd(str) { 
    if (str.indexOf(start) == 0) found.push(str); 
    } 
    function gatherCompletions(obj) { 
    if (typeof obj == "string") forEach(stringProps, maybeAdd); 
    else if (obj instanceof Array) forEach(arrayProps, maybeAdd); 
    else if (obj instanceof Function) forEach(funcProps, maybeAdd); 
    for (var name in obj) maybeAdd(name); 
    } 

    if (context) { 
    // If this is a property, see if it belongs to some object we can 
    // find in the current environment. 
    var obj = context.pop(), base; 
    if (obj.className == "js-variable") 
     base = window[obj.string]; 
    else if (obj.className == "js-string") 
     base = ""; 
    else if (obj.className == "js-atom") 
     base = 1; 
    while (base != null && context.length) 
     base = base[context.pop().string]; 
    if (base != null) gatherCompletions(base); 
    } 
    else { 
    // If not, just look in the window object and any local scope 
    // (reading into JS mode internals to get at the local variables) 
    for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name); 
    gatherCompletions(window); 
    forEach(keywords, maybeAdd); 
    } 
    return found; 
} 

你按下ctrl +空格來啓用代碼提示。

Answer 2

您沒有發佈所有代碼，所以我可能是錯的，但一定要將show-hint.css樣式表添加到頁眉。

<link rel="stylesheet" href="../addon/hint/show-hint.css"> 

否則，提示只是不顯示，我假設自動完成功能不工作。

Answer 3

編織：http://kodeweave.sourceforge.net/editor/#bc08cb08dee7609bbe7df11e8a55f27a

有很多可以實現代碼提示/自動完成不同的方式。

var arrows = [37, 38, 39, 40] 

editor.on("keyup", function(cm, e) { 
    if (arrows.indexOf(e.keyCode) < 0) { 
    editor.execCommand("autocomplete") 
    } 
}) 

當然Codemirror對於代碼提示/自動完成有official documentation。
XML completion
HTML completion
JavaScript completion

您可以view the source的JavaScript的例子來學習如何使自己的提示了。