codemirror使用

JS使用

  • 使用bower下载

    bower i codemirror
    
  • 引入样式文件

    <link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">
    
  • 引入js文件

    <script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
    <script type="text/javascript" src="bower_components/codemirror/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="bower_components/codemirror/mode/xml/xml.js"></script>
    <script type="text/javascript" src="bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script type="text/javascript" src="bower_components/codemirror/mode/css/css.js"></script>
    
  • 文档结构

    <div class="container">
        <textarea class="marpad " tyle="width:70%;height:300px;" id="editor" >
            <!-- 放入编辑对应的文本 -->
        </textarea>
    </div> 
    
  • 初始化

    // mode:  "text/javascript",
    // mode: "text/css"
    window.onload = function(){
        var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
            lineNumbers: true,
            mode: "text/html"
        });
    }
    
    • mode需要注意的是,编辑器解析某种文本,必须引入mode下面对应的js文件,否则还是以纯文本的格式显示或者default
    • 若是mode: "text/html",则必须在htmlmixed.js文件引入之上引入xml.js,否则html是不能被正确解析显示的

vue-cli中使用

  • 下载

    npm i -S vue-codemirror
    
  • main.js中使用

    // codemirror 引入和使用
    import VueCodemirror from 'vue-codemirror'
    import 'codemirror/lib/codemirror.css'
    Vue.use(VueCodemirror)
    
  • .vue文件中使用

    • template部分,使用双向绑定的写法

      //v-model="infor.codeCss" 双向绑定的数据源
      //:options="cssOptions" codemirror的配置项
      <codemirror v-model="infor.codeCss" :options="cssOptions"></codemirror>
      
    • script部分

      //引入xml,html,css,js对应的js解析文件
      import 'codemirror/mode/javascript/javascript.js'
      import 'codemirror/mode/css/css.js'
      import 'codemirror/mode/xml/xml.js'
      import 'codemirror/mode/htmlmixed/htmlmixed.js'
      
      // 引入主题样式文件
      import 'codemirror/theme/monokai.css'
      
      //Vue实例中设置配置项
      data(){
          return {
              infor:{
                  codeCss:''
              },
              cssOptions: {
                  tabSize: 4,
                  mode: 'text/css',
                  theme: 'monokai',
                  lineNumbers: true,
                  line: true,
                }
          }
      }
      
posted @   NordonWang  阅读(455)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示