CodeMirror 一些简单配置


editor = CodeMirror.fromTextArea(document.getElementById("textarea"), {
            extraKeys: {                    //  配置按键
                "Ctrl": "autocomplete",  // 需要下面的synonyms配置
            },
            lineNumbers: true,              // 显示行号
            lineWrapping: true,             // 自动换行
            styleActiveLine: true,          // 选中行高亮
            mode: "text/javascript",
            theme: "idea",                  // 主题配置
            matchBrackets: true,            // 匹配括号
            hintOptions: {hint: synonyms},  // 自动提示配置
            gutters: ["CodeMirror-lint-markers"],
            lint: true,                     // 代码出错提醒
            indentUnit: 4,                  // 缩进配置(默认为2)
        });
        
        // 自动提示需要支持Pormise, 当当前数据的字符串满足comp中的某一个word时,会提示该word所在数组的词汇
        if (typeof Promise !== "undefined") {
            comp = [
			    ["here", "hither"],
			    ["asynchronous", "nonsynchronous"],
			    ["completion", "achievement", "conclusion", "culmination", "expirations"],
			    ["hinting", "advive", "broach", "imply"],
			    ["function","action"],
			    ["provide", "add", "bring", "give"],
			    ["synonyms", "equivalents"],
			    ["words", "token"],
			    ["each", "every"],
			  ];
        }
        
       // 提示功能的代码, 可以适当修改来满足自己的需求
	  function synonyms(cm, option) {
		  return new Promise(function(accept) {
		       setTimeout(function() {
		       var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
		       var start = cursor.ch, end = cursor.ch
		       while (start && /\w/.test(line.charAt(start - 1))) --start
		       while (end < line.length && /\w/.test(line.charAt(end))) ++end
		       var word = line.slice(start, end)
		       for (var i = 0; i < comp.length; i++) if (comp[i].indexOf(word) != -1)
		         return accept({list: comp[i],
		                        from: CodeMirror.Pos(cursor.line, start),
		                        to: CodeMirror.Pos(cursor.line, end)})
		       return accept(null)
		     }, 10)
		   })
		 }
		// 额外配置快捷键
		editor.addKeyMap({
            'Ctrl-S': function () {
                saveFunction();
            },
            'Ctrl-s': function () {
                saveFunction();
            },
            'Ctrl-f': autoFormatSelection,
        });

		//  自动格式化编辑器
        function autoFormatSelection() {
	        CodeMirror.commands["selectAll"](editor);
	        var range = getSelectedRange();
	        editor.autoFormatRange(range.from, range.to);
	        editor.commentRange(false, range.from, range.to);
	    }
	    // 获取编辑器中选中范围的的行号
	    function getSelectedRange() {
	        return {
	            from: editor.getCursor(true),
	            to: editor.getCursor(false)
	        }
	    }
       
        editor.replaceSelection("内容");   // 替换选中的字符串、在光标处插入字符
        editor.setSize('100%', '100%');     //设置代码框的长宽
        CodeMirror.commands["selectAll"](editor);    // 执行内置的命令
        CodeMirror.commands["goDocEnd"](editor)  //移动到文件尾部
		editor.refresh();   	    // 插件不显示文本内容,直到点击才出现


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM