[英]Codemirror editor is not loading content until clicked using angularjs
I have 3 buttons in tab1 and in tab2 i have 3 codemirror text area.我在 tab1 中有 3 个按钮,在 tab2 中有 3 个 codemirror 文本区域。 Now Acctually what i want is to update codemirror on each button click.现在,我真正想要的是在每次单击按钮时更新 codemirror。 And it is updating also but after i go in 2nd tab and click on codemirror area.它也在更新,但是在我进入第二个选项卡并单击 codemirror 区域之后。 I want it to be update on button click only.我希望它仅在按钮单击时更新。
Here is my code for codemirror.这是我的代码镜像代码。 Html Code html代码
<div id="aCDialog" class="col-lg-12">
<div class="comment-tabs">
<ul>
<li class="active" id=""><a role="tab" data-toggle="tab" data-target="#aButton">Buttons</a></li>
<li class="" id=""><a role="tab" data-toggle="tab" data-target="#aData">Data</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="aButton">
<button id="b1" ng-click="selectButton('f1')"></button>
<button id="b2" ng-click="selectButton('f2')"></button>
<button id="b3" ng-click="selectButton('f3')"></button>
</div>
<div class="tab-pane active" id="aData">
<ui-codemirror ui-codemirror="editorOptions" id="htmlRefresh" ui-refesh="true" ng-model="uiCode.htmlcodeModel"></ui-codemirror>
<ui-codemirror ui-codemirror-opts="jsEditorOptions" ui-refesh="true" ng-model="uiCode.jsACCodeModel"></ui-codemirror>
<ui-codemirror ui-codemirror-opts="cssEditorOptions" ui-refesh="true" ng-model="uiCode.cssCode"></ui-codemirror>
</div>
</div>
</div>
</div>
js Code js代码
$scope.editorOptions = {
mode: mixedMode,
lineNumbers: true,
lineWrapping : true,
autoRefresh:true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
};
$scope.jsEditorOptions = {
mode: 'text/javascript',
lineNumbers: true,
lineWrapping : true,
autoRefresh:true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
};
$scope.cssEditorOptions= {
mode: 'text/css',
lineNumbers: true,
lineWrapping : true,
autoRefresh:true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
};
$scope.selectButton = function(filename){
commonCall.getSelectedData(filename).success(function(data) {
$scope.uiCode.htmlcodeModel=data.html;
$scope.uiCode.jsACCodeModel=data.js;
$scope.uiCode.cssCode=data.css;
});
};
I know that it's an old thread but i ran into the same problem and this helped me: https://mycyberuniverse.com/how-to-fix-codemirror-editor-is-not-loading-content-until-clicked.html .我知道这是一个旧线程,但我遇到了同样的问题,这对我有帮助: https ://mycyberuniverse.com/how-to-fix-codemirror-editor-is-not-loading-content-until-clicked.html .
Basically, I had to call editor.refresh() like this:基本上,我不得不像这样调用 editor.refresh() :
var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
lineNumbers: true,
matchBrackets: true,
mode: 'application/x-httpd-php',
indentUnit: 4
});
setTimeout(function() {
editor.refresh();
},1);
Hope it helps someone with the same problem.希望它可以帮助有同样问题的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.