标签：vue codemirror Vue https 使用 import net true

官网

官网地址：https://codemirror.net/
官网是英文的，所以看不看没意思

特点

解决普通文本编辑器当中不能输入tab键、回车乱跳、皮肤难看的问题。
解决代码着色方案的问题。
和其他富文本编辑器不同，不具有文字排版功能。

使用

命令：

yarn add vue-codemirror

或者

npm install vue-codemirror --save

在vue文件中：

<codemirror class="code" v-model="code" :options="cmOptions"></codemirror>

<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/keymap/sublime' //sublime编辑器效果
import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
export default {
    components: {
        codemirror
    },
    data() {
        return {
            // 代码
            code: codes,
            cmOptions: {
                tabSize: 4,// tab的空格个数
                theme: 'dracula',//主题样式
                lineNumbers: true,//是否显示行数
                lineWrapping: true, //是否自动换行
                styleActiveLine: true,//line选择是是否加亮
                matchBrackets: true,//括号匹配
                mode: "vue", //实现javascript代码高亮
                readOnly: false//只读
            }
        }
    }
}

</script>

效果

使用选项

详细功能和api

https://blog.csdn.net/jlu_lei/article/details/80259697

功能：
https://blog.csdn.net/JLU_Lei/article/details/80259697

进阶
https://blog.csdn.net/senmage/article/details/103742854

标签：vue,codemirror,Vue,https,使用,import,net,true
来源： https://blog.csdn.net/wwppp987/article/details/118525478

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。