@@ -28,6 +28,7 @@ | |||
"js-cookie": "^2.2.0", | |||
"less-loader": "^6.0.0", | |||
"nprogress": "^0.2.0", | |||
"quill": "^1.3.7", | |||
"script-loader": "^0.7.2", | |||
"sockjs-client": "1.0.0", | |||
"sortablejs": "^1.14.0", | |||
@@ -42,10 +43,11 @@ | |||
"vue-echarts": "^4.0.1", | |||
"vue-json-editor": "^1.2.3", | |||
"vue-json-tree-view": "^2.1.4", | |||
"vue-quill-editor": "3.0.6", | |||
"vue-quill-editor": "^3.0.6", | |||
"vue-router": "^3.0.2", | |||
"vuedraggable": "^2.24.3", | |||
"vuex": "^3.0.1" | |||
"vuex": "^3.0.1", | |||
"wangeditor": "^4.7.11" | |||
}, | |||
"devDependencies": { | |||
"@vue/cli-plugin-babel": "^3.12.0", | |||
@@ -0,0 +1,83 @@ | |||
<template> | |||
<div> | |||
<div class="edit_container"> | |||
<quill-editor | |||
style="height:500px;" | |||
v-model="content" | |||
ref="myQuillEditor" | |||
:options="editorOption" | |||
@blur="onEditorBlur($event)" | |||
@focus="onEditorFocus($event)" | |||
@change="onEditorChange($event)" | |||
> | |||
</quill-editor> | |||
</div> | |||
<div style="margin-top:100px;"> | |||
<el-button @click="upload">确定</el-button> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { quillEditor } from "vue-quill-editor"; //调用编辑器 | |||
import "quill/dist/quill.core.css"; | |||
import "quill/dist/quill.snow.css"; | |||
import "quill/dist/quill.bubble.css"; | |||
// 原型 | |||
// https://blog.csdn.net/senmage/article/details/82388728 | |||
export default { | |||
data() { | |||
return { | |||
content: ``, | |||
editorOption: { | |||
placeholder: "请在这里输入", | |||
modules: { | |||
toolbar: [ | |||
["bold", "italic", "underline", "strike"], //加粗,斜体,下划线,删除线 | |||
["blockquote", "code-block"], //引用,代码块 | |||
[{ header: 1 }, { header: 2 }], // 标题,键值对的形式;1、2表示字体大小 | |||
[{ list: "ordered" }, { list: "bullet" }], //列表 | |||
[{ script: "sub" }, { script: "super" }], // 上下标 | |||
[{ indent: "-1" }, { indent: "+1" }], // 缩进 | |||
[{ direction: "rtl" }], // 文本方向 | |||
[{ size: ["small", false, "large", "huge"] }], // 字体大小 | |||
[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 | |||
[{ color: [] }, { background: [] }], // 字体颜色,字体背景颜色 | |||
[{ font: [] }], //字体 | |||
[{ align: [] }], //对齐方式 | |||
["clean"], //清除字体样式 | |||
["image", "video"], //上传图片、上传视频 | |||
], | |||
}, | |||
}, | |||
}; | |||
}, | |||
components: { | |||
quillEditor, | |||
}, | |||
mounted() {}, | |||
computed: { | |||
editor() { | |||
return this.$refs.myQuillEditor.quill; | |||
}, | |||
}, | |||
methods: { | |||
onEditorReady(editor) { | |||
// 准备编辑器 | |||
}, | |||
onEditorBlur() {}, // 失去焦点事件 | |||
onEditorFocus() {}, // 获得焦点事件 | |||
onEditorChange() {}, // 内容改变事件 | |||
upload() { | |||
console.log(this.content); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped > | |||
.edit_container{ | |||
height: 600px; | |||
} | |||
</style> |
@@ -0,0 +1,50 @@ | |||
<template> | |||
<div class="box-center"> | |||
<div class="edit_container" style="margin-top:50px;"> | |||
<div id="editor"></div> | |||
</div> | |||
<div style="margin-top: 10px"> | |||
<el-button @click="upload">确定</el-button> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import E from "wangeditor"; | |||
export default { | |||
data() { | |||
return { | |||
content: ``, | |||
editor:null, | |||
}; | |||
}, | |||
mounted() { | |||
const editor = new E("#editor"); | |||
// 设置编辑区域高度为 500px | |||
editor.config.height = 500; | |||
editor.config.placeholder = "placeholder"; | |||
// 配置 server 接口地址 | |||
// editor.config.uploadImgServer = "/upload-img"; | |||
editor.config.uploadImgShowBase64 = true | |||
editor.config.zIndex = 500 | |||
editor.create(); | |||
this.editor=editor | |||
}, | |||
methods: { | |||
upload(){ | |||
let str=this.editor.txt.html() | |||
console.log(str); | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped > | |||
.box-center { | |||
width: 100%; | |||
padding: 15px; | |||
min-width: 1000px; | |||
padding-bottom: 100px; | |||
} | |||
</style> |
@@ -7,7 +7,7 @@ const url = 'http://39.97.167.65:9999' //测试 | |||
// const url = 'http://192.168.31.167:9999' //长龙 | |||
// const url = 'http://192.168.31.134:9999' //嘉豪 | |||
// const url = 'http://192.168.31.100:9999' //王笑 | |||
// const url = 'http://62.234.122.43:9999' //正式 | |||
// const url = 'http://62.234.122.43:9999' //正式 | |||
const CompressionWebpackPlugin = require('compression-webpack-plugin') | |||
const productionGzipExtensions = ['js', 'css'] | |||