1

我有两个文件 1)index.php 和 2)code.js

现在 index.php 中的代码如下

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://web.guru99.com/lib/codemirror.css" rel="stylesheet" />
<script type="text/javascript" src="code.js"></script>
<style type="text/css">
    .CodeMirror {
    border: 1px solid #eee;
    height: auto;
}
.CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}
</style>
</head>
<body>
Integer : whole numbers e.g. -3, 0, 69. The maximum value of an integer is platform-dependent. On a 32 bit machine, its usually around 2 billion. 64 bit machines usually have larger values. The constant PHP_INT_MAX is used to determine the maximum value.
<pre class="codeguru">say 'hi';</pre>
Let us now look at how PHP determines the data type depending on the attributes of the supplied data.
<pre class="codeguru">say 'hello';</pre>
Floating point numbers
<pre class="codeguru">say 'you r amazing';</pre>
Character strings
<pre class="codeguru">say 'i am fine';</pre>
</div>
<form class="hidden code-box" method="GET" name="sample">
<div dir="ltr"><textarea class="php" name="codeguru"></textarea></div>
<input type="submit" value="Run" onclick="execute();"/>
</br></br>
Output:</br></br>
    <textarea id="print-result" disabled="true" cols="77"></textarea></br>
</form></div>
</body>
</html>

和 code.js 文件包含代码如下

$(document).ready(function() 
{
    $('pre.codeguru').each(function() 
    {
            var pre = this;
            var form = $('form[name=sample]').clone();
            $(form).removeAttr('name');
            $(form).removeClass('hidden');
            $($(form).find('textarea')[0]).val($(pre).text());
            var id = $(pre).attr('id');
            $(form).find('div textarea[name=code]').first().attr('id', id);
        $(pre).replaceWith(form);
        });
        window.editors = [];
        $('textarea[name=codeguru]').each(function() 
        {
            window.editor = CodeMirror.fromTextArea(this, 
            {
                lineNumbers: true,
                matchBrackets: true,
                mode: "application/x-httpd-perl",
                tabMode: "shift"
             });
                editors.push(editor);
        });

});
function execute() {
            p5pkg.CORE.print = function(List__) {
                var i;
                for (i = 0; i < List__.length; i++) {
                  document.getElementById('print-result').value += p5str(List__[i])
                }
                return true;
            };
            p5pkg["main"]["v_^O"] = "browser";
            p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm";
            p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm";
            var source = editor.getValue();
            alert(source);
            var pos = 0;
            var ast;
            var match;
            document.getElementById('print-result').value = "";
            try {
                var start = new Date().getTime();
                var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
                var end = new Date().getTime();
                var time = end - start;
                // run
                start = new Date().getTime();
                eval(js_source);
                end = new Date().getTime();
                time = end - start;
            }
            catch(err) {
                //document.getElementById('log-result').value += "Error:\n";
                  }
        }

在我的代码中一切都运行良好。在 code.js 中 pre 标签被 textarea 替换，并且应该运行 textarea 中的代码，因为这个项目是在线 perl 编辑器。所以现在我的问题是我通过这段代码提醒了文本区域的值

var source = editor.getValue();
            alert(source);

但这会弹出空白。那么我必须做些什么来检索textarea的当前值？

4

1 回答 1

0

您在此代码中创建了多个编辑器。这些似乎存储在editors数组中。现在你想execute()通过单击一个按钮来执行，但你没有告诉 JS，你想提醒哪个编辑器值。

页面上第一个编辑器的值可以这样达到：

var source = editors[0].getValue();

editor.getValue()应该给你editors数组中最后一个编辑器的值。

由于每个编辑器都有一个单独的按钮，因此可以将editors数组中的编辑器索引传递给execute()函数。

首先，从按钮输入中删除onclick属性，然后：

之后$('pre.codeguru').each();，将事件监听器附加到按钮：

var n = 0;
$('input[type=button]').each(function () {
        $(this).click(function (x) {
            return function () {
                execute(x);
            };
        }(n++))
    }
);

并且在execute()：

function execute(idx) {
        ...
    var source = editors[idx].getValue();
    alert(source);
        ....    
}

更新

更新了小提琴代码以输出到相应的字段。

这是一个更新的现场演示。

于 2013-07-09T10:35:17.370 回答