Ace: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ нСсколько Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² Ace для ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π² HTML-Ρ„ΠΎΡ€ΠΌΠ΅?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 17 ΠΎΠΊΡ‚. 2017  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: ajaxorg/ace

ΠŸΡ€ΠΈΠ²Π΅Ρ‚. Π― ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ace Editor для Π²Π΅Π±-прилоТСния, Π½ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½Ρ‹ Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ Π΄Π°Π½Π½Ρ‹Π΅ Π² ΡΠ΅Ρ€Π²Π΅Ρ€Π½ΡƒΡŽ систСму, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (Flask).

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π²Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π² Ace довольно просто, Π½ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π° тСкстовых ΠΏΠΎΠ»Π΅ΠΉ нСльзя ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ (насколько ΠΌΠ½Π΅ извСстно), поэтому я создаю Β«Π΄Π²Π°Β» Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° с ΠΎΠ΄Π½ΠΈΠΌ ΠΈ Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΈΠΌΠ΅Π½Π΅ΠΌ тСкстового поля. Насколько я понимаю, ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ Π² Ρ„ΠΎΡ€ΠΌΠ΅ Π²ΠΎ Flask, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠΌΠ΅Π½Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹, поэтому Π±ΡƒΠ΄Π΅Ρ‚ коллизия.

Π›ΡŽΠ±Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ имя тСкстовой области, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π΄Π²Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ «сущности» Π² Flask? Π’Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ JSON.

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ исходноС тСкстовоС ΠΏΠΎΠ»Π΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

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

ВсС 4 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ‚Ρ‹ имССшь Π² Π²ΠΈΠ΄Ρƒ ΠΏΠΎΠ΄ textarea names ? ace Π½Π΅ создаСт тСкстовыС области, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ΅.

@nightwing Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠ· Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Ace (ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ людьми), ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ Π² POST Ρ‡Π΅Ρ€Π΅Π· HTML-Ρ„ΠΎΡ€ΠΌΡƒ? Когда я ΠΈΠΌΠ΅Π» Π² Π²ΠΈΠ΄Ρƒ Β«ΠΈΠΌΠ΅Π½Π° тСкстовых областСй», я ΠΈΠΌΠ΅Π» Π² Π²ΠΈΠ΄Ρƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ html «имя», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² тСкстовых областях, Ρ‡Ρ‚ΠΎ позволяСт Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ тСкстовой области Π² бэкэнд-скриптС ΠΈ Π²Π½ΠΎΡΠΈΡ‚ΡŒ бэкэнд-измСнСния с запросами ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. πŸ€”

Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ исходноС тСкстовоС ΠΏΠΎΠ»Π΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

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

О, спасибо, Π½ΠΎΡ‡Π½ΠΈΠΊ! Π― ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΡŽ это ΠΏΠΎΠ·ΠΆΠ΅ ΠΈ Π΄Π°ΠΌ Π²Π°ΠΌ Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ я ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ :)

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ