Ace: HTML形式で投稿するために複数のAceエディターを使用していますか?

作成日 2017年10月17日  ·  4コメント  ·  ソース: ajaxorg/ace

やあ。 WebアプリケーションにAceEditorを利用することを計画していますが、アプリケーション(Flask)に電力を供給するバックエンドシステムにデータを投稿する2つの異なるエディターが必要です。

Aceで2つのエディターを作成するのはかなり簡単ですが、問題は(私の知る限り)テキストエリア名を変更できないことです。したがって、同じテキストエリア名で「2つの」エディターを作成しています。 名前が同じであるため、私が見る限り、これらをフォームでFlaskに投稿することはできません。したがって、衝突が発生します。

textareaの名前を変更して、2つの別々の「エンティティ」として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では、HTMLフォームを介してPOSTで送信されたAce Editorからコンテンツを取得するにはどうすればよいですか(ユーザーが編集できるように、また編集する予定です)。 「textareanames」という意味では、textareasで使用できるhtml属性「name」を指します。これにより、バックエンドスクリプトでtextarea内の入力を取得し、クエリなどでバックエンドの変更を行うことができます。 🤔

このように送信する場合は、元のテキストエリアを保持し、その値を更新する必要があります

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