Question

我正在尝试在w2ui文本区域内初始化codemirror。 textarea属于在弹出窗口内生成的表单。这是表单的代码：

var formConfig = {
    name: 'form_dataEdit',
    style: 'border: 0px; padding 5px',
    fields: [
        { name:'contents', type:'textarea', required: true, html:{attr:'style="width:'+width*0.7+'px;height:'+height*0.7+'px"'} },
    ],
    url: 'w2uiRecord_dataContents',
    recid: name,
    postData: {
        fileName : name
    },

    actions: {
        "Save": function () {
            w2ui.grid.lock('', true);
            $.ajax({
                url: "data_edit",
                type: "POST",
                datatype:"json",
                data: ({
                    "fileName":node.key,
                    "record" : JSON.stringify(this.record)
                }),
                success: function(response) {
                    w2ui.grid.unlock();
                    tab_objects.generate()
                }
            });
            $().w2popup('close');
            this.clear();
        }
    }
}

我已经测试了此代码，并且运行良好。但是，当我尝试通过添加以下事件来附加codemirror时，它将不起作用：

onRender: function (event) {
    event.onComplete = function () {
        console.log(this.fields[0].el) // undefined
        console.log(w2ui.form_dataEdit.fields[0].el) // undefined

        var codeMirror = CodeMirror.fromTextArea(
            this.fields[0].el,
            {
                'mode':{'name':'javascript'},
                'theme':'midnight'
            });
        codeMirror.setSize(width*0.7, height*0.7);
    }
}

我正在使用onComplete的onRender事件初始化代码镜像，以便在生成表单后立即调用它，但是w2ui.form_dataEdit.fields [0] .el（或this.fields [0] .el）未定义。如果生成表单后，如果我在控制台上手动执行此代码，则它将正常工作。

我想念什么？在调用codemirror之前，如何确保该窗体可用？

Answer 1

问题在于onRender表单已呈现/可用，但其中的文本区域未呈现/可用。解决方法是将事件侦听器添加到文本区域。如下定义表单字段时，可以在attr标记内完成此操作：

fields: [
    { name:'contents', type:'textarea', html: {attr:'onclick="initCodemirror()"'} }
]

其中initCodemirror（）是初始化textarea中的codemirror的函数。请注意，由于onload似乎无法正常工作，因此我正在使用onclick。

将Codemirror附加到w2ui textarea

1 个答案: