vue3中使用codemirror6增加代码提示功能

这篇具有很好参考价值的文章主要介绍了vue3中使用codemirror6增加代码提示功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、安装依赖

// 安装codemirror、语言包、主题、自动补全

npm i codemirror

npm i @codemirror/lang-javascript

npm i @codemirror/autocomplete

npm i @codemirror/theme-one-dark

本人安装的版本是

"dependencies": {
    "@codemirror/autocomplete": "^6.0.0",
    "@codemirror/lang-javascript": "^6.0.2",
    "@codemirror/theme-one-dark": "^6.0.0",
    "codemirror": "^6.0.1",
    ...
},

2、创建编辑器文章来源地址https://www.toymoban.com/news/detail-612481.html

<template>
  <el-select
    placeholder="请选择分组"
    v-model="group"
    clearable
    @change="insertGroup"
  >
    <el-option
      v-for="dict in groupList
      :key="dict.id"
      :label="dict.dgName + '(' + dict.dgCode + ')'"
      :value="dict.dgCode"
    ></el-option>
  </el-select>
  <el-button @click="codeBeauty" style="margin-bottom: 0.5rem">代码格式化</el-button>
  <div id="coder"></div>
  <el-button type="primary" @click="submitForm" v-if="!testFlag">确 定</el-button>
</template>
<style scoped>
#coder{
  margin-top: 10px;
  width: 100%;
}
</style>
<script setup name="Command">
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
import { basicSetup, EditorView } from "codemirror";
import { autocompletion } from "@codemirror/autocomplete"; 

const { proxy } = getCurrentInstance();
const allKeyList = ref([]);
const groupList = ref([]);
const group = ref("");
const data = reactive({
  form: {},
});
const { form } = toRefs(data);

let editor = null;

// 获取自定义提示内容
function getCommandList() {
    groupList.value = [
        { id: '1', label: '分组1', value: 'group1' },
        { id: '2', label: '分组2', value: 'group2' },
    ]; 
    allKeyList.value = [
      { label: "@match", type: "keyword", apply: "match", detail: "match" },
      { label: "@hello", type: "variable", apply: "hello", detail: "hellodetail" },
      { label: "@magic", type: "text", apply: "⠁⭒*.✩.*⭒⠁", detail: "macro" },
    ];
}

// 代码美化
function codeBeauty() {
  editor.dispatch({
    changes: { 
        from: 0, 
        to: editor.state.doc.length, 
        insert:js_beautify(getCommanContent() || "") 
    },
  });
}
// 获取当前编辑器中的内容字符串
function getCommanContent() {
  let str = ""
  editor.state.doc.children.forEach((el,index) => {
    str += el.text.join("\n") + "\n"
  })
  return str.slice(0,-1);
}
// 初始化编辑器
function initCodeContent(){
  setTimeout(() => {
    if(!editor) {
      editor = new EditorView({
        doc: "Press Ctrl-Space in here...\n",
        extensions: [
          basicSetup,
          javascript(),
          oneDark,
          autocompletion({ override: [myCompletions] }),
          // EditorView.updateListener.of((v) => {
          //   console.log(v.state.doc.toString()) 
          // }),
        ],
        parent: document.getElementById("coder"),
        options: {
          lineNumbers: true,
          line: true,
          //ctrl-space唤起智能提示
          extraKeys: {
            Ctrl: "autocomplete",
          },
          //括号匹配
          matchBrackets: true,
        },
      });
    }
    editor.dispatch({
      changes: { 
        from: 0, 
        to: editor.state.doc.length, 
        insert: form.value.commandContent || "Press Ctrl-Space in here...\n" 
      },
    });
  }, 500);
}

// 自定义的代码不全,options为自定义内容,以@开头进行匹配
function myCompletions(context) {
  let word = context.matchBefore(/@\w*/);
  if (!word && !context.explicit) return null;
  return {
    from: word.from ? word.from : context.pos,
    options: allKeyList.value,
  };
}

// 选择分组添加到编辑其中
function insertGroup() {
  insertCommandContant(group.value);
  group.value = "";
}

// 外部输入内容,添加到编辑器当前光标(或选中内容)所在的位置
function insertCommandContant(insertContent) {
  editor.dispatch({
    changes: { 
        from: editor.state.selection.ranges[0].from, 
        to: editor.state.selection.ranges[0].to, 
        insert: insertContent 
    },
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$modal.loading("正在保存,请稍候...");
  form.value.commandContent = getCommanContent();
  addForm(form.value).then((response) => {
    proxy.$modal.msgSuccess("新增成功");
    proxy.$modal.closeLoading();
  }).catch((err) => {proxy.$modal.closeLoading();});
}


getCommandList();
initCodeContent();

</script>

到了这里,关于vue3中使用codemirror6增加代码提示功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端插件库之vue3使用vue-codemirror插件

    基于 CodeMirror ,适用于 Vue 的 Web 代码编辑器。 1.命令行安装 如果运行官网例子时, 报错: 可以在终端中安装对应文件, 解决问题 2.在需要的组件中配置 代码编辑区 支持代码编辑区, 满足白天/黑夜主题切换, 满足c++/python语言切换 不足, 没有满足代码提示 组件代码 vue3 新手作品

    2024年02月04日
    浏览(50)
  • 代码编辑器实践之vue-codemirror使用

    程序员用到 IDE 次数比较频繁,比如 vscode 、 idea 等,这些都是市场上比较流行的代码编辑器,拥有非常全面的功能。但是有时候在项目开发上也会用到代码编辑器,比如复杂的 ArrayObject 输入,或者需要用到用户交互的代码逻辑,或者需要用到json、yaml格式文件时的校验等等。

    2024年02月13日
    浏览(55)
  • Monaco Editor安装,vue3中使用,自定义高亮,自定义提示,附完整代码

    root中为高亮规则。[/curl/, {token: “string.escape”}]:表示 ‘curl’ 的高亮颜色为粉色 高亮颜色参考:https://microsoft.github.io/monaco-editor/monarch.html 效果: 效果: 1、父组件:HomeView.vue 父组件中传给子组件所需的组件高度、初始内容、高亮类型、是否只读 子组件通过editorChange方法给

    2024年02月16日
    浏览(51)
  • vue代码编辑器vue-codemirror的简单使用更改样式和切换主题等

    可以查看官网演示:vue-codemirror | Homepage 支持的语言mode:CodeMirror: Language Modes  支持的主题样式:CodeMirror: Theme Demo  开始安装和使用:  基础使用 注册全局组件 注册局部组件 使用组件 实现的效果: 编辑器默认高度是300px,如果想更改高度和字体大小:添加样式  更改主题的

    2024年02月13日
    浏览(40)
  • Vue3项目中在线编辑组件,codemirror-editor-vue3

    #安装 #组件中使用 #如果想要更换不同的主题色, 只需要在组件中引入你要使用的主题色的css文件,然后配置theme的名字为引入的css文件名称。 https://codemirror.net/5/theme/   #效果  

    2024年02月05日
    浏览(39)
  • vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑

    先找个目录创建一个vue项目 例如 我们想要项目叫 editor 在终端执行 2和3其实都可以 但个人建议 最近还是2会更稳定一些 在终端执行 引入依赖包 然后在项目src目录下创建 utils 文件夹 里面创建一个setting.js 参考代码如下 然后 这边 调用组件的代码 因为项目也刚创 我直接写 s

    2024年02月15日
    浏览(55)
  • 解决vue3使用iconpark控制台预警提示问题

    最近在项目中使用 iconpark-icon 来管理图标,一切都很顺利,引入链接后,图标正常显示,没有报错。但是控制台却发出了预警信息。 [Vue warn]: Failed to resolve component: iconpark-icon If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 虽说不

    2024年02月04日
    浏览(53)
  • 在VsCode中,如何给JavaScript项目增加代码提示

    现代前端开发现在越来越偏向于使用TypeScript了,TypeScript的鸭子类型系统让代码更加的规范,同时在编辑器中也能更加有效的进行推导。 但是,作为一个混迹于各大项目的前端们,总会遇到一些纯JavaScript项目,这些项目注解不规范,也没考虑后期扩展,VsCode代码提示基本等于

    2024年02月05日
    浏览(53)
  • Vue3:一页多题答案提示及循环radio和checkbox混合使用

    一页多题,类型包括单选(单选、判断)和多选,radio和checkbox混合使用,答案检验数据匹配,正确答案格式化,答案提交数据格式化,数据提交。 数据里的答案为:A_B_C_D 需要校正展示的答案为:ABCD 提交数据的答案为:题目id-A_B_C_D 通过 :value=\\\"list.id+\\\'_\\\'+radio.name\\\"  和   :va

    2024年02月05日
    浏览(44)
  • vue2与vue3项目中,分别使用element组件的message消息提示只出现一次的实现

    比如出现以上现象,想要让上一次提示没有结束,下一次提示不会出现就可以用以下方法解决 解决后的现象一:上一次提示框显示后,提示框出现的提示时间没有结束,再次点击,提示框不会有反应,在该提示的时间内一只显示,下一次提示不会出现,直到该提示的时间过了

    2024年02月02日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包