vue2如何使用codemirror

最新推荐文章于 2024-07-19 10:52:38 发布

LoveZJC12138

最新推荐文章于 2024-07-19 10:52:38 发布

阅读量2.5k

点赞数 5

文章标签： vue.js 前端 javascript codemirror

本文链接：https://blog.csdn.net/LoveZJC96/article/details/131513036

版权

文章介绍了在Vue3项目中遇到codemirror引用报错的问题，解决方案是安装codemirror的5.65.12版本和vue-codemirror的4.0.6版本。在main.js中引入所需模块，并在具体使用页面导入主题样式和模式JS。示例代码展示了在组件中配置codemirror，包括显示行号、设定语法模式等选项。

摘要由CSDN通过智能技术生成

1.准备

现在如果你直接

npm install vue-codemirror codemirror --save

那么你大概率在引用

import 'codemirror/lib/codemirror.css'

的时候会报错。因为在现在的版本是为vue3准备的。

那么你只要安装低版本的就行了

npm i codemirror@5.65.12
npm i vue-codemirror@4.0.6

下面就是如何使用：

2.使用

1.main.js

在入口函数中引用。

//codemirror
import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)

2.使用页面

<template>
  <codemirror ref="mycode" :value="curCode" :options="cmOptions" class="code">
                            </codemirror>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！


export default {
 name: 'ExecuteAction',
 data() {
        return {
            curCode: '测试',
            cmOptions: {
                // autorefresh: true,
                // tabSize: 4,
                // mode: 'text/x-properties',
                // theme: 'ayu-mirage',
                // line: true,
                // viewportMargin: Infinity, //处理高度自适应时搭配使用
                // highlightDifferences: true,
                // autofocus: false,
                // indentUnit: 2,
                // smartIndent: true,
                // readOnly: true, // 只读
                // showCursorWhenSelecting: true,
                // firstLineNumber: 1
                lineNumbers: true, // 显示行号
                mode: 'text/x-yaml', // 语法model
                gutters: ['CodeMirror-lint-markers'], // 语法检查器
                theme: "ambiance",
                lint: true, // 开启语法检查
                }

            }
    
        },
 components: {
        codemirror
    },


}

</script>


<style scoped>
.information-box>>>.CodeMirror {
    font-family: monospace;
    height: 71vh;
    direction: ltr;
}
</style>

完成！