How to load XML in ACE?

Question

UPDATE 1

Here is how I am currently loading text into my WT project.

wApp->require("ace.js");

//orignal XML, reads in incorrectly on one line
//std::string data = ReadFile("Q:\\settings.xml");

//XML after being formatted in notepad to look like xml, reads in correctly
//std::string data = ReadFile("Q:\\settings.txt");

//changed extension back to XML, edited in notepad++ to XML format, reads in correctly
std::string data = ReadFile("Q:\\settings_from_text.xml");

//test xml tag, reads in correctly
//std::string data = "<tag_1>some tag content</tag_1>";

//test xml tag with newline, reads in incorrectly on one line, doesnt read newline
//std::string data = "<tag_1>some tag content</tag_1>\n<tag_1>some tag content</tag_1>";

_ace_editor = new WText(data, Wt::PlainText);

//_ace_editor->setText(data);
_ace_editor->setInline(false);

// A WContainerWidget is rendered as a div
_ace_editor->resize(1000, 500);

std::string editor_ref = _ace_editor->jsRef(); // is a text string that will be the element when executed in JS

std::string command =
  editor_ref + "._ace_editor = ace.edit(" + editor_ref + ");" +
  editor_ref + "._ace_editor.setTheme(\"ace/theme/chrome\");" +
  editor_ref + "._ace_editor.getSession().setMode(\"ace/mode/xml\");";// +
  //editor_ref + "._ace_editor.setValue(\"" + data + "\");";

_ace_editor->doJavaScript(command);

Also, here is the ReadFile function

std::ifstream in(path, std::ios::in | std::ios::binary);
if(in)
{
  std::string contents;
  in.seekg(0, std::ios::end);
  contents.resize(in.tellg());
  in.seekg(0, std::ios::beg);
  in.read(&contents[0], contents.size());
  in.close();
  return(contents);
}
throw(errno);

ORIGINAL POST

I am trying to load some XML files into an Ace (http://ajaxorg.github.io/ace/#nav=about) editor that I embedded in a WT (http://www.webtoolkit.eu/wt?wtd=rqBfShGlNupXgK3M1sWOxUk1Loz3BsW0) page. The problem is that XML files for whatever reason have all their tags omitted from the load. Example: An XML file with the following content

<?xml version="1.0"?>
<settings>
    <tag_1>some tag content</tag_1>
    <tag_2/>
</settings>

will be loaded as

some tag content

I need the entire XML file as is, not just the contents of the tags.

After doing a bit of research, I have found quite a few other people on different forums asking the same thing but everything I have tried so far has not been working, which brings me here.

This includes setting the Ace mode to XML, trying to load the text in a different container before setting it to the ace window, changing the color schemes, and parsing a file in a different manner.

I am using visual studio 2010, and from debugging I can see that the file does get read in fully into a string with all the tags, but after it is set to the Ace window they are omitted.

Answer 1

XML fragments in XML... you can somehow expect that your browser will interpret them, unless properly escaped. Try this:

txt = new WText("<bla>something</bla>", Wt::PlainText);

which will escape all XML-ish characters in your text.

Wt's default (XHTMLText) will try to parse your input as XML, and if it succeeds filter possible XSS vectors from the XML before sending it as XML to the browser. If it can't parse the text as XML, it will escape XML-ish characters to avoid that a browser with a liberal parser would unintentionally execute attack vectors.

The third option (XHTMLUnsafeText) bypasses XSS filtering - dangerous, so only use it when you know that your text is safe and can not be influenced directly or indirectly by the user.

Answer 2

Regardless of whether you are putting it on a WT page or not, bottom line this is a javascript question as that is what the ACE editor is, a javascript tool. Since you have not shown anything at all about how you are loading the xml content, I can only speculate that you must be writing the contents of the xml file into the pages output source?? I'll bet if you view-source do you see the tags? Well if so you are going about it wrong. The xml file needs to be loaded via javascript/ajax as I will demonstrate with a fully working example below (edit the 'url' in the $.ajax call to location of an xml file on your server), which shows tags and all contents of the xml file. Added the jQuery library just for simplicity of the ajax request code. Enjoy!

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor"></div>

<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    var callback = function (data, status, xhr) {
        //data will be the xml returned from the server
        if (status == 'success') {
            var editor = ace.edit("editor");
            //apparently, only modes supported are 'html', 'javascript' & 'text'
            editor.getSession().setMode("ace/mode/html");
            editor.setValue(data);
        }
    };
    //using jQuery to fire off an ajax request to load the xml,
    //using our callback as the success function
    $.ajax(
        {
            url : '/testing/cd_catalog.xml',
            dataType : 'text', //explicitly requesting the xml as text, rather than an xml document
            success : callback
        }
    );

</script>
</body>
</html>

Actually, I take back some of what I said about the "must load via javascript/ajax", as I now realize you were just following ACE's example of putting the contents into the editor div beforehand. If you want to do that with html or xml content, the tags will be evaluated by the browser and not show up, unless you copy the editor div's innerHTML then instantiate the editor and then set it's value to the previously saved innerHTML. For example:

<div id="editor"><?xml version="1.0" encoding="ISO-8859-1">
<books>
<text>some text content</text>
<book/>
</books></div>

<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var txt = document.getElementById('editor').innerHTML;
    var editor = ace.edit("editor");
    //editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/html");
    editor.setValue(txt);
</script>