Ace: Usando vários editores Ace para postar em formato HTML?

Criado em 17 out. 2017  ·  4Comentários  ·  Fonte: ajaxorg/ace

Oi. Estou planejando utilizar o Ace Editor para um aplicativo da web, mas preciso de dois editores distintos que postem dados no sistema de back-end que alimenta o aplicativo (Flask).

É bastante simples criar dois editores no Ace, mas o problema é que os nomes das áreas de texto não podem ser alterados (que eu saiba), então estou criando "dois" editores com o mesmo nome de área de texto. Estes não podem ser postados em um formulário para o Flask, até onde eu posso ver, já que os nomes são os mesmos, então haverá uma colisão.

Alguma idéia de como alterar o nome da área de texto para que possam ser postadas como duas "entidades" separadas no Flask sem problemas? As entradas são objetos JSON.

Comentários muito úteis

Você precisa manter a área de texto original e atualizar seu valor ao enviar assim

<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>

Todos 4 comentários

Olá, o que você quer dizer com textarea names ? ace não cria textareas que podem ser usadas no formulário.

@nightwing Então, como faço para obter o conteúdo do Ace Editor (como pode e será editado por pessoas) enviado no POST por meio de um formulário HTML? Quando eu quis dizer "nomes de área de texto", me refiro ao atributo html "nome" que pode ser usado em áreas de texto, o que torna possível receber a entrada dentro da área de texto em um script de back-end e fazer alterações de back-end com consultas e afins. 🤔

Você precisa manter a área de texto original e atualizar seu valor ao enviar assim

<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>

Ah, obrigado asa noturna! Vou tentar isso mais tarde e depois te conto como me saio :)

Esta página foi útil?
0 / 5 - 0 avaliações