vue-codemirror实现代码块编辑回填

小桥流水人家丶

已于 2023-04-03 10:06:53 修改

阅读量185

点赞数

文章标签： vue.js javascript 前端

于 2023-04-03 10:04:50 首次发布

本文链接：https://blog.csdn.net/xu568110526/article/details/129922856

版权

本文介绍如何在Vue项目中集成codemirror，通过npm安装codemirror库，并在main.js和RichText.vue组件中进行配置，实现代码块的编辑和回填功能。

摘要由CSDN通过智能技术生成

下载：npm install codemirror@4.0.6 --save

main.js

import VueCodemirror from "vue-codemirror";
import "codemirror/lib/codemirror.css";
Vue.use(VueCodemirror);

组件--RichText.vue

<template>
  <div class="code-mirror-box">
    <textarea ref="textareaCoder"></textarea>
  </div>
</template>

<script>
// 引入全局实例
import _CodeMirror from "codemirror";
// language
import "codemirror/mode/javascript/javascript.js";
// 核心样式
import "codemirror/lib/codemirror.css";
// 引入主题后还需要在 options 中指定主题才会生效
import "codemirror/theme/monokai.css";
// active-line
import "codemirror/addon/selection/active-line.js";
// foldGutter
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldco