Ace: ¿Utiliza varios editores Ace para publicar en formato HTML?

Creado en 17 oct. 2017  ·  4Comentarios  ·  Fuente: ajaxorg/ace

Hola. Planeo utilizar Ace Editor para una aplicación web, pero necesito dos editores distintos que publiquen datos en el sistema de back-end que alimenta la aplicación (Flask).

Es bastante sencillo crear dos editores en Ace, pero el problema es que los nombres de las áreas de texto no se pueden cambiar (que yo sepa), por lo que estoy creando "dos" editores con el mismo nombre de área de texto. Estos no se pueden publicar en un formulario en Flask, por lo que puedo ver, ya que los nombres son los mismos, por lo que habrá una colisión.

¿Alguna idea sobre cómo cambiar el nombre del área de texto para que puedan publicarse como dos "entidades" separadas en Flask sin problemas? Las entradas son objetos JSON.

Comentario más útil

Debe mantener el área de texto original y actualizar su valor al enviarlo de esta manera

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

Hola, ¿qué quieres decir con textarea names ? ace no crea áreas de texto que se puedan usar en el formulario.

@nightwing Entonces, ¿cómo obtengo el contenido del Ace Editor (como puede y será editado por personas) enviado en POST a través de un formulario HTML? Cuando quise decir "nombres de área de texto", me refiero al atributo html "nombre" que se puede usar en áreas de texto, lo que hace posible tomar la entrada dentro del área de texto en un script de back-end y hacer cambios de back-end con consultas y similares. 🤔

Debe mantener el área de texto original y actualizar su valor al enviarlo de esta manera

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

¡Oh, gracias Nightwing! Lo intentaré más tarde y te contaré cómo me va :)

¿Fue útil esta página
0 / 5 - 0 calificaciones