hello new user here. But ran into a problem html element autocomplete won’t work for me as i use the following code:
CodeMirror.commands.autocomplete = function h(cm) {
var doc = cm.getDoc();
var POS = doc.getCursor();
var mode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(POS).state).mode.name;
if (mode == 'html') {
//html depends on xml
CodeMirror.showHint(cm, CodeMirror.hint.html);
} else if (mode == 'javascript') {
CodeMirror.showHint(cm, CodeMirror.hint.javascript);
}else if (mode == 'css') {
CodeMirror.showHint(cm, CodeMirror.hint.css);
}else if (mode == 'show') {
CodeMirror.showHint(cm, CodeMirror.hint.show);
}else if (mode == 'anyword') {
CodeMirror.showHint(cm, CodeMirror.hint.anyword);
}
};
the instance i made is following:
let editor = CodeMirror.fromTextArea(document.querySelector('#editor'), {
mode: 'htmlmixed',
theme: 'material-palenight',
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
indentUnit: 2,
tabSize: 2,
matchBrackets: true,
validationEvent: true,
highlightSelectionMatches: true,
extraKeys: {
".": "autocomplete",
"F11": function (cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function (cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
},
"Ctrl-J": "toMatchingTag"
},
addModeClass: true,
matchTags: {bothTags: true},
lineSeparator: "\n",
activeLine: true,
indentWithTabs: true,
smartIndent: true,
electricChars: true,
autoCloseTags: true,
autoCloseBrackets: true,
alignWithWord: true,
// foldGutter: true,
gutters: {
className: "CodeMirror-foldgutter",
indicatorOpen: "CodeMirror-foldgutter-open",
indicatorFolded: "CodeMirror-foldgutter-folded",
},
'rulers': 'rulers', `Preformatted text`
profile: 'xhtml'
});
kindly check this and let me know where i made the mistake