Ace: рдПрдЪрдЯреАрдПрдордПрд▓ рдлреЙрд░реНрдо рдореЗрдВ рдкреЛрд╕реНрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХрд╛рдзрд┐рдХ рдРрд╕ рд╕рдВрдкрд╛рджрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛?

рдХреЛ рдирд┐рд░реНрдорд┐рдд 17 рдЕрдХреНрддреВре░ 2017  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: ajaxorg/ace

рдирдорд╕реНрддреЗред рдореИрдВ рдПрдХ рд╡реЗрдм рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЗ рд▓рд┐рдП рдРрд╕ рдПрдбрд┐рдЯрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдпреЛрдЬрдирд╛ рдмрдирд╛ рд░рд╣рд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╕рдВрдкрд╛рджрдХреЛрдВ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдЬреЛ рдПрдкреНрд▓рд┐рдХреЗрд╢рди (рдлреНрд▓рд╛рд╕реНрдХ) рдХреЛ рдкрд╛рд╡рд░ рджреЗрдиреЗ рд╡рд╛рд▓реЗ рдмреИрдХрдПрдВрдб рд╕рд┐рд╕реНрдЯрдо рдкрд░ рдбреЗрдЯрд╛ рдкреЛрд╕реНрдЯ рдХрд░рддреЗ рд╣реИрдВред

рдРрд╕ рдореЗрдВ рджреЛ рд╕рдВрдкрд╛рджрдХ рдмрдирд╛рдирд╛ рдХрд╛рдлреА рд╕рд░рд▓ рд╣реИ, рд▓реЗрдХрд┐рди рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдЯреЗрдХреНрд╕реНрдЯрд░реЗрд░рд╛ рдирд╛рдо рдирд╣реАрдВ рдмрджрд▓рд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ (рдореЗрд░реА рдЬрд╛рдирдХрд╛рд░реА рдореЗрдВ), рдЗрд╕ рдкреНрд░рдХрд╛рд░ рдореИрдВ рдПрдХ рд╣реА рдЯреЗрдХреНрд╕реНрдЯрд░реЗрд░рд╛ рдирд╛рдо рдХреЗ рд╕рд╛рде "рджреЛ" рд╕рдВрдкрд╛рджрдХ рдмрдирд╛ рд░рд╣рд╛ рд╣реВрдВред рдЬрд╣рд╛рдБ рддрдХ рдореИрдВ рджреЗрдЦ рд╕рдХрддрд╛ рд╣реВрдБ, рдЗрдиреНрд╣реЗрдВ рдлреНрд▓рд╛рд╕реНрдХ рдореЗрдВ рдПрдХ рд░реВрдк рдореЗрдВ рдкреЛрд╕реНрдЯ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛, рдХреНрдпреЛрдВрдХрд┐ рдирд╛рдо рд╕рдорд╛рди рд╣реИрдВ, рдЗрд╕ рдкреНрд░рдХрд╛рд░ рдЯрдХрд░рд╛рд╡ рд╣реЛрдЧрд╛ред

рдЯреЗрдХреНрд╕реНрдЯрд░реЗрд░рд╛ рдХреЗ рдирд╛рдо рдХреЛ рдмрджрд▓рдиреЗ рдХреЗ рддрд░реАрдХреЗ рдкрд░ рдХреЛрдИ рд╡рд┐рдЪрд╛рд░ рддрд╛рдХрд┐ рдЙрдиреНрд╣реЗрдВ рдмрд┐рдирд╛ рдХрд┐рд╕реА рд╕рдорд╕реНрдпрд╛ рдХреЗ рдлреНрд▓рд╛рд╕реНрдХ рдореЗрдВ рджреЛ рдЕрд▓рдЧ "рдЗрдХрд╛рдЗрдпрд╛рдВ" рдХреЗ рд░реВрдк рдореЗрдВ рдкреЛрд╕реНрдЯ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХреЗ? рдЗрдирдкреБрдЯ 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 ? рдРрд╕ рдРрд╕реЗ рдЯреЗрдХреНрд╕реНрдЯ рдХреНрд╖реЗрддреНрд░ рдирд╣реАрдВ рдмрдирд╛рддрд╛ рдЬрд┐рдирдХрд╛ рдЙрдкрдпреЛрдЧ рдкреНрд░рдкрддреНрд░ рдореЗрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХреЗред

@nightwing рддреЛ рдореИрдВ рдРрд╕ рд╕рдВрдкрд╛рджрдХ рд╕реЗ рд╕рд╛рдордЧреНрд░реА рдХреИрд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХрд░реВрдВ (рдЬреИрд╕рд╛ рдХрд┐ рдпрд╣ рд▓реЛрдЧреЛрдВ рджреНрд╡рд╛рд░рд╛ рд╕рдВрдкрд╛рджрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рд╕рдВрдкрд╛рджрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛) рдПрдХ HTML рдлреЙрд░реНрдо рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ POST рдореЗрдВ рд╕рдмрдорд┐рдЯ рдХрд┐рдпрд╛ рдЧрдпрд╛? рдЬрдм рдореЗрд░рд╛ рдорддрд▓рдм "textarea рдирд╛рдо" рд╕реЗ рдерд╛, рддреЛ рдореИрдВ 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 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

ketysek picture ketysek  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

dimroc picture dimroc  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

STRd6 picture STRd6  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

mafar picture mafar  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

christianbs picture christianbs  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ