optimize textarea editor by ace framework

apollo-portal/src/main/resources/static/app.html

@@ -44,7 +44,7 @@
                             应用Id</label>
                         <div class="col-sm-3">
                             <input type="text" class="form-control" name="appId" ng-model="app.appId">
-                            <small>(CMS上申请的App Id)</small>
+                            <small>（应用唯一标识）</small>
                         </div>
                     </div>
                     <div class="form-group" valdr-form-group>

apollo-portal/src/main/resources/static/config.html

@@ -372,6 +372,16 @@ <h4 class="modal-title">创建灰度须知</h4>
 
 <script src="vendor/clipboard.min.js" type="text/javascript"></script>
 
+<script src="vendor/ui-ace/ace.js" type="text/javascript"></script>
+<script src="vendor/ui-ace/ui-ace.min.js" type="text/javascript"></script>
+<script src="vendor/ui-ace/mode-properties.js" type="text/javascript"></script>
+<script src="vendor/ui-ace/mode-xml.js" type="text/javascript"></script>
+<script src="vendor/ui-ace/mode-yaml.js" type="text/javascript"></script>
+<script src="vendor/ui-ace/mode-json.js" type="text/javascript"></script>
+<script src="vendor/ui-ace/worker-json.js" type="text/javascript"></script>
+<script src="vendor/ui-ace/worker-xml.js" type="text/javascript"></script>
+
+
 
 <!--valdr-->
 <script src="vendor/valdr/valdr.min.js" type="text/javascript"></script>

apollo-portal/src/main/resources/static/scripts/app.js

@@ -11,7 +11,7 @@ var directive_module = angular.module('apollo.directive', ['app.service', 'app.u
 // 首页
 var index_module = angular.module('index', ['toastr', 'app.service', 'apollo.directive', 'app.util', 'angular-loading-bar']);
 //项目主页
-var application_module = angular.module('application', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar', 'valdr']);
+var application_module = angular.module('application', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar', 'valdr', 'ui.ace']);
 //创建项目页面
 var app_module = angular.module('create_app', ['apollo.directive', 'toastr', 'app.service', 'app.util', 'angular-loading-bar', 'valdr']);
 //配置同步页面

apollo-portal/src/main/resources/static/scripts/controller/config/ConfigNamespaceController.js

@@ -369,6 +369,7 @@ function controller($rootScope, $scope, toastr, AppUtil, EventManager, ConfigSer
 
     new Clipboard('.clipboard');
 
+
 }
 
 

apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js

@@ -63,7 +63,7 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
             scope.editRuleItem = editRuleItem;
 
             scope.deleteNamespace = deleteNamespace;
-            
+
             var subscriberId = EventManager.subscribe(EventManager.EventType.UPDATE_GRAY_RELEASE_RULES,
                                                       function (context) {
                                                           useRules(context.branch);
@@ -208,9 +208,9 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
                 }
 
                 function generateNamespaceId(namespace) {
-                    namespace.id = Math.random().toString(36).substr(2);  
+                    namespace.id = Math.random().toString(36).substr(2);
                 }
-                
+
                 function initPermission(namespace) {
 
                     PermissionService.has_modify_namespace_permission(
@@ -415,7 +415,7 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
             }
 
             function loadInstanceInfo(namespace) {
-                
+
                 var size = 20;
                 if (namespace.isBranch) {
                     size = 2000;
@@ -604,7 +604,7 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
                                                              scope.namespace.baseInfo.namespaceName,
                                                              branch.baseInfo.clusterName,
                                                              branch.rules
-                    )
+                )
                     .then(function (result) {
                         toastr.success('灰度规则更新成功');
 
@@ -798,14 +798,32 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
             function rollback(namespace) {
                 EventManager.emit(EventManager.EventType.PRE_ROLLBACK_NAMESPACE, {namespace: namespace});
             }
-            
+
             function deleteNamespace(namespace) {
-                EventManager.emit(EventManager.EventType.PRE_DELETE_NAMESPACE, {namespace: namespace});    
+                EventManager.emit(EventManager.EventType.PRE_DELETE_NAMESPACE, {namespace: namespace});
             }
 
+            //theme: https://github.com/ajaxorg/ace-builds/tree/ba3b91e04a5aa559d56ac70964f9054baa0f4caf/src-min
+            scope.aceConfig = {
+                $blockScrolling: Infinity,
+                showPrintMargin: false,
+                theme: 'eclipse',
+                mode: scope.namespace.format === 'yml' ? 'yaml' : scope.namespace.format,
+                onLoad: function (_editor) {
+                    _editor.$blockScrolling = Infinity;
+                    _editor.setOptions({
+                                           fontSize: 13,
+                                           minLines: 10,
+                                           maxLines: 20
+                                       })
+                }
+            };
+
             setTimeout(function () {
                 scope.namespace.show = true;
             }, 70);
+
+
         }
     }
 }