douzhuo 2 jaren geleden
bovenliggende
commit
c93315eeb2
4 gewijzigde bestanden met toevoegingen van 138 en 3 verwijderingen
  1. +4
    -2
      package.json
  2. +83
    -0
      py.vue
  3. +50
    -0
      src/views/admin/log/msg.vue
  4. +1
    -1
      vue.config.js

+ 4
- 2
package.json Bestand weergeven

@@ -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",


src/views/admin/log/msg → py.vue Bestand weergeven

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

+ 50
- 0
src/views/admin/log/msg.vue Bestand weergeven

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

+ 1
- 1
vue.config.js Bestand weergeven

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


Laden…
Annuleren
Opslaan