javascriptangularjsangularjs-directivemonaco-editorui-codemirror

Use Monaco Editor in AngularJS 1.X


Because of this problem, I am trying to use another JavaScript-based source editor than CodeMirror and Ace, which can work with AngularJS 1.X. I am then investigating Monaco Editor.

I can well run this sample. But I don't know how to make it work with AngularJS 1.X.

For example, I want to bind ng-if, ng-model and ng-change to the editor, to decide when and what to display, and run a function if there is any change. With ui-codemirror, we could write with a directive:

<textarea ng-if="condition" ng-change="change(content)" ng-model="content" ui-codemirror="{ mode: 'application/json' }"></textarea>

So does anyone know if there is such ui- directive for Monaco Editor? Is there any workaround to achieve the same thing within angular framework?


Solution

  • I started to write a ui-monacoeditor by imitating ui-codemirror. It is not complete yet, but works for my limited use.