code的中文用户手册API_CodeMirror_用户手册_Tun6
1 安装codemirror，ng2-codemirror，
npm install codemirror ng2-codemirror
2 在angular.json中architect引入一些文件
"architect": {"build" {"options": {"styles": [// codemirror的样式"node_modules/codemirror/lib/codemirror.css", "node_modules/codemirror/addon/fold/foldgutter.css",// 主题样式（需要那种主题引入对应的css）"node_modules/codemirror/theme/blackboard.css"// 校验的样式"node_modules/codemirror/addon/lint/lint.css"],"scripts": [// 引入codemirror.js文件"node_modules/codemirror/lib/codemirror.js"]}}}
3 在所在的module文件里引入CodemirrorModule
import { CodemirrorModule } form 'ng2-codemirror'@NgModule({imports: [ CodemirrorModule ]})
4 在add-rule-ponent.html引入
<codemirror[config]="codeOption"[(ngModel)]="codeData"></codemirror>
5 在add-rule-ponent.ts使用
import 'codemirror/lib/codemirror';import 'codemirror/addon/selection/active-line';// 使用jsonimport 'codemirror/mode/javascript/javascript';// 显示校验import 'codemirror/addon/hint/javascript-hint';import 'codemirror/addon/hint/show-hint';import 'codemirror/addon/lint/lint';// 校验json-lintimport 'codemirror/addon/lint/json-lint';export class AddRuleConfigComponent implements OnInit {codeOption: any = {mode: 'application/json',lineNumbers: true,// theme: 'blackboard',gutters: ['CodeMirror-lint-markers']lineWrapping: true,autofocus: true,tabSize: 2,lint: true,styleActiveLine: true};codeData = '{}'}
6 遇到的问题
（1）安装的codemirror之后没有lib和addon等文件，可能因为是版本问题，卸载codemiror，安装版本为5.62.3的codemirror
npm install codemirror@5.62.3
(2) 使用json校验时报window.jsonlint not defined, Codemirror JSON linting cannot run，安装json-lint，参考文档/scniro/react-codemirror2/issues/21
1 npm install json-lint2 在add-rule-ponent.ts 引入// 如果在弹框使用了codemirro的话,jsonlint需要放到父组件里，因为在弹框里取不到 window['jsonlint']这个属性（原因还没取找）import * as jsonlint from 'jsonlint-mod'window['jsonlint']=jsonlint
(3) 如果使用mode时，发现页面没有展示对应mode的效果，可能因为没有引入对应的文件，使用任何属性都需引入对应文件
