1.什么是CodeMirror?
不想听我BB的点击这里codeMirror官网。
写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错的,于是单独写篇博客,分享一下心得体会(ps:记性不好,回来好翻);
2.在这里呢 我就直接上代码了,代码里是有注释的。
1.原生代码版本
<link rel="stylesheet" href="../lib/codemirror.css"> // 这个是最基础的css样式
<script src="../lib/codemirror.js"></script> // 最基础的js 也是核心 必要
<script>
var editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true // 显示行号
});
</script>
预览效果:
如果我想加个点击标签,增加个对应的标签高亮怎么办?我们只需要加上对应的js和css文件,包括主题,mode那些也是一样的。
<link rel="stylesheet" href="../lib/codemirror.css"> // 这个是最基础的css样式
<script src="../lib/codemirror.js"></script> // 最基础的js 也是核心 必要
<script src="../addon/fold/xml-fold.js"></script>
<script src="../addon/edit/matchtags.js"></script>
<script src="../mode/xml/xml.js"></script>
...
<div id="code"></div>
...
<script>
var editor = CodeMirror.(document.getElementById("code"), {
value: "<html>\n " + document.documentElement.innerHTML + "\n</html>",
mode: "text/html",
matchTags: {bothTags: true},
});
</script>
预览效果:
2.angularjs版本
// 控制器里的代码,网上好像还有个bower i angular-ui-codemirror 但是我这边bower一直失败,所以没有使用,就直接用requirejs引入使用了
function initEditor() {
// 先要加载需要的css
LazyLoad.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) {
// 加载我需要的js
initEditorCommon();
} 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);
});
}
<!-- html这样就行 -->
<div>
<div id="code" name="code"></div>
</div>
3.Vue版本
vue的有个npm包 vue-codemirror
npm install vue-codemirror --save
在vue组件里的引入相应的js和css就行了
<template>
<div>
<section class="head">
<span>示例</span>
</section>
<section class="main-box">
<div class="main-content">
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
size="medium"
label-width="100px"
class="demo-ruleForm"
>
...
<section>
<codemirror ref="chartOption" :value="ruleForm.htmlcode" :options="cmOptions"> </codemirror>
</section>
</section>
</el-form>
</div>
</section>
<section class="footer">
<el-button>取消</el-button>
<el-button>保存</el-button>
</section>
</div>
</template>
<script>
import { codemirror } from 'vue-codemirror'; // 引入组件
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/xml-fold';
import 'codemirror/addon/fold/indent-fold';
import 'codemirror/addon/fold/comment-fold';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/xml-hint';
import 'codemirror/addon/hint/html-hint';
import 'codemirror/addon/edit/matchtags.js';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/addon/selection/active-line';
import 'codemirror/mode/htmlmixed/htmlmixed';
import mixin from '../mixins/bugfix';
export default {
name: 'Example',
components: {
codemirror, // 声明组件
},
mixins: [mixin],
data() {
return {
cmOptions: {
mode: 'text/html', // 模式
lineNumbers: true, // 显示行号
lineWrapping: true, // 是否应滚动或换行以显示长行。默认为false(滚动)。
viewportMargin: Infinity, // 高度自动伸长
value: '', // 绑定值的内容
maxHighlightLength: Infinity, // 最大高度 无限
styleActiveLine: true, // 点击行数高亮
foldGutter: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
matchTags: { bothTags: true }, // 匹配标签
},
rules: {
...
},
};
},
computed: {
codemirror() {
return this.$refs.chartOption.codemirror;
},
},
mounted() {
...
},
methods: {
...
setV() {
this.codemirror.setValue('xxxxxxx'); // 设置值
},
getV() {
this.codemirror.getValue(); // 获取值
},
},
};
</script>
<style scoped lang="less">
// 注意有些样式 需要覆盖操作
/deep/ .CodeMirror {
min-height: 300px;
// border: 1px solid #d9d9d9;
height: auto;
}
/deep/ .CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
min-height: 300px;
}
</style>