Question

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

目前我正在开发使用codemirror和ace编辑器的cms应用程序，无论是这一个还是那个，并且这取决于用户/操作员的偏好，当加载特定文档时，将会激活一次。

使用codemirror，我完全没有问题。一切都按预期工作。 Codemirror正在通过php的file_get_contents（）将文件直接加载到textarea中，而ace通过ajax加载内容（当前应用程序性质要求如此），困扰我的问题实际上是单个操作符/字符： ＆安培;

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

我个人唯一要消毒的是，在后端方面是textarea标签，它被包含在评论中，并在保存到文件时再次打开为php / html。

无论我尝试什么，无论选择哪种＆＃34;

Ace都会将＆amp; 字符一直转化为＆amp; 实体。模式＆＃34;选择（HTML，CSS，PHP，JS ......你的名字），我不想要这样的行为，我希望加载的代码保持完整，在doc / file load / open和doc / file save / write ，除非通常用户在编辑时不手动编辑或转换这些字符。

事实上，＆lt; 和＆gt; ＆＃34;做得很好＆＃34; .. ace不是＆＃34;害怕＆＃39; em＆＃34;，没有自动转换为＆amp; lt; 和＆amp; gt; - 只需＆amp; 。

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

如果重要的是，我从今天开始使用5天以上的ace min-noconflict （模式和主题以及缩小版）。

我知道自动转换＆＃34;有问题的字符＆＃34;是有原因的，但我确实知道如何通过我的自我处理这些，我需要的是完全禁用该功能。

我希望我对我的问题很清楚，这是JavaScript模式的一个问题示例：

预期结果

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

王牌结果

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

Answer 1

这个问题应该继续开放，因为我完成了我想要的。

当内容加载了所有适用的字符替换为其html entites并首先放入隐藏的textarea，而textarea.value传递给ace元素，加载ace后，所有字符都正确显示。现在，ace和codemirror的工作方式完全相同。

以下是工作王牌场景的示例。

通过PHP生成的HTML

在页面中间的某个地方，在表单中..

这里的Ace预标记，（ pre或div标记，两者都运行良好）请注意，没有＆amp;现在，但是，它现在被转换为与所有其他特殊字符一样好的存在

    <!-- 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请求，实际上是在这里创建了整个JAVASCRIPT，位于文档的底部

    <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

链接的css样式表的一部分

    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自定义配置

此文件以前由自定义dBmb.headScript功能提取（创建） *（在头部附加脚本标记），在加载的html文档的末尾，它是动态的。 PHP服务的内容，此脚本接受。

    // 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();

    }};

加载完所有内容后，这就是我在屏幕上显示的内容。

Ace Result

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

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

Ace编辑器和实体编码/解码

1 个答案: