95ee84574b
* 修复系统工具-代码生成-预览功能，生成预览页面右侧出现双滚动条问题 (#124) Co-authored-by: shusf <shusf@asiainfo.com> * 底部遮挡 (#125) header 84px，footer 22px，94.5px会导致底部存在遮挡 * feat: 更新WangEditor 版本，支持v-model方式绑定 * feat: 修改组件页面，使用新版编辑器 * feat: 更新WangEditor 版本，支持v-model方式绑定 --------- Co-authored-by: shusufen <108729835+shusufen@users.noreply.github.com> Co-authored-by: shusf <shusf@asiainfo.com> Co-authored-by: Schwi <39186981+cyb233@users.noreply.github.com>
88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<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>
|