code mirror 相关配置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了code mirror 相关配置相关的知识,希望对你有一定的参考价值。

之前做webIDE项目时用到codemirror 但是没有整理 ,这一次做的另一个项目 需要用到codemirror 尴尬的是,我忘记怎么用了。

因此,我这回重新学怎么用 并进行整理(vue项目引入codeMirror)

首先github上找codemirror项目 下载源码,看codeMirror/mode/下的目录 选择你需要用到的语言,打开该目录,然后查看index.html,看index.html引用了什么文件,然后将引入的文件放入自己的项目中

在想用的地方加上

<textarea id="code" name="code"></textarea>

然后在方法里 或者mounted里

 

初始化

this.editor = CodeMirror.fromTextArea(document.getElementById(‘code‘), {
lineNumbers: true, // 是否显示行号
matchBrackets: true,
mode: "xml", //xml的代码格式化规则
indentUnit: 4, //缩进单位,值为空格数,默认为2 
indentWithTabs: true, //在缩进时,是否需要把 n*tab宽度个空格替换成n个tab字符,默认为false 。
});
this.editor.setSize(‘auto‘,‘500px‘); //设置代码区大小 ‘宽度‘ , ‘高度‘



设置代码区代码内容
this.editor.setValue(content);    //content 即为代码字符串

 

以上是关于code mirror 相关配置的主要内容,如果未能解决你的问题,请参考以下文章

VS Code配置markdown代码片段

VS Code配置markdown代码片段

VS Code配置snippets代码片段快速生成html模板,提高前端编写效率

从零开始配置vim(27)——代码片段

从零开始配置vim(27)——代码片段

从零开始配置vim(27)——代码片段