Ace: Vous utilisez plusieurs éditeurs Ace pour publier sous forme HTML ?

Créé le 17 oct. 2017  ·  4Commentaires  ·  Source: ajaxorg/ace

Salut. Je prévois d'utiliser Ace Editor pour une application Web, mais j'ai besoin de deux éditeurs distincts qui publient des données sur le système principal alimentant l'application (Flask).

Il est assez simple de créer deux éditeurs dans Ace, mais le problème est que les noms de zone de texte ne peuvent pas être modifiés (à ma connaissance), donc je crée "deux" éditeurs avec le même nom de zone de texte. Ceux-ci ne peuvent pas être publiés sous forme de Flask, pour autant que je sache, puisque les noms sont les mêmes, il y aura donc une collision.

Des idées sur la façon de changer le nom de la zone de texte afin qu'elles puissent être publiées en tant que deux "entités" distinctes sur Flask sans problème ? Les entrées sont des objets JSON.

Commentaire le plus utile

Vous devez conserver la zone de texte d'origine et mettre à jour sa valeur lors de la soumission comme celle-ci

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

Tous les 4 commentaires

Bonjour, que voulez-vous dire par textarea names ? ace ne crée pas de zones de texte pouvant être utilisées dans le formulaire.

@nightwing Alors, comment puis-je obtenir le contenu de l'éditeur Ace (car il peut et sera édité par des personnes) soumis en POST via un formulaire HTML ? Quand je voulais dire "noms de zone de texte", je fais référence à l'attribut html "nom" qui peut être utilisé sur les zones de texte, ce qui permet de prendre l'entrée à l'intérieur de la zone de texte dans un script backend et d'effectuer des modifications backend avec des requêtes, etc. 🤔

Vous devez conserver la zone de texte d'origine et mettre à jour sa valeur lors de la soumission comme celle-ci

<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, merci Nightwing ! J'essaierai plus tard et je vous dirai comment je m'en sors :)

Cette page vous a été utile?
0 / 5 - 0 notes