当前位置：首页 > news >正文

记录angular使用codemirror的过程和遇到的问题

news 来源：原创 2024/5/9 22:39:14

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-config.component.html引入

<codemirror
     [config]="codeOption"
     [(ngModel)]="codeData">
</codemirror>

5 在add-rule-config.component.ts使用

import 'codemirror/lib/codemirror';
import 'codemirror/addon/selection/active-line';
// 使用json
import 'codemirror/mode/javascript/javascript';
// 显示校验
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/lint/lint';
// 校验json-lint
import '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，参考文档https://github.com/scniro/react-codemirror2/issues/21

1 npm install json-lint

2 在add-rule-config.component.ts 引入
   // 如果在弹框使用了codemirro的话,jsonlint需要放到父组件里，因为在弹框里取不到 window['jsonlint']这个属性（原因还没取找）
   import * as jsonlint from 'jsonlint-mod'
   window['jsonlint']=jsonlint

(3) 如果使用mode时，发现页面没有展示对应mode的效果，可能因为没有引入对应的文件，使用任何属性都需引入对应文件