好巧在线前端调试工具

前言

昨天学了下原理，今天直接先做一个能用的成品出来。主要功能如下:


1.支持代码高亮
2.支持html自动补全
3.支持代码行数显示
4.支持实时刷新
5.支持代码缩进（折叠）
6.支持sublime各种快捷键(比如ctrl+D)

先来个动图看下最终效果：

imgn

整个代码我都传到了github

正文

以上所讲的功能我们只需要100来行代码实现,当然这是因为我们引用了非常实用的js库CodeMirror才能达到这个效果。CodeMirror许多大名鼎鼎的在线代码编辑器的基础库。而且它提供的功能非常多。不过它原生是不支持类似按下tab键自动补全html代码的,但是我们可以在github上找到专门为CodeMirror编写的emmet插件。

为了以后能够方便调用我将其做成了vue组件。调用时只需要传入类型就可以了。 比如 <editor type="html"></editor>

看代码之前建议先去将CodeMirror官网的例子都过一遍.

我们来看editor.vue里面关键代码:


 //选中目标节点
	  var _html = document.getElementById(that.type);
    //设置默认内容
	  var _value = {
	  	html:function(){
	  		return "<div class='test'>LinshuiZhaoying</div>"
	  	},
	  	css:function(){
	  		return ".test{color:red}"
	  	},
	  	javascript:function(){
	  		return "var LinshuiZhaoying = document.querySelectorAll('.test');for (var i = 0; i < LinshuiZhaoying.length; i++) { LinshuiZhaoying[i].addEventListener('click', function(event) { alert('ok')});}"
	  	}
	  };
    //根据传来的参数进行赋值
	  _html.value = _value[that.type]();

    //配置文件
	  var _config = {
	   // mode: "text/html",
	    mode: "text/html",
	    lineNumbers: true,
	    lineWrapping: true,
	    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
	    foldGutter: true,
	    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	    keyMap: "sublime",
	    profile: 'xhtml' /* define Emmet output profile */
	  };

	  var _modes = {
	  	html:function(){
	  		return "text/html"
	  	},
	  	css:function(){
	  		return "css"
	  	},
	  	javascript:function(){
	  		return "javascript"
	  	}
	  };
	  _config.mode = _modes[that.type]();

    //将其绑定到window下,方便后面调用
	  window["editor_"+that.type] = CodeMirror.fromTextArea(_html,_config);


	  emmetCodeMirror(window["editor_"+that.type], {
	      'Tab': 'emmet.expand_abbreviation_with_tab',
	      'Cmd-Alt-B': 'emmet.balance_outward'
	  });

    //设置界面风格
	  window["editor_"+that.type].setOption("theme", "mdn-like");

    //每当内容改变自动渲染
    window["editor_"+that.type].on('change', function () {
      that.render();
    });

渲染过程写在vue的methods里面，代码和昨天原理类似，只需要改动部分获取节点内容的代码即可。

结尾

这个只是能用版本，事实上在计划中它应该还有以下功能:


1.支持动态引入js库（本地列表集合）
2.支持sass,less
3.更好的界面
4.支持demo输出打包
5.支持本地demo管理

当然这些功能将在未来慢慢实现，先挖个坑。。。如果觉得还可以请在github点个star。

Table of Contents