从 textarea 轻弹到 ui-codemirror 框架
Posted
技术标签:
【中文标题】从 textarea 轻弹到 ui-codemirror 框架【英文标题】：Flick from a textarea to a ui-codemirror frame 【发布时间】：2017-07-03 22:43:33 【问题描述】：我想做一个文件编辑器。通过以下代码 (JSBin)，我们在左侧列出了所有文件名，在右侧列出了它们的正文。我使用ui-codemirror 来设置文件主体的样式。
但是，当我们单击文件名并从一个文件名切换到另一个文件名时，有时会看到从文本区域快速滑动到代码镜像框架，这对于编辑器来说不是一个很好的体验.
有没有人有办法避免这个轻弹？另外，angularJS和ui-codemirror做编辑器是不是一个好方向？
<html ng-app="flapperNews">
<head>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.config(['$stateProvider', function ($stateProvider)
$stateProvider
.state('file',
template: '<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
controller: 'FileCtrl',
params: name: null
)
]);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state)
$scope.files = [
name: "index.html", body: "<html><body>index.html</body></html>" ,
name: "index.js", body: "the body of index.js" ,
name: "test.html", body: "the body of test.html" ];
]);
app.controller('FileCtrl', ['$scope', '$stateParams', function ($scope, $stateParams)
$scope.file = $scope.files.find(function (file) return file.name === $stateParams.name );
$scope.editorOptionsHTML = mode: 'text/html', lineNumbers: true, matchBrackets: true ;
]);
</script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ui-sref="file(name: file.name)">file.name</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：每次点击链接，都是新建编辑器，是开销操作。
The best approach is to create one editor and load the content on every click.
所以我删除了 ui-router 链接 (ui-sref) 和相关控制器
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state)
$scope.files = [
name: "index.html", body: "<html><body>index.html</body></html>" ,
name: "index.js", body: "the body of index.js" ,
name: "test.html", body: "the body of test.html" ];
$scope.editorOptionsHTML = mode: 'text/html', lineNumbers: true, matchBrackets: true ;
// for every click event it will load the content
$scope.go=function(file)
$scope.file=file;
]);
和身体
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ng-click="go(file)">file.name</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>
</div>
</div>
</body>
例如：JSBin
【讨论】：
我不知道为什么你的 codepen 不工作...这是我的 JSBin 有同样的想法...【参考方案2】：您可以通过将hide 类添加到textarea 来避免轻弹，如以下代码（jsbin）
template: '<textarea class="hide" ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
【讨论】：
感谢您的回答...现在好多了，我们再也看不到 从 textarea 到 ui-codemirror 的轻弹了。但是，当我们切换文件时（即使在具有相同内容的两个文件之间），我们仍然可以看到 不时的轻弹，我在 Chrome 和 Safari 中对其进行了测试。你有什么解决办法吗？ 我意识到改变像here这样的外部链接解决了这个问题......以上是关于从 textarea 轻弹到 ui-codemirror 框架的主要内容，如果未能解决你的问题，请参考以下文章