@@ -28,6 +28,7 @@ | |||||
"js-cookie": "^2.2.0", | "js-cookie": "^2.2.0", | ||||
"less-loader": "^6.0.0", | "less-loader": "^6.0.0", | ||||
"nprogress": "^0.2.0", | "nprogress": "^0.2.0", | ||||
"quill": "^1.3.7", | |||||
"script-loader": "^0.7.2", | "script-loader": "^0.7.2", | ||||
"sockjs-client": "1.0.0", | "sockjs-client": "1.0.0", | ||||
"sortablejs": "^1.14.0", | "sortablejs": "^1.14.0", | ||||
@@ -42,10 +43,11 @@ | |||||
"vue-echarts": "^4.0.1", | "vue-echarts": "^4.0.1", | ||||
"vue-json-editor": "^1.2.3", | "vue-json-editor": "^1.2.3", | ||||
"vue-json-tree-view": "^2.1.4", | "vue-json-tree-view": "^2.1.4", | ||||
"vue-quill-editor": "3.0.6", | |||||
"vue-quill-editor": "^3.0.6", | |||||
"vue-router": "^3.0.2", | "vue-router": "^3.0.2", | ||||
"vuedraggable": "^2.24.3", | "vuedraggable": "^2.24.3", | ||||
"vuex": "^3.0.1" | |||||
"vuex": "^3.0.1", | |||||
"wangeditor": "^4.7.11" | |||||
}, | }, | ||||
"devDependencies": { | "devDependencies": { | ||||
"@vue/cli-plugin-babel": "^3.12.0", | "@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.167:9999' //长龙 | ||||
// const url = 'http://192.168.31.134:9999' //嘉豪 | // const url = 'http://192.168.31.134:9999' //嘉豪 | ||||
// const url = 'http://192.168.31.100: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 CompressionWebpackPlugin = require('compression-webpack-plugin') | ||||
const productionGzipExtensions = ['js', 'css'] | const productionGzipExtensions = ['js', 'css'] | ||||