Merge branch 'master' into deploy
This commit is contained in:
@@ -13,7 +13,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: document.documentElement.clientHeight - 94.5 + 'px;',
|
||||
height: document.documentElement.clientHeight - (84 + 22) + 'px;',
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
@@ -23,7 +23,7 @@ export default {
|
||||
}, 230)
|
||||
const that = this
|
||||
window.onresize = function temp() {
|
||||
that.height = document.documentElement.clientHeight - 94.5 + 'px;'
|
||||
that.height = document.documentElement.clientHeight - (84 + 22) + 'px;'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,7 +67,6 @@ export default {
|
||||
}
|
||||
.json-editor >>> .CodeMirror {
|
||||
font-size: 14px;
|
||||
overflow-y:auto;
|
||||
font-weight:normal
|
||||
}
|
||||
.json-editor >>> .CodeMirror-scroll{
|
||||
|
||||
87
src/components/WangEditor/index.vue
Normal file
87
src/components/WangEditor/index.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div ref="editor" style="border: 1px solid #ccc;">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editor"
|
||||
:default-config="toolbarConfig"
|
||||
:mode="editMode"
|
||||
/>
|
||||
<Editor
|
||||
v-model="editValue"
|
||||
:style="{'height': editorHeight +'px', 'overflow-y': 'hidden'}"
|
||||
:default-config="editorConfig"
|
||||
:mode="editMode"
|
||||
@onCreated="onCreated"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { upload } from '@/utils/upload'
|
||||
import { Toolbar, Editor } from '@wangeditor/editor-for-vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'WangEditor',
|
||||
components: { Toolbar, Editor },
|
||||
props: {
|
||||
value: [String],
|
||||
editorHeight: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi',
|
||||
'baseApi'
|
||||
])
|
||||
},
|
||||
data() {
|
||||
const _this = this
|
||||
return {
|
||||
toolbarConfig: {},
|
||||
editorConfig: { placeholder: '请输入内容...', MENU_CONF: {
|
||||
'uploadImage': {
|
||||
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
|
||||
allowedFileTypes: ['image/*'],
|
||||
// 自定义上传
|
||||
async customUpload(file, insertFn) { // JS 语法
|
||||
upload(_this.imagesUploadApi, file).then(res => {
|
||||
const data = res.data
|
||||
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
|
||||
// 最后插入图片
|
||||
insertFn(url, '', '')
|
||||
})
|
||||
}
|
||||
}
|
||||
}},
|
||||
editMode: 'simple',
|
||||
editor: null,
|
||||
editValue: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
editValue(newVal, oldVal) {
|
||||
this.$emit('input', newVal)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
onCreated(editor) {
|
||||
this.editor = Object.seal(editor)
|
||||
this.editValue = this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||
<style scoped>
|
||||
.text {
|
||||
text-align:left;
|
||||
}
|
||||
::v-deep .w-e-text-container {
|
||||
height: 420px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user