vue-codemirror使用教程 左侧编辑代码右侧显示页面

vue-codemirror使用教程 左侧编辑代码右侧显示页面

网上找了很多都是只是简单的编辑，我自己整理了一下开发了一个一边编辑一边显示的方法 现在把学习过程分享一下

第一步下载依赖包

npm install vue-codemirror --save
注意：最新版本只能在vue3使用 vue3 以下需要指定版本
Legacy version
examples (Vue2)
vue-codemirror@4.x (Vue2 / CodeMirror5)[添加链接描述](https://www.npmjs.com/package/vue-codemirror)

npm i codemirror 和vue-codemirror 配套使用vue-codemirror只是一个封装的组件
npm i vue-clipboard2 复制用的

main.js引入复制库

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

代码编辑组件

 <!-- 代码编辑 -->
<template>
  <div class="experience-editor">
    <div class="experience-editor-header">
      <div class="experience-editor-header-title">源代码编辑器</div>
      <div class="experience-editor-header-right">
        <div class="experience-editor-header-right-box"
             v-clipboard:copy="code"
             v-clipboard:success="onCopy"
             v-clipboard:error="onError">
          <i class="el-icon-document-copy"></i>
          复制
        </div>
        <div class="experience-editor-header-right-box"
             @click="play">
          <i class="el-icon-video-play"></i>
          运行
        </div>
        <div class="experience-editor-header-right-box"
             @click="refresh">
          <i class="el-icon-refresh"></i>
          刷新
        </div>
        <div class="experience-editor-header-right-box" @click="download('index.html',code)">
          <i class="el-icon-download"></i>
           下载
        </div>
      </div>
    </div>
    <codemirror ref="myCm"
                v-model="code"
                :options="cmOptions"
                @changes="onChanges"
                class="experience-editor-code"></codemirror>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 引用

import { codemirror } from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/3024-day.css'; // 引入主题样式，根据设置的theme的主题引入
import 'codemirror/mode/htmlmixed/htmlmixed.js'; // html代码高亮
import { viewObj } from '../../utils/view';
export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'experience-editor',
    components: {},
    data() {
        //这里存放数据
        return {
            baseCode: '',
            code: '',
            codePath: '../',
            cmOptions: {
                tabSize: 4,
                mode: 'htmlmixed', // htmlcssjs可以用这个，其他语言可以看官网的参数
                theme: '3024-day', // 主题和引入对应
                lineWrapping: true, // 自动换行
                lineNumbers: true
            }
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    created() {},
    components: {
        codemirror
    },
    computed: {},
    methods: {
        //下载
        download(filename, text) {
            var element = document.createElement('a');
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
            element.setAttribute('download', filename);
            element.style.display = 'none';
            document.body.appendChild(element);

            element.click();
            document.body.removeChild(element);
        },
        play() {
            // 调用父组件的方法
            this.$parent.writeCode(this.code);
        },
        refresh() {
            this.code = this.baseCode;
            this.$parent.writeCode(this.baseCode);
        },
        // 复制成功时的回调函数
        onCopy(e) {
            this.$message.success('内容已复制到剪切板！'); // 使用的element-ui插件
        },
        // 复制失败时的回调函数
        onError(e) {
            this.$message.error('抱歉，复制失败！');
        },
        onChanges() {
            this.code = this.$refs.myCm.content;
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.code = viewObj[this.$route.params.id];
        this.baseCode = this.code;
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.experience-editor-header {
    display: flex;
    height: 45px;
    line-height: 45px;
    background-color: #f3f4f8;
    justify-content: space-between;
    padding-left: 10px;
}
.experience-editor-header-right {
    display: flex;
    padding: 0 10px;
    .experience-editor-header-right-box {
        cursor: pointer;
        margin-right: 10px;
    }
}
.experience-editor-code {
    height: 100%;
}
</style>

父组件 左侧显示编辑代码 右侧显示页面 主要原理是 iframe

<!-- 百度地图示例页面 -->
<template>
    <div class="experience-main">
      <experience-editor style="width: 40%;height: 100%;"></experience-editor>
      <iframe src="about:blank#"
              unselectable="on"
              frameborder="0"
              scrolling="no"
              style="width:60%;height:100%;"
              ref="myIframe"
              id="codeIframe"
              allowfullscreen></iframe>
    </div>
  </template>
  
  <script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import ExperienceEditor from '../common/experience-editor.vue';
  import {viewObj} from '../../utils/view'
  export default {
      //import引入的组件需要注入到对象中才能使用
      components: { ExperienceEditor },
      data() {
          //这里存放数据
          return {
             
          };
      },
      //监听属性 类似于data概念
      computed: {},
      //监控data中的数据变化
      watch: {},
      //方法集合
      methods: {
          // 向iframe空页面写代码
          writeCode(code) {
              const iframe = document.querySelector('#codeIframe');
              iframe.contentWindow.document.open();
              iframe.contentWindow.document.write(code);
              iframe.contentWindow.document.close();
          }
      },
      //生命周期 - 创建完成（可以访问当前this实例）
      created() {},
      //生命周期 - 挂载完成（可以访问DOM元素）
      mounted() {
          this.writeCode(viewObj[this.$route.params.id]);
      },
      beforeCreate() {}, //生命周期 - 创建之前
      beforeMount() {}, //生命周期 - 挂载之前
      beforeUpdate() {}, //生命周期 - 更新之前
      updated() {}, //生命周期 - 更新之后
      beforeDestroy() {}, //生命周期 - 销毁之前
      destroyed() {}, //生命周期 - 销毁完成
      activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
  };
  </script>
  <style lang='less' scoped>
  //@import url(); 引入公共css类
  .experience-main {
      width: 100%;
      height: 100%;
      display: flex;
  }
  </style>

封装的代码数据 因为我做的是根据菜单栏切换 所以页面代码才用枚举，通过路由参数显示当前要显示的也买

import { html01 } from '../static/data/mapShow/mapShow01';
var viewObj = {
    '01':html01
}
export {viewObj}

代码

var html01 =`
    
    
    
        
        
        
        
    
    
        44
    
    
`
export {html01}

以上就是全部步骤 欢迎大家一起学习