ACE.js code editor how to use beautify for HTML, CSS, JS
Problem:
When I get the HTML string in a text string and insert // set the value of the ACE.js editor and use the beautify to tidy / indent code, however it doesn't work, I was wondering if ext-beautify.js
that ACE.js is provided supports html, css, js beautifying ? what am i doing wrong here?
var htmlString = "<div class="row"><div class="col-sm-12"><span>chrome</span></div></div>";
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/html");
editor.session.setValue(htmlString);
var beautify = ace.require("ace/ext/beautify");
beautify.beautify(editor.session);
Output in the ACE.js editor
<div class="row"><div class="col-sm-12"><span>chrome</span></div></div>
But I need it to be
<div class="row">
<div class="col-sm-12">
<span>chrome</span>
</div>
</div>
Any suggestion or solution?
source to share
I also tried to decorate the ace editor extension and it didn't work for me either, the output was only on one line. I went through JS Beautifier and it works great. It has options to decorate with JS, HTML and CSS. You can use HTML module to decorate your code in Ace editor. I have added example code below:
HTML:
<div id="editor"></div>
JS:
var htmlString = '<div class="row"><div class="col-sm-12"><span>chrome</span></div></div><div class="row"><div class="col-sm-12"><span>mozilla</span></div></div>';
htmlString = html_beautify(htmlString);
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
editor.session.setValue(htmlString);
Launching Fiddle .
source to share