vue 中使用代码编辑器vue-codemirror

Vue-Codemirror 安装与使用指南

项目地址:https://gitcode.com/gh_mirrors/vu/vue-codemirror

1、安装（两个都需要安装）

npm i vue-codemirror@4.x --save

npm i codemirror@5.x --save

2、全局引入man.js 文件

import {codemirror} from 'vue-codemirror';

// 引入配置对应的文件（样式、主题、代码格式等）

import '@/utils/cm-setting.js';

// 注册使用

Vue.component('codemirror', codemirror);

3、样式主题文件cm-setting.js

// cm-setting.js
// 组件样式
// 主题
import 'codemirror/theme/3024-day.css'; // 引入主题样式，根据设置的theme的主题引入
import 'codemirror/theme/ayu-mirage.css';
import 'codemirror/theme/monokai.css';
import 'codemirror/theme/rubyblue.css';
import 'codemirror/theme/base16-light.css'; // 主题
import 'codemirror/mode/python/python.js'; // 引入你需要的模式
// html代码高亮
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import 'codemirror/theme/duotone-light.css';// ayu-dark
import 'codemirror/theme/ayu-dark.css'; // 主题idea
import 'codemirror/theme/idea.css';

// 语言模式
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/json-lint';
// bca-disable-next-line
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/theme/base16-dark.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/comment-fold';
import 'codemirror/addon/fold/markdown-fold';
import 'codemirror/addon/fold/xml-fold';
import 'codemirror/addon/fold/indent-fold';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/xml-hint';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/addon/hint/anyword-hint';
import 'codemirror/addon/search/match-highlighter';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/vue/vue.js';

4、页面中使用

<template>
 <codemirror
     id="top"
     ref="myCodeMirror"
     v-model="code" 
     :options="options"
 />
</template>

<script>
//data中
 code: ``,
            options: {
                mode: 'python',
                gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
                lineNumbers: true, // 是否显示行号
                theme: 'idea', // 主题 duotone-light rubyblue
                tabSize: 4, // 制表符的宽度
                indentUnit: 2, // 一个块应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。
                firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。
                readOnly: false, // 只读
                line: true,
                lint: true,
                lineWrapping: true,
                autofocus: true,
                autoCloseBrackets: true,
                smartIndent: true, // 上下文缩进
                styleActiveLine: true, // 高亮选中行
                viewportMargin: Infinity, // 处理高度自适应时搭配使用
                foldGutter: true, // 块槽
                hintOptions: {completeSingle: true},
                matchTags: {bothTags: true},
                matchBrackets: true,
                showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标
                styleSelectedText: true,
                autoRefresh: true,
                highlightSelectionMatches: {
                    minChars: 2,
                    trim: true,
                    style: 'matchhighlight',
                    showToken: false
                }
            },
</script>

效果图 主题颜色根据theme修改

主题效果概览地址 codemirror主题效果概览_codemirror theme-优快云博客