vue-codemirror使用教程左侧编辑代码右侧显示页面实现代码编辑并实时预览

转载已于 2024-12-26 16:26:17 修改 · 731 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_40493588/article/details/129996025

文章标签：

#vue.js #前端 #javascript

于 2024-12-26 16:25:34 首次发布

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

在这里插入图片描述

第一步下载依赖包

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 =`
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        44
    </body>
    </html>
`
export {html01}