yanzi-super-editor 编辑器

下载安装

npm i --save-dev yanzi-super-editor

需求copy插件

// 使用copy-webpack-plugin插件把文件copy到 static 目录下
npm i copy-webpack-plugin

vue.config.js

// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')


module.exports = {

  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin(
        [
          {
            from: 'node_modules/yanzi-super-editor/lib/editor.worker.js',
            to: 'static/js/editor.worker.js',
            toType: 'file'
          },
          {
            from: 'node_modules/yanzi-super-editor/lib/html.worker.js',
            to: 'static/js/html.worker.js',
            toType: 'file'
          },
          {
            from: 'node_modules/yanzi-super-editor/lib/css.worker.js',
            to: 'static/js/css.worker.js',
            toType: 'file'
          },
          {
            from: 'node_modules/yanzi-super-editor/lib/ts.worker.js',
            to: 'static/js/ts.worker.js',
            toType: 'file'
          },
          {
            from: 'node_modules/yanzi-super-editor/lib/json.worker.js',
            to: 'static/js/json.worker.js',
            toType: 'file'
          },
          {
            context: 'node_modules/yanzi-super-editor/lib/',
            from: '*.umd.min.*.js',
            to: 'static/js/',
            toType: 'dir'
          },

          {
            context: 'node_modules/yanzi-super-editor/lib/static/',
            from: 'fonts',
            to: 'static/js/fonts',
            toType: 'dir'
          }
        ]
      ),
    ]
  }
};

注册组件（2选1）

1.单组件内注册

import "yanzi-super-editor/lib/yzSuperEditor.css";
import yzSuperEditor from "yanzi-super-editor/lib/yzSuperEditor.umd.min.js";

export default {
  components: {
    MinEditor:yzSuperEditor.MinEditor // 注册组件
  }
}

2.main.js全局注册

import "yanzi-super-editor/lib/yzSuperEditor.css";
import yzSuperEditor from "yanzi-super-editor/lib/yzSuperEditor.umd.min.js";

Vue.component("EasyEditor", yzSuperEditor.EasyEditor);
Vue.component("MinEditor", yzSuperEditor.MinEditor);

使用示例

1.单体编辑器

单体编辑器使用比较简单，仅仅是对于单个文件代码的高亮预览、编辑、智能提示等。。。使用时需指定 mode(也就是代码的语言，如html、css、javascript)

template

<MinEditor ref="editor" :value.sync="content" :mode="mode" :theme="theme"></MinEditor>

js

// import
import "yanzi-super-editor/lib/yzSuperEditor.css";
import yzSuperEditor from "yanzi-super-editor/lib/yzSuperEditor.umd.min.js";

export default {
  name: "App",
  components: {
    MinEditor:yzSuperEditor.MinEditor // 注册组件
  },data(){
      return{
          mode: "html", // mode: [html | javascript | css | json ]
          theme: "vs-dark", // theme:[ vs | vs-dark | hc-black ]
          content: [
            "function test(){",
            '\tconsole.log("hellow world");',
            "}",
          ].join("\n"),
      }
  }
};

属性

|属性名|说明|类型|必填|默认值|可选值| |-|-|-|-|-|-| |mode|编辑器语言|String|false|html|html/css/javascript/json| |theme|主题色|String|false|vs|vs/vs-dark| |content|编辑器代码内容|String|false|""|-|

事件

|事件名|说明|回调参数|回调参数说明| |-|-|-|-| |change|监听编辑器内容变化|value|编辑器最新内容| |save|ctrl+S触发|value|编辑器最新内容| |blur|编辑器失去焦点|value|编辑器最新内容|

方法

|事件名|说明|参数|参数说明| |-|-|-|-| |getValue|获取编辑器最新内容|value|编辑器最新内容|

2.带tab编辑器

这种类型的编辑器，可以同时载入多个文件，以tab区分之，并且互相不影响，可以有各自不同的 mode(语言) ，不同的内容，以便于在多个文件之前来回切换

完整示例

<template>
  <div id="app">
    <button class="layui-btn layui-bg-gray" @click="addtab(item)" v-for="(item,index) in list"
      :key="index">{{item.fileName}}</button>
    <button @click="theme='vs-dark'" v-if="theme==='vs'" class="layui-btn">切换黑夜模式</button>
    <button @click="theme='vs'" v-else class="layui-btn">切换白天模式</button>
    <Editor ref="editor" name="1" :value.sync="value" :mode="mode" :cache="true" :theme="theme" @save="save"
      @change="change" @notSave="notSave" @blur="blur" @activeTab="activeTab" @cursorPosition="cursorPosition"
      @cursorSelection="cursorSelection"></Editor>
  </div>
</template>

<script>
// import Editor from "./components/MinEditor";
import Editor from "./components/EasyEditor.vue";

export default {
  name: "App",
  components: {
    Editor
  },
  data() {
    return {
      // theme: "vs-dark",
      theme: "vs",
      // mode: "javascript",
      mode: "html",
      // mode: "css",
      value: ["function test(){", '\tconsole.log("hello world");', "}"].join(
        "\n"
      ),
      list: [
        {
          icon: "jsImg",
          fileName: "main.js",
          open: true,
          base64: null,
          fileURL: "path/test",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: 'console.log("第一个");',
          mode: "javascript",
          isSave: true
        },
        {
          icon: "vueImg",
          fileName: "App.vue",
          open: true,
          base64: null,
          fileURL: "path/app.vue",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "vue",
          value: `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>`,
          mode: "html",
          isSave: true
        },
        {
          icon: "cssImg",
          fileName: "style.css",
          open: true,
          base64: null,
          fileURL: "path/style.css",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "css",
          value: [
            "*{",
            "\tmargin:0px;",
            "\tpadding:0px;",
            "\tbackground-color:#F00;",
            "\tcolor:#FFF;",
            "}"
          ].join("\n"),
          mode: "css",
          isSave: true
        },
        {
          icon: "jsonImg",
          fileName: "test.json",
          open: true,
          base64: null,
          fileURL: "path/test.json",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "json",
          value: [
            "{",
            '\t"name":"张三",',
            '\t"age":"22",',
            '\t"like":[',
            '\t\t"吃饭","睡觉","打豆豆"',
            "\t]",
            "}"
          ].join("\n"),
          mode: "json",
          isSave: true
        },
        {
          icon: "htmlImg",
          fileName: "bbbbb.html",
          open: true,
          base64: null,
          fileURL: "path/bbbbb.html",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>`,
          mode: "html",
          isSave: true
        },
        {
          icon: "mdImg",
          fileName: "Readme.md",
          open: true,
          base64: null,
          fileURL: "path/Readme.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        },

        {
          icon: "mdImg",
          fileName: "Readme2.md",
          open: true,
          base64: null,
          fileURL: "path/Readme2.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        },
        {
          icon: "mdImg",
          fileName: "Readme3.md",
          open: true,
          base64: null,
          fileURL: "path/Readme3.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        },
        {
          icon: "mdImg",
          fileName: "Readme4.md",
          open: true,
          base64: null,
          fileURL: "path/Readme4.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        },
        {
          icon: "mdImg",
          fileName: "Readme5.md",
          open: true,
          base64: null,
          fileURL: "path/Readme5.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        },
        {
          icon: "mdImg",
          fileName: "Readme6.md",
          open: true,
          base64: null,
          fileURL: "path/Readme6.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        },
        {
          icon: "mdImg",
          fileName: "Readme7.md",
          open: true,
          base64: null,
          fileURL: "path/Readme7.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        },
        {
          icon: "mdImg",
          fileName: "Readme8.md",
          open: true,
          base64: null,
          fileURL: "path/Readme8.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        },
        {
          icon: "mdImg",
          fileName: "Readme9.md",
          open: true,
          base64: null,
          fileURL: "path/Readme9.md",
          size: "-",
          updateTime: "2021-06-10 10:05:46",
          isDirectory: "true",
          suffix: "js",
          value: `# 标题1

## 标题2

### 标题3

#### 标题4

##### 标题5

###### 标题6`,
          mode: "",
          isSave: true
        }
      ]
    };
  },
  methods: {
    blur(e, refresh) {
      console.log("blur", e);
      refresh();
    },
    // ctrl + S ,
    save(e, refresh) {
      console.log(e);
      refresh();
    },
    // 编辑器实时输入
    change(e) {
      console.log(e);
    },
    // 添加一个 Tab
    addtab(item) {
      this.$refs.editor.addTab(item);
    },
    // 如果修改了没有保存，触发的事件，item:当前Tab ，close:关闭的回调函数
    notSave(item, close) {
      // 此处可以做判断，最后选择是否调用 close 来关闭当前 tab
      close();
    },
    // 选中一个 tab
    activeTab(tab) {
      console.log("activeTab", tab);
    },
    // 编辑器内获得焦点，返回光标位置等信息
    cursorPosition(e) {
      console.log("cursorPosition", e);
    },
    // 获取编辑器内实时选中的内容
    cursorSelection(e) {
      console.log("cursorSelection", e);
    }
  },
  mounted() {
    window.onload = function() {
      var loadTime =
        window.performance.timing.domContentLoadedEventEnd -
        window.performance.timing.navigationStart;
      console.log("页面加载用时 " + parseFloat(loadTime / 1000) + "秒");
    };
  }
};
</script>

<style>
@import url("https://note.xzlovecyy.com/files/space/xiaozhou/static/3d/pages/项目应用/layui/css/layui.css");
* {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
#app {
  height: 100%;
  overflow: hidden;
  /* height: 400px;
  width: 500px; */
  /* margin: 100px auto;
  border: 1px red solid; */
}
</style>

属性

|属性名|说明|类型|必填|默认值|可选值| |-|-|-|-|-|-| |theme|主题色|String|false|vs|vs/vs-dark| |content|编辑器代码内容|String|false|""|-| |cache|是否缓存 tab|Boolean|false|true|true/false|

事件

|事件名|说明|回调参数|回调参数说明| |-|-|-|-| |change|监听编辑器内容变化|tab|当前tab对象| |activeTab|选中tab触发|tab|当前tab对象| |save|ctrl+S触发|tab,refresh|当前tab对象| |blur|编辑器失去焦点|tab,refresh|tab:当前tab对象,refresh:回调函数，使当前tab改为已保存状态| |notSave|编辑器失去焦点|tab,close|tab:当前tab对象,close:关闭的回调函数| |cursorPosition|编辑器获得焦点|position|position:光标所在行、列| |cursorSelection|鼠标选中内容对象|selection|selection:鼠标选中内容的起始行、列，结束行、列|

方法

|事件名|说明|参数|参数说明| |-|-|-|-| |setValue|设置编辑器内容|value|要设置的内容| |getValue|获取编辑器最新内容|-|-| |exsitNotSaved|是否存在未保存的tab|-|-| |getTabList|获取tabList数据|-|-|