how to intigrate codemirror with zk textbox

answered 2013-03-07 08:37:15 +0800

benbai
2228 ● 6
http://www.zkoss.org

The code below works well for me

<?script type="text/javascript" src="resource/codemirror/lib/codemirror.js"?>
<?style href="resource/codemirror/lib/codemirror.css" type="text/css" ?>
<?script type="text/javascript" src="resource/codemirror/mode/javascript/javascript.js"?>
<zk xmlns:w="client">
    <window title="ZK Codemirror Test" border="normal">
        <div width="300px" height="250px" style="overflow: hidden;">
            <textbox id="tbx" rows="10">
                <attribute w:name="bind_"><![CDATA[
                    function (a, b, c) {
                        this.$bind_(a, b, c);
                        var wgt = this;
                        myCodeMirror = CodeMirror.fromTextArea(this.$n());
                        myCodeMirror.on('blur', function () {
                            var val = myCodeMirror.getValue();
                            wgt.$n().value = val;
                            wgt.fire('onChange', {value: val}, {toServer: true});
                        });
                    }
                ]]></attribute>
            </textbox>
        </div>
        <button label="test" onClick="alert(tbx.getValue());" />
    </window>
</zk>