1
我試圖在ACE中逐步顯示一個字符串,但我遇到了一個問題。ACE編輯器:逐步顯示內容
在Api documentation中,我可以找到一個函數「setValue」,但它取代了已經添加的內容。我想要做的就是逐漸顯示我的字符串,就像有人寫道這樣通過「addContent」方法添加內容。
下面的代碼片段顯示瞭如何實現王牌編輯:
的HTML:
<pre id="editor"></pre>
的JavaScript:
$(document).ready(function() {
var editor = ace.edit("editor");
// Disable warn message in console. Advised by Ace developers.
editor.$blockScrolling = Infinity;
var options = {
animatedScroll: true,
autoScrollEditorIntoView: true,
fontSize: 16,
mode: "ace/mode/php",
scrollSpeed: 1,
showFoldWidgets: false,
showPrintMargin: false,
theme: "ace/theme/dreamweaver"
};
editor.setOptions(options);
getFileRaw(editor);
setInterval(function() { getFileRaw(editor); }, 60000)
});
功能 「getFileRaw」 讓我從檢索內容一個URL。在那裏,它是:
var getFileRaw = function(editor) {
var routes = [
{url: 'https://api.github.com/repos/IDCI-Consulting/GenealogyBundle/contents/Controller/ImageController.php', language: 'php'},
{url: 'https://api.github.com/repos/IDCI-Consulting/GenealogyBundle/contents/Repository/ElementRepository.php', language: 'php'},
{url: 'https://api.github.com/repos/IDCI-Consulting/ExtraFormBundle/contents/Controller/ApiController.php', language: 'php'},
{url: 'https://api.github.com/repos/IDCI-Consulting/SimpleMetadataBundle/contents/Resources/views/Form/fields.html.twig', language: 'twig'},
{url: 'https://api.github.com/repos/IDCI-Consulting/BrowserCapabilities/contents/js/codebarReader.js', language: 'javascript'}
];
// get a random file object
var file = routes[Math.floor(Math.random() * routes.length)];
$.ajax({
url: file.url,
method: "GET",
success: function(fileRaw) {
// Github api provides the fileraw's content encoded in base64 format. We need to use atob() function to decode it.
var content = atob(fileRaw.content);
editor.getSession().setMode("ace/mode/"+file.language);
// Here I will call a function 'showText' that display the string letter by letter.
// I need to use a method that add content instead of replace it
editor.getSession().setValue(content);
}
});
};
最後,這裏是我的功能逐步顯示我的字符串:
var showText = function (editor, message, index) {
if (index < message.length) {
editor.addValue(message[index++]); // the desired function
setTimeout(function() { showText(target, message, index); }, 500);
}
};
如果有人能夠告訴我,因爲我很堅持。
希望我在發言
非常感謝之間的動態延遲完成showText!這個功能似乎是很好的解決方案。 – BwaBwa