Question

使用ui-ace http://angular-ui.github.io/ui-ace/并尝试在单个网页中使用多个代码编辑器。 plunker示例在这里https://plnkr.co/GPictv3HdtGWW76fHw2l

您应该可以按照以下步骤重现滚动问题：

向下滚动到代码编辑器4并在editor4中选择一些文本
向上滚动到代码编辑器1并在editor1
滚动回代码编辑器4，当您单击代码编辑器4以选择或编辑文本时，窗口会自动向上滚动以显示代码编辑器1

显示编辑器1-4的主要代码在这里。如何防止自动滚动行为？如果用户单击其中一个代码编辑器来编辑或选择文本，则窗口不应滚动到其他代码编辑器。如果我将style.css中的高度更改为70px而不是500px，那么所有代码编辑器在最大化时都适合浏览器窗口，并且在选择或编辑不同代码编辑器中的代码时不会发生自动滚动问题。如果缩小浏览器窗口高度以使代码编辑器不适合窗口，那么当您尝试在不同的代码编辑器中选择或编辑代码时，滚动问题将再次出现。

<section>
<label>Editor1:</label>
<div ui-ace="{
  useWrapMode : false,
  showGutter: false,
  theme:'monokai',
  mode: 'javascript'
}" ng-model="editor1">Ace 1 here</div>
<br>
<label>Editor2:</label>
<div ui-ace="{
  useWrapMode : false,
  showGutter: false,
  theme:'monokai',
  mode: 'javascript'
}" ng-model="editor2">Ace 2 here</div>
<br>
<label>Editor3:</label>
<div ui-ace="{
  useWrapMode : false,
  showGutter: false,
  theme:'monokai',
  mode: 'javascript'
}" ng-model="editor3">Ace 3 here</div>
<br>
<label>Editor4:</label>
<div ui-ace="{
  useWrapMode : false,
  showGutter: false,
  theme:'monokai',
  mode: 'javascript'
}" ng-model="editor4">Ace 4 here</div>
</section>

Answer 1

经过进一步的研究后发现，ui-ace plunker演示使用的是ace.js版本，当使用多个代码编辑器时会导致这种奇怪的滚动行为。您可以在此处https://angular-ui.github.io/ui-ace/vendor/ace.js使用ace.js版本，或者更好地使用<script src="https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js"></script>

，而不是在演示中使用<script src="https://rawgithub.com/ajaxorg/ace-builds/master/src-min/ace.js"></script>

如果您将页面来源查看到http://angular-ui.github.io/ui-ace/并点击vendor/ace.js，则可以确认他们正在使用http://angular-ui.github.io/ui-ace/vendor/ace.js，而他们的plunker演示使用https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js

<!-- Le javascript
================================================== -->
<script src="assets/vendor/prettify.js"></script>
<script src="assets/vendor/angular.min.js"></script>
<script src="assets/vendor/ui-bootstrap-tpls.min.js"></script>
<script src="core/prettifyDirective.js"></script>
<script src="core/plunker.js"></script>
<script src="vendor/ace.js"></script>
<script src="vendor/theme-twilight.js"></script>
<script src="vendor/mode-markdown.js"></script>
<script src="vendor/mode-scheme.js"></script>
<script src="vendor/worker-javascript.js"></script>
<script src="dist/ui-ace.min.js"></script>

work plunker在这里https://plnkr.co/E7Dl2btYJFWpms0mdVE0

使用多个ui-ace代码编辑器滚动问题

1 个答案: