zoukankan      html  css  js  c++  java
  • 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 即为代码字符串
  • 相关阅读:
    recurse_array_change_key_case()递规返回字符串键名全为小写或大写的数组
    php循环创建目录
    ajaxFileUpload增加附加参数
    dedecms5.7 联动类型无法显示
    一些比较隐秘的OJ的网址
    Emacs 配置
    qwq
    233
    [八省联考2018]林克卡特树lct
    [APIO2014]序列分割
  • 原文地址:https://www.cnblogs.com/msp1992/p/7605983.html
Copyright © 2011-2022 走看看