Ace 编辑器 - 通过 POST 在服务器上保存/发送会话

Posted 2023-02-24

【中文标题】Ace 编辑器 - 通过 POST 在服务器上保存/发送会话

【英文标题】：Ace editor - save/send session on server via POST

【发布时间】：2015-03-31 04:59:54

【问题描述】：

我编写在线网页编辑器，我想将当前视图/工作保存在服务器上，以便将来恢复。我也想做多个标签。

我知道，那就是editor.getSession() 和editor.setSession()。

JS：

var editor = ace.edit("description");
editor.session.setMode("ace/mode/javascript");
editor.setTheme("ace/theme/tomorrow");
editor.setShowPrintMargin(false);
editor.setOptions(
    enableBasicAutocompletion: true,
    enableSnippets: true
);

现在我尝试通过 jQuery $.data() 将会话保存到元素：

$('#tab1').data('sesi',editor.getSession()); //save session
editor.setSession($('#tab2').data('sesi')); //restore other session

但是这段代码不起作用。当我尝试console.log(editor.session); 时，我在控制台中看到很多代码。

我尝试通过 POST 数据将session 发送到服务器，但在网络控制台中我只看到来自编辑器的代码，仅此而已...

$.ajax(
    type: "POST",
    url: "aaaaa.php",
    cache: false,
    timeout: 10000,
    data: "session="+ editor.session
);

如何将会话保存到变量或服务器？

【参考方案1】：

要将会话保存到服务器，您需要将其转换为可以传递给 json.Stringify 的普通对象。 session="+ editor.session 在您的示例中只是调用 session.toString ，这与 session.getValue 相同

var filterHistory = function(deltas) 
    return deltas.filter(function (d) 
        return d.group != "fold";
    );


sessionToJSON = function(session) 
    return 
        selection: session.selection.toJSON(),
        value: session.getValue(),
        history: 
            undo: session.$undoManager.$undoStack.map(filterHistory),
            redo: session.$undoManager.$redoStack.map(filterHistory)
        ,
        scrollTop: session.getScrollTop(),
        scrollLeft: session.getScrollLeft(),
        options: session.getOptions()
    


sessionFromJSON = function(data) 
    var session = require("ace/ace").createEditSession(data.value);
    session.$undoManager.$doc = session; // workaround for a bug in ace
    session.setOptions(data.options);
    session.$undoManager.$undoStack = data.history.undo;
    session.$undoManager.$redoStack = data.history.redo;
    session.selection.fromJSON(data.selection);
    session.setScrollTop(data.scrollTop);
    session.setScrollLeft(data.scrollLeft);
    return session;
;

现在获取会话状态

var session = editor.session
var sessionData = sessionToJSON(session)
$.ajax(
    type: "POST",
    url: "aaaaa.php",
    cache: false,
    timeout: 10000,
    data: JSON.stringify(sessionData)
);

并从服务器恢复它

var session = sessionFromJSON(JSON.parse(ajaxResponse))
editor.setSession(session)

【讨论】：

是2个小bug：data = sessionToJSON(session)改成data = sessionToJSON(editor.session)，data: JSON.stringify(editor.session)改成data: JSON.stringify(data)。

@a 用户，您不能只使用session，因为这是未定义的变量。 editor.session 是正确的。

抱歉有错别字。该代码假定您可以通过某种方式从editor.session 或其他传递会话的函数中获取session。

如果您使用的是无冲突版本，则全局 ace 与 ace.require("ace/ace") 相同

这是 ace 中的一个错误，我已经用解决方法更新了我的答案