ACE 编辑器的光标位置重置到行首

Question

很简单。当我在编辑器中输入内容时，我输入的任何内容都会被反转，因为光标不断重置到行首。

假设我输入此内容，它会显示如下：

:siht ekil pu swohs ti,siht epyt yaS

当我按下回车键时，就会变成这样：

siht semoceb taht，retne sserp我nehw dna

：siht ekil pu swohs ti，siht epyt yaS

这是我的客户端的代码：

const editor = ace.edit("editor");
editor.setTheme("ace/theme/cobalt");
editor.getSession().setMode("ace/mode/javascript");

document.addEventListener("DOMContentLoaded", () => {
    const socket = io();
    const codingSpace = document.getElementById("codingSpace");
    const roomName = window.location.pathname.slice(1);
    let editorChangeInProgress = false;

    socket.emit("joinRoom", roomName);

    // Initialize ACE Editor
    const editor = ace.edit("editor");
    editor.setTheme("ace/theme/cobalt");
    editor.getSession().setMode("ace/mode/javascript");

    const codeRef = ref(db, "code");

    const fetchAndDisplayInitialData = async () => {
        try {
            const dataSnapshot = await get(child(codeRef, roomName));
            if (dataSnapshot.exists()) {
                const initialCode = dataSnapshot.val();
                codingSpace.value = initialCode;
                editor.setValue(initialCode, -1);
            }
        } catch (error) {
            console.error("Error fetching initial data:", error);
        }
    };
    fetchAndDisplayInitialData();

    const updateCode = (newCode) => {
        editorChangeInProgress = true;
        codingSpace.value = newCode;
        editor.setValue(newCode, -1);
        editorChangeInProgress = false;
        ace.edit("editor").moveCursorTo(-1, -1);
    };

    const onEditorChange = (event) => {
        if (!editorChangeInProgress) {
            const newCode = editor.getValue();
            updateCode(newCode);
            socket.emit("codeChange", { roomName, newCode });
            update(codeRef, { [roomName]: newCode });
        }
    };

    editor.getSession().on("change", onEditorChange);

    socket.on("codeChange", (newCode) => {
        if (!editorChangeInProgress) {
            updateCode(newCode);
        }
    });

    codingSpace.addEventListener("input", () => {
        const newCode = codingSpace.value;
        socket.emit("codeChange", { roomName, newCode });
        update(codeRef, { [roomName]: newCode });
    });
});

我已经尝试了半个小时来解决这个问题:(

Answer 1

editor.setValue()

默认情况下会重置选择（以及插入符号位置），因此您需要考虑到这一点：

var code = editor.getValue();
var selection = editor.selection.toJSON();
editor.setValue(code + "\nYeah");
editor.selection.fromJSON(selection);

可能还需要保存-恢复

session.getScrollLeft()

/

session.getScrollTop()

和折叠 (

session.getAllFolds()

)。

对于协作编程，您可能希望使用增量 (

editor.commands.on("afterExec", handler)

)，而不仅仅是同步编辑器内容 - 也许看看周围看看其他人通常是如何做到这一点的？

Answer 2

尝试将光标位置注册到初始设置json的全局变量中，并在编辑完成后设置缓存的光标位置。

//Global variable to store cursor position.
var cursorPosition = editor.aceEditor.getCursorPosition();

const options = {
            'mode': 'code',
            onChangeText: function (jsonString) {
                //new cursor position
                cursorPosition = editor.aceEditor.getCursorPosition();
                let json = JSON.parse(jsonString.replaceAll("^\"|\"$", ""));
                editor.set(json);
                //set the editor with the new cursor position while initial edit.
                editor.aceEditor.moveCursorToPosition(cursorPosition);
            }
        }

const editor = new JSONEditor(container, options)