在线代码编辑器利器-codeMirror

2024年5月30日 241次阅读 来源: znmdcoco

申明

codeMirror是一款异常壮大的代码编辑插件，供应了异常雄厚的API，最近在项目顶用到了这款插件，做一个纪录。

官网

github地点

装置

  • 下载装置包 在github上直接download 或许 clone

  • npm 装置

        npm install --save  codemirror

引入

*手动引入外部的

<link href="./static/codemirror/lib/codemirror.css" rel="stylesheet" > // 必要
<script src="./static/codemirror/lib/codemirror.js"></script> // 必要
<script src="./static/codemirror/mode/sql/sql.js"></script> // 在线编辑的言语 sql
<script src="./static/codemirror/mode/sql/javscript.js"></script> // 在线编辑的言语 javascript

*npm引入（vue项目中）

import "codemirror/lib/codemirror.css" //必要
const CodeMirror = require("codemirror/lib/codemirror") // 必要
require("codemirror/mode/sql/sql") // 在线编辑的言语 sql
require('codemirror/addon/display/placeholder') // 须要运用placeholder属性

运用

  • 基础运用
<template>
    <textarea placeholder="比方select * from table" ref="myCodeMirror"></textarea>
</template>

<script>
import "codemirror/lib/codemirror.css" //必要
const CodeMirror = require("codemirror/lib/codemirror") // 必要
require("codemirror/mode/sql/sql") // 在线编辑的言语 sql
require('codemirror/addon/display/placeholder') // 须要运用placeholder属性

export default {
    ...
    mounted () {
        this.myCodeMirror = CodeMirror.fromTextArea(this.$refs['myCodeMirror'], {
            lineNumbers: true, // 是不是显现行数
            mode: 'text/x-pgsql', // 运用什么形式 text/x-pgsql是sql   javascript等
            showCursorWhenSelecting: true, // 当有选中的时刻是不是显现光标
            extraKeys: {'Ctrl': 'autocomplete'} // 自定义快捷键
        })
    }
}
</script>
  • 猎取输入内容 this.myCodeMirror.getValue()
  • 猎取选中内容 this.myCodeMirror.getSelection()

申明

官网供应了异常雄厚的API，当有什么问题是在github上发问，作者复兴的也很快，异常好用，赞一个

    原文作者：znmdcoco
    原文地址: https://segmentfault.com/a/1190000019028174
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞