Javascript 如何使用codemirror启用代码提示？

我使用codemirror允许用户键入任何类似css/html/js的代码

如果用户在css模式下键入类似的内容，我需要启用

div {
 padding-
}

它应该提示用户从列表中选择可用选项，如

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

类似于使用codemirror的sublime编辑器。请参阅所附的图片，了解升华自动提示的演示

这是我的密码：

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

编辑
HTML
CSS
javascript

代码镜像的JavaScript代码

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

函数loadCSS（）{
var$head=$（“#预览”）.contents（）.find（“head”）；
$head.html（“+editor.getValue（）+”）；
}; 
函数loadJS（）{
var scriptTag=“”+editorJS.getValue（）+”；
var previewFrame2=document.getElementById（'preview'）；
var preview2=previewFrame2.contentDocument | | previewFrame2.contentWindow.document；
预览2.open（）；
preview2.write（editor2.getValue（）+scriptTag）；
预览2.close（）；
loadCSS（）；
};
无功延迟；
//用一个漂亮的html5画布演示初始化CodeMirror编辑器。
//css编辑器
var editor=CodeMirror.fromTextArea（document.getElementById（'code'）{
行号：对，
styleActiveLine：对，
是的，
模式：“文本/x-scss”，
关键地图：“崇高”，
主题：“莫诺凯”，
自动关闭标签：正确，
换行：对，
外键：{“Ctrl空格”：“自动完成”}
});
关于（“更改”，函数（）{
清除超时（延迟）；
延迟=设置超时（updatePreview，0）；
});
函数updatePreview（）{
loadCSS（）；
}
setTimeout（updatePreview，0）；
var delay2；
//用一个漂亮的html5画布演示初始化CodeMirror编辑器。
var editor2=codemirr.fromTextArea（document.getElementById（'codert'）{
行号：对，
styleActiveLine：对，
是的，
模式：“文本/html”，
关键地图：“崇高”，
主题：“莫诺凯”，
自动关闭标签：正确，
换行：对，
外键：{“Ctrl空格”：“自动完成”}
});
编辑器2.on（“更改”，函数（）{
clearTimeout（delay2）；
delay2=设置超时（updatePreview2，0）；
});
函数updatePreview2（）{
var scriptTag=“”+editorJS.getValue（）+”；
var previewFrame2=document.getElementById（'preview'）；
var preview2=previewFrame2.contentDocument | | previewFrame2.contentWindow.document；
预览2.open（）；
preview2.write（editor2.getValue（）+scriptTag）；
预览2.close（）；
loadCSS（）；
}
setTimeout（updatePreview2，0）；
var-delayJS；
//用一个漂亮的html5画布演示初始化CodeMirror编辑器。
var editorJS=CodeMirror.fromTextArea（document.getElementById（'codeJS'）{
行号：对，
styleActiveLine：对，
是的，
模式：“javascript”，
关键地图：“崇高”，
主题：“莫诺凯”，
自动关闭标签：正确，
换行：对，
外键：{“Ctrl空格”：“自动完成”}
});
editorJS.on（“更改”，函数（）{
clearTimeout（delayJS）；
delayJS=setTimeout（updatePreviewJS，0）；
});
函数updatePreviewJS（）{
loadJS（）；
}
setTimeout（updatePreviewJS，0）；

来自

---

按ctrl+space可启用代码提示

您没有发布所有代码，因此我可能会出错，但请确保将

show hint.css

样式表添加到页面标题

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

否则，提示就不会显示，我假设自动完成功能不起作用。

Weave:

有很多不同的方法可以实现代码提示/自动完成

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

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

var箭头=[37,38,39,40]
编辑者：关于（“键控”，函数（cm，e）{
if（箭头索引of（e.keyCode）<0）{
editor.execCommand（“自动完成”）
}
})

当然，Codemirror具有代码提示/自动完成功能。

---

您也可以为javascript示例学习如何制作自己的提示。

这是针对javascript的。html函数可以在这里找到。您编写的代码是codemirror为演示提供的示例代码。但是，该功能不仅仅适用于该代码。顺便问一下，css自动提示怎么样？有什么想法吗？谢谢@帕克：我在回答中说，这是从网站上得来的。对css一无所知。谷歌集团对此展开了一场大讨论！我想这可能行得通，有机会投票吗？

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

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