ACE 编辑器：逐步显示内容

Question

我试图在 ACE 中逐步显示字符串，但我遇到了问题。

在Api documentation中，我可以找到一个函数“setValue”，但它取代了已经添加的内容。我想做的是逐渐显示我的字符串，就像有人写的那样，通过“addContent”方法添加内容。

以下代码片段展示了我如何实现 ace 编辑器：

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);
    }
 };

如果有人能启发我，因为我真的卡住了。

希望我说的很清楚

Answer 1

您可以使用 editor.session.insert，这是完整的 showText，按键之间有动态延迟

var showText = function (editor, message, index, delay) {
    if (index < message.length) {
        // insert at cursor
        editor.session.insert(editor.getCursorPosition(), message[index++]);
        // clear selection just in case there was something selected
        editor.selection.clearSelection();
        // make sure cursor is visible
        editor.renderer.scrollCursorIntoView();

        // adjust delay after typing a space
        if (/\s/.test(message[index - 1])) delay = 0
        setTimeout(function () {
            showText(editor, message, index, (delay + 1) || 0);
        }, 90 - 15 * Math.min(delay||0, 5));
    }
};
showText(editor, "\nmessage\nmy message", 0)

ACE 编辑器：逐步显示内容

ACE Editor: Display content progressively

javascript

ace-editor