Search code examples
javascriptexpressrequesthandlebars.jsace-editor

Unable to get text from ace.js-div in express.js


I'm using ace.js(https://github.com/ajaxorg/ace) to create a snippet-editor. The html looks like this:

<div id="editor" name="editor">{{ text }}</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
</script>

When I've changed the text, I would like to save to a mongoose-db. But I'm not able to get the text from the editor in my post-request. How do I get the text from the div when I call the save-request?

router.route("/home/save/:id")
    .post(function(request, response) {
        console.log(request.body.editor) // -> undefined
        console.log(request.body) // -> {}

    });

Solution

  • Sorry for the perhaps fussy question. Had a hard time explaining the problem. But if anyone for some reason get in the same situation, I solved it by making a kind of a lazy solution.

    I took inspiration from https://jsfiddle.net/deepumohanp/tGF6y/ and got the text from the ace-div and placed it in an input. Then I just got the input from the next request:

    {{> nav }}
    
    <div id="editor">{{ text }}</div>
    
    <form action="/home/save/{{ this.sessionId }}" method="post">
        <input type="text" value="" name="content" id="content">
        <button>Save</button>
    </form>
    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
    <script>
        var textarea = document.querySelector("#content");
    
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    
        console.log(textarea.value);
        console.log(editor.getSession().getValue());
    
        editor.getSession().on("change", function () {
            textarea.value = editor.getSession().getValue();
        });
    
        textarea.value = editor.getSession().getValue();
    </script>
    

    That way, the request.body.content returned with the text:

    router.route("/home/save/:id")
        .post(function(request, response) {
            console.log(request.body.content) // -> text
    
        });