| @@ -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'] | |||