javascript - Ace Editor and entity encoding/decoding -

javascript - Ace Editor and entity encoding/decoding -

i have searched across entire so. similar or exact topic , couldn't find *(or didn't saw) topic on issue that's bothering me. if duplicate, , solution exists, take apologies.

currently working on cms application uses both codemirror , ace editor, either 1 or one, , depends on user/operator preference 1 going fired 1 time when particular document loaded.

with codemirror, have no issues @ all. works expected. codemirror loading files via php's file_get_contents() straight textarea, while ace loading contents via ajax (current application nature demands so) , issue bothers me 1 single operator/character : &

i have checked methods wrote in backend , there no single sanitize method or function or preg or whatever.. implemented.

the thing beingness sanitized me personally, on backend side textarea tag, beingness wrapped within comment, , unwrapped 1 time again upon saving file php/html.

ace -aggressively- converting & character & entity time, no matter try, no matter selected "mode" chosen (html,css,php, js... name it) , don't want such behavior, want loaded code remain intact, on doc/file load/open , doc/file save/write, unless, normally, user doesn't edit or convert characters manually hand while editing.

in fact, < , > "doing fine" .. ace not "afraid of 'em", there no automatic conversion &lt; , &gt; - &.

i spent lot of time on ace api pages, , found nil (or didn't looked good), no particular "setthisthat.option: boolean", etc.. solve little issue.

if matters, using ace min-noconflict (modes , themes well, minified) version 5 days old since day.

i know automatic conversion of "problematic characters" there reason, know how handle self php, , need totally disable feature.

i hope clear regarding issue, here issue illustration javascript mode:

expected result

if (typeof(puretextreal) === "object" && acesetmode === 'php' ) { /* code */ }

ace result

if (typeof(puretextreal) === "object" && acesetmode === 'php' ) { /* code */ }

this question should remain open no longer accomplished wanted.

when content loaded applicable characters substituted html entites , placed within hidden textarea first, than, textarea.value passed ace element, upon ace loading, characters displayed correctly. both ace , codemirror working same.

here illustration of working ace scenario.

html generated via php

somewhere in middle of page, within form ..

ace pre tag here, (either pre or div tag, both working well) note there no & present, nonetheless, converted other specialcharacters 1 time when nowadays

<!-- class cloak hides element beingness 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 &quot;page&quot; &lt;/h1&gt; &lt;dl class=&quot;currentproject&quot;&gt; &lt;dt&gt;current page ..&lt;/dt&gt; &lt;dd&gt;.. under construction.&lt;/dd&gt; &lt;/dl&gt; </textarea> </div>

.. than, right before closing </body> tag

ace requests, entire javascript in fact created here, @ bottom of 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 phone call head dbmb.headscript(ui.u + 'ace/ace.js', true); // append ace-config phone call 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 custom config

this file pulled (created) custom dbmb.headscript function *(appends script tag head), @ end of loaded html document, , dynamic. php serves, 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(); }};

after loaded, on screen.

no console notices , errors on undefined.

and when post request altered - $_post['code-content'] save new/edited file.

javascript editor ace-editor