ACE文本编辑器显示文本字符代替空格

时间:2014-03-21 02:39:15

标签: javascript ajax html5 whitespace ace-editor

我写了以下Javascript:

(function () {
    var computationModule = (function foo1(stdlib, foreign, heap) {
        "use asm";
        var sqrt = stdlib.Math.sqrt,
            heapArray = new stdlib.Int32Array(heap),
            outR = 0.0,
            outI = 0.0;

        function computeRow(canvasWidth, canvasHeight, limit, max, rowNumber, minR, maxR, minI, maxI) {
            canvasWidth = +canvasWidth;
            canvasHeight = +canvasHeight;
            limit = +limit;
            max = max | 0;
            rowNumber = +rowNumber;
            minR = +minR;
            maxR = +maxR;
            minI = +minI;
            maxI = +maxI;

            var columnNumber = 0.0,
                zReal = 0.0,
                zImaginary = 0.0,
                numberToEscape = 0;
            var columnNumberInt = 0;

            // Compute the imaginary part of the numbers that correspond to pixels in this row.
            zImaginary = +(((maxI - minI) * +rowNumber) / +canvasHeight + minI);
            // Iterate over the pixels in this row.
            // Compute the number of iterations to escape for each pixel that will determine its color.
            for (columnNumber = +0; + columnNumber < +canvasWidth; columnNumber = +(+columnNumber + 1.0)) {
                // Compute the real part of the number for this pixel.
                zReal = +(((maxR - minR) * +columnNumber) / +canvasWidth + minR);
                numberToEscape = howManyToEscape(zReal, zImaginary, max, limit) | 0;
                columnNumberInt = columnNumberInt + 1 | 0;
                heapArray[(columnNumberInt * 4) >> 2] = numberToEscape | 0;
            }
        }

        // Function to determine how many iterations for a point to escape.
        function howManyToEscape(r, i, max, limit) {
            r = +r;
            i = +i;
            max = max | 0;
            limit = +limit;

            var j = 0,
                ar = 0.0,
                ai = 0.0;
            ar = +r;
            ai = +i;
            for (j = 0;
                (j | 0) < (max | 0); j = (j + 1) | 0) {
                iteratingFunction(ar, ai, r, i)
                ar = outR;
                ai = outI;
                if (+(ar * ar + ai * ai) >= +(limit * limit))
                    return j | 0;
            }
            return j | 0;
        }

        // The iterating function defining the fractal to draw
        // r and i are the real and imaginary parts of the value from the previous iteration
        // r0 and i0 are the starting points
        function iteratingFunction(r, i, r0, i0) {
            r = +r;
            i = +i;
            r0 = +r0;
            i0 = +i0;
            computePower(r, i, 2);
            // Set the output from this function to t
            outR = +(r0 + outR);
            outI = +(i0 + outI);
        }

        // Compute the result of [r,i] raised to the power n.
        // Place the resulting real part in outR and the imaginary part in outI.
        function computePower(r, i, n) {
            // Tell asm.js that r, i are floating point and n is an integer.
            r = +r;
            i = +i;
            n = n | 0;

            // Declare and initialize variables to be numbers.
            var rResult = 0.0;
            var iResult = 0.0;
            var j = 0;
            var tr = 0.0;
            var ti = 0.0;

            // Declare and initialize variables that will be used only in the
            // event we need to compute the reciprocal.
            var abs = 0.0;
            var recr = 0.0;
            var reci = 0.0;

            if ((n | 0) < (0 | 0)) {
                // For n less than 0, compute the reciprocal and then raise it to the opposite power.
                abs = +sqrt(r * r + i * i);
                recr = r / abs;
                reci = -i / abs;
                r = recr;
                i = reci;
                n = -n | 0;
            }

            rResult = r;
            iResult = i;

            for (j = 1;
                (j | 0) < (n | 0); j = (j + 1) | 0) {
                tr = rResult * r - iResult * i;
                ti = rResult * i + iResult * r;
                rResult = tr;
                iResult = ti;
            }

            outR = rResult;
            outI = iResult;
        } // end computePower

        return {
            computeRow: computeRow
        };
    })(self, foreign, heap);

    // Return computationModule that we just defined.
    return computationModule;
})();

这个Javascript并没有什么特别不寻常,除了我想让我的Web应用程序在ACE文本编辑器(http://ace.c9.io/)中显示Javascript,以便用户可以在运行时修改代码。

我使用jQuery AJAX加载Javascript,然后将ACE Editor的内容设置为Javascript代码。用户修改代码后,可以单击按钮运行代码。 (这使用eval

我遇到的问题是ACE显示的是奇怪的字符而不是空格。ACE not working

奇怪的是,如果我尝试从ACE编辑器复制文本,奇怪的字符就会消失,空格也正常。此外,即使显示这些奇怪的字符,代码也能正常运行。

我还注意到使用Firefox时没有出现此问题,但Chrome和IE 11显示该问题。

最后,问题只发生在我将代码放在真实的Web服务器上时。它不会在我的开发环境中重现。

再看一下,我可以看到,这不仅仅是我通过AJAX加载的文本。即使我输入新的空格,也会出现更多文字字符!

可能出现什么问题,导致文字显示不正确?

以下是该应用程序的链接:http://danielsadventure.info/html5fractal/

1 个答案:

答案 0 :(得分:5)

在包含ace的脚本标记中使用charset="utf-8"

<script src="path/to/ace.js" charset="utf-8">

这可能与此有关:

  

如果发件人,媒体没有提供明确的字符集参数   &#34;文本&#34;的子类型type被定义为具有默认字符集   值&#34; ISO-8859-1&#34;通过HTTP接收时。字符集中的数据   除了&#34; ISO-8859-1&#34;或其子集必须标有   适当的charset价值。有关兼容性,请参见第3.4.1节   问题。

http://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.7.1

因此,传递给脚本的字符串的编码与ACE(或一般JS)所期望的编码不同,即UTF-8