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

来源：互联网发布：数据安全案例编辑：程序博客网时间：2024/05/21 14:57

最近部门新功能需要使用代码编辑器组件,查看目前最好用的代码编辑器莫属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);

2 0