如何实现在 Vue 中嵌入代码编辑器 ？

前言：在 Vue 日常项目开发中，会遇到将后端传回的代码格式化输出渲染，并支持用户编辑的需求。实现方法有很多，可以分别使用 vue2-ace-editor  ， vue-prism-editor ，codemirror 等插件方法实现，下面对这三种方法的使用做一个总结 。

---

方法一：使用 vue2-ace-editor 插件实现

• 安装

npm i vue2-ace-editor -S
// 或者
cnpm i vue2-ace-editor -S

• 组件内使用实例

---

方法二：使用 vue-prism-editor 插件实现

• 安装

npm i prismjs vue-prism-editor -S
// 或者
cnpm i prismjs vue-prism-editor 

• 组件内使用实例

---

方法三：使用 codemirror 插件实现

• 安装

npm i codemirror -S
// 或者
npm i codemirror -S

• 组件内使用实例

【完整代码示例：vue-code-editor: 在 VUE 中分别使用 vue2-ace-editor  ， vue-prism-editor ，codemirror 等插件嵌入代码编辑器】