Ace 编辑器和实体 encoding/decoding

Question

我搜索了整个 SO。对于相似或确切的主题，我找不到 *（或没有看到）关于困扰我的问题的主题。如果这是重复的，并且解决方案已经存在，请接受我的道歉。

目前我正在开发同时使用 codemirror 和 ace 编辑器的 cms 应用程序，这一个或那个，这取决于 user/operator 偏好特定文档时哪个将被启动一次已加载。

有了 codemirror，我完全没有问题。一切都按预期工作。 Codemirror 通过 php 的 file_get_contents() 将文件直接加载到 textarea 中，而 ace 通过 ajax 加载内容（当前应用程序自然要求如此），困扰我的问题实际上是一个单个 operator/character 即：&

我已经检查了我在后端编写的所有方法，没有一个单一的清理方法或函数或 preg 或任何我实现的..。

唯一被我个人清理过的东西，在后端是 textarea 标签，它被包装在评论中，并在保存到文件时再次打开包装为 php/html。

Ace 一直在积极地将 & 字符转换为 & 实体，无论我尝试什么，无论哪个selected "mode" 被选中（HTML，CSS，PHP，JS...你的名字）我不想要这样的行为，我希望加载的代码保留在 doc/file load/open 和 doc/file save/write 上完好无损，除非通常用户在编辑时不会手动编辑或转换这些字符。

其实<和>都是"doing fine"..ace不是"afraid of 'em"，有没有自动转换为 < 和 > - 只是 &.

我在 ace api 页面上花了很多时间，没有发现任何东西（或者看起来不太好），没有特别的 "setThisThat.option: boolean"，等等。可以解决这个小问题.

如果这很重要，我正在使用 ace min-noconflict（模式和主题，缩小版）从今天开始已经有 5 天了。

我知道 "problematic characters" 的自动转换是有原因的，但实际上我确实知道如何使用 php 自行处理这些问题，我需要做的就是完全禁用它功能。

我希望我已经清楚我的问题，这是 JavaScript 模式的问题示例：

预期结果

if (typeof(pureTextReal) === "object" && aceSetMode === 'php' ) { /* Code */ }

Ace 结果

if (typeof(pureTextReal) === "object" &amp;&amp; aceSetMode === 'php' ) { /* Code */ }

Answer 1

这个问题应该不再悬而未决，因为我完成了我想要的。

当内容加载时，所有适用的字符都替换为它们的 html 实体并首先放置在隐藏的文本区域内，然后 textarea.value 传递给 ace 元素，在 ace 加载时，显示所有字符正确。 ace 和 codemirror 现在工作完全一样。

这里是一个工作 ace 场景的例子。

HTML 通过 PHP

生成

在页面中间的某处，在表格内..

Ace pre tag here, (either pre or div tag, both are working well) Note that there is no & present, but nonetheless, it is converted now for good as all other specialcharacters once when it is present

    <!-- class cloak hides the element from being displayed -->
    <div id="code-wrapper" style="display: block;">
    <pre id="editor"></pre>
    <textarea id="code-content" name="code-content" class="cloak">
    &lt;h1&gt; Heading for &quot;Page&quot; &lt;/h1&gt;
        &lt;dl class=&quot;currentProject&quot;&gt;
            &lt;dt&gt;Current page ..&lt;/dt&gt;
            &lt;dd&gt;.. is under construction.&lt;/dd&gt;
        &lt;/dl&gt;
    </textarea>
    </div>

.. 比，就在关闭 </body> 标签之前

Ace requests, entire JAVASCRIPT in fact is created here, at the bottom of the documents

    <div class="cloak">
    <!-- Dynamic PHP generated paths -->
    <script type="text/javascript">var ui={u:'/path/to/library/', i:'/path/to/style/'};</script>

    <!-- Little framework --> 
    <script type="text/javascript" src="/path/to/dBmb.js" charset="utf-8"></script> 
    <script type="text/javascript"> // Dynamic values/elements
        var aceCode = 'editor', aceTHEME = 'dawn', aceSetMode = "php", hidden = 'code-content';

        // Append ace call to head
        dBmb.headScript(ui.u + 'ace/ace.js', true);

        // Append ace-config call to head
        dBmb.headScript(ui.u + 'dbmb.ace.config.js', true);
    </script>
    </div>

CSS

portion of linked css stylesheet

    div#code-wrapper {
        height: 100% !important;
        padding-top: 5px;
        border-top: 3px solid LightGrey;
    }

    div#code-wrapper * {
        transition: none !important;
    }

    pre#editor {
        display: block;
        width: auto;
        height: auto;
        text-align: initial;
        line-height: 1.5;
    }

    .ace_editor {
        font-size: 100% !important;
    }

    .cloak {
        display: none !important;
        max-width: 0 !important;
        max-height: 0 !important;
        position: absolute;
        z-index: -10;
        overflow: hidden;
        visibility: hidden;
    }

Ace 自定义配置

This file is previously pulled (created) by custom dBmb.headScript function *(appends script tag to the head), at the end of the loaded html document, and it is dynamic. What PHP serves, this script accepts.

    // dbmb.ace.config.js
    var wh, textarea, elementAce, safetext, editor;

    document.onreadystatechange = function () {
        if (document.readyState === "complete") {

            elementAce = document.getElementById(aceCode);
            textarea = document.getElementById(hidden);

            editor = ace.edit(elementAce);
            safetext = textarea.value;

            editor.setOptions({
                useWorker: false,
                showPrintMargin: false,
                behavioursEnabled: true,
                theme: "ace/theme/" + aceTHEME,
                mode: "ace/mode/" + aceSetMode
            });

            editor.$blockScrolling = Infinity;
            editor.session.setUseWrapMode(true);
            editor.session.setValue(safetext);

            var autoHeight = function() {
                wh = (window.innerHeight - 100);
                elementAce.style.height = wh + 'px';
                editor.resize();
            };

            window.onresize = autoHeight;

            editor.getSession().on('change', function(e) {
                textarea.value = editor.session.getValue();
            }); autoHeight();

    }};

加载所有内容后，这就是我在屏幕上看到的内容。

没有任何未定义的控制台通知和错误。

当 POST 请求被更改时 - $_POST['code-content'] 是我保存到 new/edited 文件的内容。

Ace 编辑器和实体 encoding/decoding

Ace Editor and entity encoding/decoding

javascript

editor

ace-editor