python等 多种语言在线编辑器

codemirror
https://codemirror.net/index.html
官网

https://www.jianshu.com/p/b9d342264a09
vue 版

https://segmentfault.com/a/1190000017875558
带提示版

vue - 带提示

<template>
  <div class="in-coder-panel">
    <textarea ref="textarea" v-model="code" @onkeyup="showhint()"></textarea>
  </div>
</template>

<script type="text/ecmascript-6">
  // 引入全局实例
  import _CodeMirror from 'codemirror'

  // 核心样式
  import 'codemirror/lib/codemirror.css'
  // 引入主题后还需要在 options 中指定主题才会生效
  import 'codemirror/theme/cobalt.css'
  import "codemirror/lib/codemirror.css"
  // import "codemirror/addon/fold/foldgutter.css"
  import "codemirror/addon/hint/show-hint.css"
  // import "codemirror/addon/lint/lint.css"


  // 需要引入具体的语法高亮库才会有对应的语法高亮效果
  // codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
  // 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
  import "codemirror/lib/codemirror.js"

  import "codemirror/addon/comment/comment.js"

  import "codemirror/addon/selection/active-line.js"

  import "codemirror/keymap/sublime.js"

  import "codemirror/addon/hint/show-hint.js"
  // import "codemirror/addon/hint/python-hint.js"
  import "codemirror/mode/python/python.js" 

  import "codemirror/addon/fold/foldcode.js"
  import "codemirror/addon/fold/foldgutter.js"
  import "codemirror/addon/fold/brace-fold.js"
  import "codemirror/addon/fold/indent-fold.js"
  import "codemirror/addon/fold/comment-fold.js"

  import "codemirror/addon/edit/closebrackets.js"
  import "codemirror/addon/edit/matchbrackets.js"

  // 尝试获取全局实例
  const CodeMirror = window.CodeMirror || _CodeMirror

  export default {
    name: 'in-coder',
    props: {
      // 外部传入的内容，用于实现双向绑定
      value: String,
      // 外部传入的语法类型
      language: {
        type: String,
        default: null
      }
    },
    data () {
      return {
        // 内部真实的内容
        code: '',
        // 默认的语法类型
        // 编辑器实例
        coder: null,
        // 默认配置
        options: {
            mode: "python", // 语言模式
            theme: "cobalt", // 主题
            // keyMap: "sublime", // 快键键风格
            lineNumbers: true, // 显示行号
            smartIndent: true, // 智能缩进
            indentUnit: 4, // 智能缩进单位为4个空格长度
            indentWithTabs: true, // 使用制表符进行智能缩进
            lineWrapping: true, // 
            // 在行槽中添加行号显示器、折叠器、语法检测器
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"], 
            foldGutter: true, // 启用行槽中的代码折叠
            autofocus: true, // 自动聚焦
            matchBrackets: true, // 匹配结束符号，比如"]、}"
            autoCloseBrackets: true, // 自动闭合符号
            styleActiveLine: true, // 显示选中行的样式
        },
      }
    },
    mounted () {
      // 初始化
      this._initialize()
    },
    methods: {
      // 初始化
      _initialize () {
        // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
        this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options)
        // 编辑器赋值
        console.log(this.coder);
        // this.coder.set({options},'mode',`text/x-python`);
        this.coder.setOption('mode', `text/x-python`)
        this.coder.setValue(this.value || this.code)
        let vm = this;
        vm.coder.on("keypress", function() {
          // 显示智能提示
          vm.coder.showHint(); // 注意，注释了CodeMirror库中show-hint.js第131行的代码（阻止了代码补全，同时提供智能提示）
      });

        // 支持双向绑定
        this.coder.on('change', (coder) => {
          this.code = coder.getValue()

          if (this.$emit) {
            this.$emit('input', this.code)
          }
        })

        // 尝试从父容器获取语法类型
        if (this.language) {
          // 获取具体的语法类型对象
          let modeObj = this._getLanguage(this.language)

          // 判断父容器传入的语法是否被支持
          if (modeObj) {
            this.mode = modeObj.label
          }
        }
      },
    }
  }
</script>
<style type="text/css">
.in-coder-panel{
  margin-top: 50px;
}
</style>