codemirror 提示方法自定义及方法参数添加背景色

最新推荐文章于 2023-07-27 14:19:49 发布

原创最新推荐文章于 2023-07-27 14:19:49 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #typescript

本文介绍了如何在使用CodeMirror编辑器时，自定义代码提示方法并为方法参数添加背景色。通过修改codemirror.js和添加sql.js配置，以及应用特定样式，实现了在sql模式下对代码提示的优化。尽管已经解决了问题，但作者仍期待有更优的解决方案。


<sr-codemirror
  class="codemirror"
  :codemirror-Option="cmOption"
  :codemirror-Model="cmModel"
  @codemirrorChange="changeText"
  :codemirrorPlaceholder="'请输入'"
></sr-codemirror>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, computed } from 'vue';
import srCodemirror from '@/components/sr-codemirror/index.vue';
export default defineComponent({
  setup() {
    const cmOption = reactive({
        lineNumbers: true,
        extraKeys: {'Ctrl': 'autocomplete'},
        mode: {name: 'text/x-sql'},
        indentUnit: 2, // 缩进单位，默认2
        smartIndent: true, // 是否智能缩进
        tabSize: 4, // Tab缩进，默认4
        // 软换行
        lineWrapping: true, // 代码折叠
        styleActiveLine: true, // 当前背景行高亮
        matchBrackets:true, // 括号匹配
        // showCursorWhenSelecting: boolean 在选择时是否显示光标，默认为false。
        hintOptions: {// 自定义提示选项
          completeSingle: false, // 当匹配只有一项的时候是否自动补全
          tables: {
            'HexDumper': ['HexDumper()', 'getHexDumper(byte[])', 'getHexDumper(byte[], int)', 'getHexDumper(String)', 'hexStringToByte(String)', 'toByte(char)'],
            'Convertor': ['getHexDumper(byte[])', 'getHexDumper(byte[], int)', 'size'],
            score: ['zooao']
          },
          // hint: handleShowHint
        },
        theme: 'default' //主题
      });
    const cmModel = ref('select * from con_ss select * from con_ss11 HexDumper.getHexDumper(byte[]), getHexDumper(byte[], int) getHexDumper()');
    const changeText = (value:String)=>{
      console.log(value);
    };

    return {
      cmOption,
      cmModel,
      changeText,
    };
  },
  components: {
    srCodemirror,
  },
});
</script>

括号里面添加背景色

codemirror.js 添加

// 自己写得方法
StringStream.prototype.skipToNext = function (ch) {
  var found = this.string.indexOf(ch, this.pos);
  if (found > -1) {
    this.pos = found+1;
    return true
  }
};

sql.js 添加

// 自己写得方法
if (ch == '(' && stream.next() != ')') {
  //stream.skipTo(')');
  stream.skipToNext(')');
  return 'own-parameter';
}

样式

<style type="scss">
textarea.textarea-codemorror {
  border-width: 0;
  opacity: 0;
}
#CodeMirror {
  height: 100%;
  pre.CodeMirror-placeholder {
    color: #999;
  }
}
.cm-own-parameter{
  background-color: orange;
}

</style>

sql模式下让人头疼的要求有更好的方法请求告知谢谢！