Как использовать beautify в Редакторе Ace?
Я нашел расширение beautify в Редакторе Ace, но я не вижу примеров его использования. Вот что у меня пока есть:
var beautiful = ace.require("ace/ext/beautify");
beautiful.beautify();
но я получаю ошибку:
Result of expression 'e' [undefined] is not an object.
4 ответов
похоже, что это работает:
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
var editor = ace.edit("editor"); // get reference to editor
beautify.beautify(editor.session);
требуется, чтобы вы передали сеанс редактора Ace в качестве первого параметра. В моем первоначальном вопросе я не передал никаких переменных, и это было ошибкой.
Примечание: он не работал хорошо, которые были упомянуты в примечаниях к выпуску расширений. Он не работал достаточно хорошо, чтобы использовать.
Я не смог заставить его работать
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
украшения всегда undefined
.
через некоторое время я сдался.
и использовал внешнюю библиотеку Beautify (ссылке)
function beatify() {
var val = editor.session.getValue();
//Remove leading spaces
var array = val.split(/\n/);
array[0] = array[0].trim();
val = array.join("\n");
//Actual beautify (prettify)
val = js_beautify(val);
//Change current text to formatted text
editor.session.setValue(val);
}
в файле beautify просто укажите beautify на windows (глобальный объект) после этого вы можете вызвать beautify из глобального объекта. доб-украсить.js в строке 330 добавить
window.beautify = exports;
затем вы можете использовать его.
vm.session = vm.editor.getSession();
beautify.beautify(vm.session);
была та же проблема. В итоге построение упрощенного метода prettify, что соответствует моим потребностям (которые не все на одной линии).
обратите внимание, что я использовал реагируют версии редактора Ace, но то же самое относится к JS. Он не поддерживает комментарии, поскольку мой сгенерированный код не содержит их, и вам может потребоваться развернуть метод, если вы хотите поддержать их.
const html = prettifyHtml('<div id="root"><div class="container"><div class="row"><div class="col-lg-6"><a href="#">hello there</a><p>What <strong>is</strong> this? <br /> yes</p></div><div class="col-lg-6"></div></div></div></div>');
const scss = prettifyScss('.container { strong {color:green; background-color:white; border:1px solid green; &:hover {cursor:pointer} } }');
<AceEditor
mode="html" // or "scss"
theme="github"
defaultValue={html} // or scss
onChange={this.onChange.bind(this)}
/>
HTML-код:
export const prettifyHtml = (html) => {
let indent = 0,
mode = 'IDLE',
inTag = false,
tag = '',
tagToCome = '',
shouldBreakBefore = false,
shouldBreakAfter = false,
breakBefore = ['p', 'ul', 'li'],
breakAfter = ['div', 'h1', 'h2', 'h3', 'h4', 'p', 'ul', 'li'];
return html
.split('')
.reduce((output, char, index) => {
if (char === '<') {
tagToCome = whichTag(html, index);
shouldBreakBefore = tagToCome && breakBefore.indexOf(tagToCome) >= 0;
mode = 'TAG';
inTag = true;
output += (shouldBreakBefore ? br(indent) : '') + '<';
} else if (char === '/' && mode == 'TAG') {
mode = 'CLOSING_TAG'
inTag = true;
output += '/';
} else if (char === ' ') {
inTag = false;
output += ' ';
} else if (char === '>') {
if (mode === 'TAG' || mode === 'CLOSING_TAG') {
indent += mode === 'TAG' ? +1 : -1;
shouldBreakAfter = breakAfter.indexOf(tag) >= 0;
inTag = false;
tag = '';
}
output += '>';
output += shouldBreakAfter ? br(indent) : '';
} else {
output += char;
if (inTag) {
tag += char;
}
}
return output;
}, '');
}
Сасс:
export const prettifyScss = (scss) => {
let indent = 0,
closeBefore = 0;
return scss
.split('')
.reduce((output, char) => {
closeBefore++;
if (char === '{') {
indent++;
output += '{' + br(indent);
} else if (char === '}') {
indent--;
output += br(indent) + '}' + (closeBefore > 3 ? '\n' : '') + _tabs(indent);
closeBefore = 0;
} else if (char === '.') {
output += br(indent) + '.';
} else if (char === ';') {
output += ';' + br(indent);
} else {
output += char;
}
return output;
}, '');
}
вспомогательные методы:
const _tabs = (number) => {
let output = '';
for (let cnt = 0; cnt < number; cnt++) {
output += '\t';
}
return output;
}
const br = (indent) => {
return '\n' + _tabs(indent);
}
export const whichTag = (html, index) => {
let inTag = true,
tag = '';
const arr = html.split('');
for (let i = index + 1; i < index + 10; i++) {
const char = arr[i];
if (char >= 'a' && char <= 'z' && inTag) {
tag += char;
} else if (char !== '/') {
inTag = false;
}
}
return tag;
}