本章节，我们基于vue3和vite创建一个项目，同时通过codemirror6创建一个最小化的编辑器，可以获取编辑器的内容，可以更新编辑器的内容。

要实现的页面效果如下：

使用create-vue创建项目

我们可以使用vite或create-vue创建项目。

bash 复制代码 
> npx
> create-vue

┌  Vue.js - The Progressive JavaScript Framework
│
◇  请输入项目名称：
│  nbeditor-vue
│
◇  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  TypeScript, Router（单页面应用开发）, Vitest（单元测试）, ESLint（错误预防）, Prettier（代码格式化）
│
◇  是否引入 Oxlint 以加快检测？（试验阶段）
│  No

正在初始化项目 /nbeditor-all/nbeditor-vue...
│
└  项目初始化完成，可执行以下命令：

   cd nbeditor-vue
   npm install
   npm run format
   npm run dev

具体创建步骤参看：https://github.com/vuejs/create-vue

整合Codemirror6

Codemirror目前有两个主要版本，即Codemirror5.x 和 Codemirror6.x， 目前市面上大多数教程以Codemirror5为主。

这里我们以Codemirror最新版本即6.x为主进行讲解。

参考Codemirror6 官方网站：https://codemirror.net/ ， 我们创建一个最基础的编辑器。

安装依赖

bash 复制代码 
pnpm add codemirror

Codemirror 采用模块化设计，codemirror包同时包含了@codemirror/view 和@codemirror/state等基础的包，目前我们的编辑器还比较简单，先安装codemirror即可。

创建一个最小化的编辑器

参看官方文档，可以通过以下代码创建一个最小化的编辑器示例：

javascript 复制代码 
import {basicSetup} from "codemirror"
import {EditorView} from "@codemirror/view"

const view = new EditorView({
  doc: "Start document",
  parent: document.body,
  extensions: [basicSetup]
})

从以上代码，可以只需要将 parent 挂载到一个页面的html元素即可。我们将上述代码转为vue3代码即可。

主要代码如下：

javascript 复制代码 
<script setup lang="ts">
import { basicSetup, EditorView } from "codemirror"
import { onMounted, useTemplateRef, ref } from "vue";
const nbeditorId = useTemplateRef("nbeditorId")
const view = ref<EditorView>()
const contentHtml = ref<string>('')
const initEditor = () => {
  view.value = new EditorView({
    doc: "# Hello world!",
    parent: nbeditorId.value as HTMLElement,
    extensions: [basicSetup]
  });
}
onMounted(() => {
  console.log(nbeditorId.value)
  initEditor()
  // 获取焦点
  view.value?.focus()
})

const getEditorContent = () => {
  //获取编辑器的内容
  contentHtml.value = view.value!.state.doc.toString();
}
const setEditorContent = () => {
  //设置编辑器的内容
  setTimeout(() => {
    // 这里需要注意，需要先把编辑器的内容清空，再插入新的内容
    view.value!.dispatch({
      changes: {
        from: 0,
        to: view.value!.state.doc.length,
        insert: "# NbEditor Content Update!"
      }
    });
  }, 60)
}
</script>

<template>
  <div>
    <h1>Hello NbEditor !</h1>
    <div ref="nbeditorId"> </div>
    <div>
      <button @click="getEditorContent">获取内容</button>
      <button @click="setEditorContent">设置内容</button>
    </div>
    <div style="margin-top: 10px;">获取编辑器的内容：{{ contentHtml }}</div>
  </div>

</template>
<style>
.cm-editor.ͼ1 {
  height: 200px;
}
</style>

其中，创建编辑器的代码是：

javascript 复制代码 
const initEditor = () => {
  view.value = new EditorView({
    doc: "# Hello world!",
    parent: nbeditorId.value as HTMLElement,
    extensions: [basicSetup]
  });
}

获取编辑器内容和设置编辑器内容的代码是：

javascript 复制代码 
const getEditorContent = () => {
  //获取编辑器的内容
  contentHtml.value = view.value!.state.doc.toString();
}
const setEditorContent = () => {
  //设置编辑器的内容
  setTimeout(() => {
    // 这里需要注意，需要先把编辑器的内容清空，再插入新的内容
    view.value!.dispatch({
      changes: {
        from: 0,
        to: view.value!.state.doc.length,
        insert: "# NbEditor Content Update!"
      }
    });
  }, 60)
}

本章节的完整代码已上传到gitee:https://gitee.com/nbeditor/nbeditor-vue/tree/v0.1.0