Ace: Using multiple Ace editors for posting in HTML form?

Created on 17 Oct 2017 · 4Comments · Source: ajaxorg/ace

Hi. I'm planning on utilising Ace Editor for a web application, but I need two distinct editors that post data to the backend system powering the application (Flask).

It is fairly simple to create two editors in Ace, but the problem is that the textarea names cannot be changed (to my knowledge), thus I'm creating "two" editors with the same textarea name. These can't be posted in a form to Flask, as far as I'm able to see, since the names are the same, thus there will be a collision.

Any ideas on how to change the name of the textarea so they can be posted as two separate "entities" to Flask without problem? The inputs are JSON objects.

Source

SuperSajuuk

Most helpful comment

You need to keep the original textarea and update its value when submitting like this

<form method="get" action="#">
    <div>
        <textarea name=t1></textarea>
    </div>
    <div>
        <textarea name=t2></textarea>
    </div>
    <div>
        <input type=submit>
    </div>
</form>
<div id=log></div>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<script>
    function createEditor(name) {
        // find the textarea
        var textarea = document.querySelector("form textarea[name=" + name + "]");

        // create ace editor 
        var editor = ace.edit()
        editor.container.style.height = "100px"
        editor.session.setValue(textarea.value)
        // replace textarea with ace
        textarea.parentNode.insertBefore(editor.container, textarea)
        textarea.style.display = "none"
        // find the parent form and add submit event listener
        var form = textarea
        while (form && form.localName != "form") form = form.parentNode
        form.addEventListener("submit", function() {
            // update value of textarea to match value in ace
            textarea.value = editor.getValue()
        }, true)
    }
    createEditor("t1")
    createEditor("t2")
</script>

nightwing on 19 Oct 2017

👍4

All 4 comments

Hi, what do you mean by textarea names? ace doesn't create textareas that can be used in the form.

nightwing on 17 Oct 2017

@nightwing So how do I get the content from the Ace Editor (as it can and will be edited by people) submitted in POST via an HTML form? When I meant "textarea names", I refer to the html attribute "name" that can be used on textareas, which makes it possible to take the input inside the textarea in a backend script and do backend changes with queries and the like. 🤔

SuperSajuuk on 18 Oct 2017

You need to keep the original textarea and update its value when submitting like this

<form method="get" action="#">
    <div>
        <textarea name=t1></textarea>
    </div>
    <div>
        <textarea name=t2></textarea>
    </div>
    <div>
        <input type=submit>
    </div>
</form>
<div id=log></div>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<script>
    function createEditor(name) {
        // find the textarea
        var textarea = document.querySelector("form textarea[name=" + name + "]");

        // create ace editor 
        var editor = ace.edit()
        editor.container.style.height = "100px"
        editor.session.setValue(textarea.value)
        // replace textarea with ace
        textarea.parentNode.insertBefore(editor.container, textarea)
        textarea.style.display = "none"
        // find the parent form and add submit event listener
        var form = textarea
        while (form && form.localName != "form") form = form.parentNode
        form.addEventListener("submit", function() {
            // update value of textarea to match value in ace
            textarea.value = editor.getValue()
        }, true)
    }
    createEditor("t1")
    createEditor("t2")
</script>

nightwing on 19 Oct 2017

👍4

Oh, thanks nightwing! I'll try that later and let you know how I get on :)

SuperSajuuk on 19 Oct 2017

Was this page helpful?

0 / 5 - 0 ratings