使用多個ui-ace代碼編輯器的滾動問題

使用ui-ace http://angular-ui.github.io/ui-ace/並嘗試在單個網頁中使用多個代碼編輯器。 plunker例子是這裏https://plnkr.co/GPictv3HdtGWW76fHw2l 使用多個ui-ace代碼編輯器的滾動問題

您應該能夠通過以下步驟來重現滾動已發行：

向下滾動到代碼editor4並選擇一些文本在editor4
向上滾動碼editor1和選擇在editor1
滾動回代碼editor4和一些文字，當你在代碼editor4單擊選擇或編輯文本的窗口自動向上滾動顯示代碼editor1

顯示編輯器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>

來源

2017-02-26 bfalz

研究此之後，還事實證明，在UI的王牌plunker演示使用，導致這種怪異的滾動行爲當使用多個代碼編輯器的ace.js版本。而不是使用您的演示<script src="https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js"></script>，你可以在這裏使用ace.js版本https://angular-ui.github.io/ui-ace/vendor/ace.js，甚至更好，你可以使用<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>

工作plunker在這裏https://plnkr.co/E7Dl2btYJFWpms0mdVE0

來源

2017-02-26 06:56:59 bfalz

使用多個ui-ace代碼編輯器的滾動問題

回答

相關問題