1.什么是CodeMirror？

不想听我BB的点击这里codeMirror官网。

写这个的目的是因为之前项目里用到过 CodeMirror，觉得作为一款在线代码编辑器还是不错的，于是单独写篇博客，分享一下心得体会（ps：记性不好，回来好翻）；

2.在这里呢 我就直接上代码了，代码里是有注释的。

1.原生代码版本

 // 这个是最基础的css样式
 // 最基础的js 也是核心 必要

预览效果：

如果我想加个点击标签，增加个对应的标签高亮怎么办？我们只需要加上对应的js和css文件，包括主题，mode那些也是一样的。

 // 这个是最基础的css样式
 // 最基础的js 也是核心 必要



......

预览效果：

2.angularjs版本

// 控制器里的代码，网上好像还有个bower i angular-ui-codemirror 但是我这边bower一直失败，所以没有使用，就直接用requirejs引入使用了function initEditor() {// 先要加载需要的cssLazyLoad.css(['./lib/codemirror/lib/codemirror.css','./lib/codemirror/addon/hint/show-hint.css','./lib/codemirror/theme/monokai.css','./lib/codemirror/addon/fold/foldgutter.css',],function() {if (typeof define === 'function' && define.amd) {// 加载我需要的jsinitEditorCommon();} else {LazyLoad.js(['./lib/requirejs/require'], function() {initEditorCommon();});}});}function initEditorCommon() {require(['./lib/codemirror/lib/codemirror', // 核心js'./lib/codemirror/addon/fold/foldcode', // 标签收起 解开js'./lib/codemirror/addon/fold/foldgutter','./lib/codemirror/addon/fold/brace-fold','./lib/codemirror/addon/fold/xml-fold','./lib/codemirror/addon/fold/indent-fold','./lib/codemirror/addon/fold/comment-fold','./lib/codemirror/addon/hint/show-hint', // 标记js'./lib/codemirror/addon/hint/xml-hint','./lib/codemirror/addon/hint/html-hint','./lib/codemirror/mode/xml/xml','./lib/codemirror/mode/javascript/javascript','./lib/codemirror/mode/css/css','./lib/codemirror/addon/selection/active-line', // 点击高亮当前行的线'./lib/codemirror/mode/htmlmixed/htmlmixed',], function(CodeMirror) {// 画出编辑器CodeMirror(document.getElementById('code'), $scope.editorOptions);});}

3.Vue版本

vue的有个npm包 vue-codemirror

npm install vue-codemirror --save

在vue组件里的引入相应的js和css就行了

其他属性可以点击此处查看 =>官网传送门

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！