使用 CodeMirror 打造在线代码编辑器总结

最新推荐文章于 2024-07-02 14:51:33 发布

诛宵小或率宾归王

最新推荐文章于 2024-07-02 14:51:33 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： vue angularjs 原生插件 codemirror

本文链接：https://blog.csdn.net/tann888/article/details/114576557

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>

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

诛宵小或率宾归王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 CodeMirror 打造在线代码编辑器总结

1.什么是CodeMirror？不想听我BB的点击这里codeMirror官网。写这个的目的是因为之前项目里用到过 CodeMirror，觉得作为一款在线代码编辑器还是不错的，于是单独写篇博客，分享一下心得体会（ps：记性不好，回来好翻）；2.在这里呢我就直接上代码了，代码里是有注释的。1.原生代码版本<link rel="stylesheet" href="../lib/codemirror.css"> // 这个是最基础的css样式<script src=".
复制链接

扫一扫