关于CodeMirror组件间互相影响的缺陷问题

    最近部门新功能需要使用代码编辑器组件,查看目前最好用的代码编辑器莫属CodeMirror了,于是就开始使用起CodeMirror了,不过CodeMirror虽然功能强大,应用广,但是一旦出现了CodeMirror BUG就不好跟踪问题,一是官网在国外,看官网卡并且全是英文不好懂,二是关于写CodeMirror的博客都是比较浅显的一些功能.现在列举下最近遇到的困扰几天的多个CodeMirror组件会互相影响导致,其他的CodeMirror无法正常显示,需要点击下才出来的问题;话不多说直接把代码拿出来溜溜就知道问题了;

     首先列举的是没改之前的Angular js指定定义CodeMirror组件代码:

<script type="text/javascript">
	//js自定义文本域指令
	CUI2AngularJS.directive('cuiCode', ['$interpolate',function ($interpolate) {
	    return {
	        restrict: 'A',
	        replace: false,
	        require: 'ngModel',
	        scope: {
	            ngModel: '=',
	             id:'@'
	        },
	        template: '<textarea id="textarea_{{id}}" name="code"></textarea>',
	        link: function (scope, element, attrs, controller) {
	        	scope.safeApply = function (fn) {
	                var phase = this.$root.$$phase;
	                if (phase == '$apply' || phase == '$digest') {
	                    if (fn && (typeof(fn) === 'function')) {
	                        fn();
	                    }
	                } else {
	                    this.$apply(fn);
	                }
	            };
	            
	            var editor = null;
	            scope.$watch("ngModel",function(newValue, oldValue, scope){
	                if(editor==null){
	                    editor = CodeMirror.fromTextArea(document.getElementById("textarea_"+attrs.id), {
	                    	lineNumbers: true,
	    	                theme:'eclipse',
	    	                mode: 'text/x-sql',
	    	                lineWrapping: true,
	    	                extraKeys: {
	    	                	"F11": function(cm) {
	    	                        setFullScreen(cm, !isFullScreen(cm));
	    	                      },
	    	                      "Esc": function(cm) {
	    	                        if (isFullScreen(cm)) setFullScreen(cm, false);
	    	                      }
	    	                  }
	                    });
	                   
	                    //监听CodeMirror editor的变化
                       editor.on('change', function(instance, changeObj) {
	                      	scope.safeApply(function(){
	                      		//把editor的值设置到ngModel中。触发这里的$watch方法，把ng-model的值写到editor上。
	                      		scope.$parent.callbackUpdate(attrs.id, instance.getValue());
	                      	});
   	            	  });
	                }
	                //改变前获取光标位置
	               	var curPosition = editor.getCursor();
	               	editor.setValue(newValue);
	              	//改变后定位光标位置
	                editor.setCursor(curPosition);
	            },true);
	        }
	    }
	}]);

</script>

     HTML代码是:

<span cui_code id="mybatisSQL" name="mybatisSQL" ng-model="selectEntityMethodVO.queryExtend.mybatisSQL"></span>

     

     再看修改完善后的js指令代码:

<script type="text/javascript">
	//js自定义文本域指令
	CUI2AngularJS.directive('cuiCode', ['$interpolate',function ($interpolate) {
	    return {
	        restrict: 'A',
	        replace: false,
	        require: 'ngModel',
	        scope: {
	            ngModel: '=',
	             id:'@'
	        },
	        template: '<textarea id="textarea_{{id}}" name="code"></textarea>',
	        link: function (scope, element, attrs, controller) {
	        	scope.safeApply = function (fn) {
	                var phase = this.$root.$$phase;
	                if (phase == '$apply' || phase == '$digest') {
	                    if (fn && (typeof(fn) === 'function')) {
	                        fn();
	                    }
	                } else {
	                    this.$apply(fn);
	                }
	            };
	            
	            var editor = null;
	            scope.$watch("ngModel",function(newValue, oldValue, scope){
	                if(editor==null){
	                    editor = CodeMirror.fromTextArea(document.getElementById("textarea_"+attrs.id), {
	                    	lineNumbers: true,
	    	                theme:'eclipse',
	    	                mode: 'text/x-sql',
	    	                lineWrapping: true,
	    	                extraKeys: {
	    	                	"F11": function(cm) {
	    	                        setFullScreen(cm, !isFullScreen(cm));
	    	                      },
	    	                      "Esc": function(cm) {
	    	                        if (isFullScreen(cm)) setFullScreen(cm, false);
	    	                      }
	    	                  }
	                    });
	                   
	                    //监听CodeMirror editor的变化
                       editor.on('change', function(instance, changeObj) {
	                      	scope.safeApply(function(){
	                      		//把editor的值设置到ngModel中。触发这里的$watch方法，把ng-model的值写到editor上。
	                      		scope.$parent.callbackUpdate(attrs.id, instance.getValue());
	                      	});
   	            	  });
	                }
	                //改变前获取光标位置
	               	var curPosition = editor.getCursor();
	               	editor.setValue(newValue);
	              	//改变后定位光标位置
	                editor.setCursor(curPosition);
	                //此处解决多个codeMirror互相影响BUG需要异步刷新 
			var tmp = function() {
			    editor.refresh();
			}
			setTimeout(tmp, 50);
	            },true);
	        }
	    }
	}]);

</script>

      综上对比可知,如果出现了多个codeMirror相互影响的问题,需要在最后对codeMirror进行异步刷新处理即可,也就是代码段:

                        var tmp = function() {
			    editor.refresh();
			}
			setTimeout(tmp, 50);