Ace: 使用多个 Ace 编辑器以 HTML 形式发布？

创建于 2017-10-17 · 4评论 · 资料来源: ajaxorg/ace

你好。我计划将 Ace Editor 用于 Web 应用程序，但我需要两个不同的编辑器将数据发布到支持应用程序的后端系统（Flask）。

在 Ace 中创建两个编辑器相当简单，但问题是 textarea 名称无法更改（据我所知），因此我正在创建具有相同 textarea 名称的“两个”编辑器。据我所知，这些不能以表格的形式发布到 Flask，因为名称相同，因此会发生冲突。

关于如何更改文本区域的名称以便它们可以作为两个独立的“实体”发布到 Flask 的任何想法？输入是 JSON 对象。

资料来源

SuperSajuuk

最有用的评论

像这样提交时，您需要保留原始文本区域并更新其值

<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 于 2017-10-19

👍4

所有4条评论

嗨，你所说的textarea names是什么意思？ ace 不会创建可在表单中使用的文本区域。

nightwing 于 2017-10-17

@nightwing那么我如何从Ace Editor中获取内容（因为它可以并且将由人们编辑）通过HTML表单在POST中提交？当我的意思是“textarea 名称”时，我指的是可以在 textarea 上使用的 html 属性“name”，这使得可以在后端脚本中获取 textarea 内的输入，并通过查询等进行后端更改。 🤔

SuperSajuuk 于 2017-10-18

像这样提交时，您需要保留原始文本区域并更新其值

<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 于 2017-10-19

👍4

哦，谢谢夜翼！稍后我会尝试，让您知道我的进展情况：）

SuperSajuuk 于 2017-10-19

此页面是否有帮助？

0 / 5 - 0 等级

Ace: 使用多个 Ace 编辑器以 HTML 形式发布？

最有用的评论

所有4条评论

相关问题