如何在vue3中使用代码编辑器？

希里安

发布于 2023-10-30 19:25:17

7230

发布于 2023-10-30 19:25:17

文章被收录于专栏：希里安希里安

## 今日新闻

1. 疫情期间成为居家办公代名词的zoom公司，最近发布消息称要求员工返回办公室办公。

2. 距离opensuse亚洲峰会，提交演讲征集材料还剩十二天，感兴趣的可以看一下，在10月21-23日在重庆邮电大学举办。

3. linux OSSummit日本峰会正在寻找充满热情的个人来就所有科技领域进行充满活力的演讲。如果您有一个让众人惊叹的主题，并且可以参与的话，可以关注下。

4. 劳伦斯利弗莫尔国家实验室的科学家们刚刚在聚变能领域实现了另一个里程碑。在 ReadME 项目中了解开源如何帮助推动核物理的未来。

地址：

   <https://github.com/readme/featured/nuclear-fusion-open-source>

## 前端codemirror使用

前端页面中如果要用到在线代码编辑器的话，那么codemirror是目前比较流行的js库，可以嵌入你的网页中。

更新日志：

V-2.3.0

时间：2023年3月7日

安装：

npm install codemirror-editor-vue3 codemirror@5.x -S


yarn add codemirror-editor-vue3 codemirror@5.x


pnpm i codemirror-editor-vue3 codemirror@^5.65.12 -S

如果项目使用ts，还需要安装依赖：

npm install @types/codemirror -D

//引入
import { InstallCodemirro } from "codemirror-editor-vue3";

不过不推荐全局注册，因为这样会导致模板提示类型无法正确获取，在组建中使用即可

// 引入主题 可以从 codemirror/theme/ 下引入多个
import 'codemirror/theme/dracula.css'


// 引入语言模式 可以从 codemirror/mode/ 下引入多个
iimport "codemirror/mode/javascript/javascript.js"

官网示例：

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="test placeholder"
    :height="200"
    @change="change"
  />
</template>


<script>
import Codemirror from "codemirror-editor-vue3";


// placeholder
import "codemirror/addon/display/placeholder.js";


// language
import "codemirror/mode/javascript/javascript.js";
// placeholder
import "codemirror/addon/display/placeholder.js";
// theme
import "codemirror/theme/dracula.css";


import { ref } from "vue";
export default {
  components: { Codemirror },
  setup() {
    const code = ref(`
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
}`);


    return {
      code,
      cmOptions: {
        mode: "text/javascript", // Language mode
        theme: "dracula", // Theme
      },
    };
  },
};
</script>

测试如下：