Ace: Menggunakan beberapa editor Ace untuk memposting dalam bentuk HTML?

Dibuat pada 17 Okt 2017 · 4Komentar · Sumber: ajaxorg/ace

Hai. Saya berencana menggunakan Ace Editor untuk aplikasi web, tetapi saya memerlukan dua editor berbeda yang memposting data ke sistem backend yang menjalankan aplikasi (Flask).

Cukup mudah untuk membuat dua editor di Ace, tetapi masalahnya adalah nama textarea tidak dapat diubah (sepengetahuan saya), jadi saya membuat "dua" editor dengan nama textarea yang sama. Ini tidak dapat diposting dalam bentuk ke Flask, sejauh yang saya bisa melihat, karena namanya sama, sehingga akan ada tabrakan.

Adakah ide tentang bagaimana mengubah nama textarea sehingga mereka dapat diposting sebagai dua "entitas" terpisah ke Flask tanpa masalah? Inputnya adalah objek JSON.

Sumber

SuperSajuuk

Komentar yang paling membantu

Anda perlu menyimpan textarea asli dan memperbarui nilainya saat mengirimkan seperti ini

<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 pada 19 Okt 2017

👍4

Semua 4 komentar

Hai, apa maksudmu dengan textarea names ? ace tidak membuat area teks yang dapat digunakan dalam formulir.

nightwing pada 17 Okt 2017

@nightwing Jadi bagaimana saya mendapatkan konten dari Editor Ace (sebagaimana dapat dan akan diedit oleh orang-orang) yang dikirimkan dalam POST melalui formulir HTML? Ketika saya bermaksud "nama textarea", saya merujuk ke atribut html "nama" yang dapat digunakan pada textareas, yang memungkinkan untuk mengambil input di dalam textarea dalam skrip backend dan melakukan perubahan backend dengan kueri dan sejenisnya.

SuperSajuuk pada 18 Okt 2017

Anda perlu menyimpan textarea asli dan memperbarui nilainya saat mengirimkan seperti ini

<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 pada 19 Okt 2017

👍4

Oh, terima kasih nightwing! Saya akan mencobanya nanti dan memberi tahu Anda bagaimana saya melanjutkan :)

SuperSajuuk pada 19 Okt 2017

Apakah halaman ini membantu?

0 / 5 - 0 peringkat