Мне нужно сделать подсветку синтаксиса в angular. Я использую ui-codemirror, но не могу изменить размер по вертикали. CodeMirror открывается с помощью кендо-окна и динамически изменяет размер, когда я изменяю размер окна по горизонтали, но когда я хочу изменить размер окна по вертикали, он сохраняет ту же высоту, что и при его создании.
У меня есть директива angularjs, которая открывает окно кендо, это мой код
public link(scope, element: ng.IAugmentedJQuery): void {
scope.popupSettings = {
width: 765,
visible: false,
appendTo: '#sqlTextWindow',
}
scope.copyText = () => {
let inp = $("#hiddenCopyArea");
inp.select();
document.execCommand('copy');
}
scope.openWindow = () => {
$('#sqlTextWindow .k-window-title').empty().append(scope.data.windowTitle);
scope.editorOptions = this.codeMirrorHelper.getSqlEditorOptions(true);
scope.sqlTextWindow.center().open();
}
scope.$watch(() => { return scope.data; }, (n, o) => {
if (scope.data == null || scope.data ==='undefined')
return;
scope.openWindow();
var cm = angular.element(document.querySelector(".CodeMirror "))[0]["CodeMirror"];
setTimeout(function () {
cm.refresh();
}, 500);
})
}
И это HTML для этой директивы
<div>
<div id="sqlTextWindow"></div>
<textarea class="textarea-fake" readonly id="hiddenCopyArea" ng-model="data.currentSqlText"></textarea>
<div kendo-window="sqlTextWindow"
k-options="popupSettings">
<p>
<img class="copy" micon="Copy" ng-click="copyText()" alt="" />
</p>
<ui-codemirror id="queryTextArea"
name="queryTextArea"
rows="6"
class="k-textbox"
style="width: 100%;"
ui-codemirror-opts="editorOptions"
ng-model="data.currentSqlText" />
</div>
Я попытался установить высоту на 100%, как я сделал с шириной, но он не изменил размер и просто разбил окно