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数据 | - | - |