This commit is contained in:
2024-12-09 16:02:46 +08:00
parent 0267d27b2a
commit 8da42abcf1
14 changed files with 346 additions and 337 deletions
@@ -166,15 +166,15 @@
:max="1000000000"></el-input-number>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item prop="xlFlag" label="活动提醒">
<el-switch
v-model="form.xlFlag"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-col>-->
<!-- <el-col :span="8">
<el-form-item prop="xlFlag" label="活动提醒">
<el-switch
v-model="form.xlFlag"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-col>-->
<el-col v-if="form.activityLevel===40003||(form.activityLevel===40001&&is_club)"
:span="8">
<el-form-item prop="belongClubId" label="活动所属协会">
@@ -1112,13 +1112,19 @@ module.exports = {
if (applyTime && applyTime.length) {
form.applyStartTime = applyTime[0]
form.applyEndTime = applyTime[1]
form.applyTime = undefined
form.applyTime = []
} else {
form.applyStartTime = ""
form.applyEndTime = ""
}
if (time && time.length) {
form.startTime = time[0]
form.endTime = time[1]
form.time = undefined
form.time = []
}else{
form.startTime = ""
form.endTime = ""
}
if (this.eventForm.checkedEventId == "allItems") {
@@ -1,222 +1,224 @@
<template>
<div>
<div ref="editorRef"></div>
<input type="file" style="display: none" />
</div>
<div>
<div ref="editorDom"></div>
<input type="file" style="display: none;">
</div>
</template>
<script src="/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
<script>
const { $, BtnMenu, Panel, Tooltip } = wangEditor
//注册上传word按钮
class DocMenu extends BtnMenu {
constructor(editor) {
const $elem = wangEditor.$(
`<div class="w-e-menu" data-title="上传文档">
<i class="fa fa-file-word-o" aria-hidden="true" /></i>
</div>`
)
super($elem, editor)
}
const {$, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip} = wangEditor
clickHandler() {
const fileInputId = this.editor.textElemId + "input-file"
const existingInput = document.getElementById(fileInputId)
if (existingInput) {
existingInput.remove()
class AlertMenu extends BtnMenu {
constructor(editor) {
const $elem = wangEditor.$(
`<div class="w-e-menu" data-title="上传word">
<i class="fa fa-file-word-o" aria-hidden="true" /></i>
</div>`
)
super($elem, editor)
}
clickHandler() {
const _this = this
const inputFileElement = document.querySelector('#'+this.editor.textElemId).parentElement.parentElement.nextElementSibling
inputFileElement.click()
inputFileElement.addEventListener('change', function () {
const loading = ELEMENT.Loading.service({
lock: true,
text: '解析中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const file = this.files[0];
const fileName = file.name
if (!fileName.toLowerCase().endsWith('.doc') && !fileName.toLowerCase().endsWith('.docx')) {
alert('请上传doc或者docx的文件')
_this.clearInputFile()
loading.close()
return
}
const formData = new FormData()
formData.append('file', file, file.name)
axios.post('/file_server/word2Html', formData, {}).then(response => {
console.log(response.data)
loading.close()
if (response.data.code === 0) {
_this.editor.txt.html(response.data.data)
} else {
alert(response.data.msg + ',上传word失败,请联系管理员!')
_this.clearInputFile()
}
}).catch(error => {
loading.close()
console.log(error)
_this.clearInputFile()
alert('上传word失败,请联系管理员!')
});
});
}
const input = document.createElement("input")
input.type = "file"
input.accept = "application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
input.id = fileInputId
input.style.display = "none"
input.addEventListener("change", (event) => {
const files = event.target.files
if (!files || files.length === 0) {
return
}
clearInputFile() {
const obj = document.getElementById('fileInput');
obj.outerHTML = obj.outerHTML
}
let loading = null
if (window.ELEMENT) {
loading = ELEMENT.Loading.service({
lock: true,
text: "文件读取中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
})
} else if (window.vant) {
loading = vant.Toast.loading({
message: "文件读取中",
forbidClick: true,
overlay: true,
duration: 0
})
}
tryChangeActive() {
this.active()
}
const formData = new FormData()
formData.append("file", files[0])
axios
.post("/file_server/convertHtml", formData, {
headers: { "Content-Type": "multipart/form-data", "x-requested-with": "XMLHttpRequest" }
})
.then((response) => {
loading.close()
if (response.data.code === 0) {
this.editor.txt.html(response.data.data)
} else {
if (window.ELEMENT) {
ELEMENT.Message.error(response.data.msg)
} else if (window.vant) {
vant.Toast(response.data.msg)
} else {
alert(response.data.msg)
}
}
})
.catch((error) => {
console.log(error)
alert("上传word失败,请联系管理员!")
})
.finally(() => {
input.remove()
})
})
input.click()
document.body.appendChild(input)
}
tryChangeActive() {}
}
wangEditor.registerMenu("docMenu", DocMenu)
wangEditor.registerMenu('alertMenuKey', AlertMenu)
module.exports = {
name: "textEditor",
props: {
content: {
type: String,
default: ""
},
// 定义值属性,用于接收父组件传递的值
value: {
type: String,
default: ""
},
height: {
type: Number,
default: 300
},
menus: {
type: Array,
default: () => {
return [
"head", //标题
"bold", //加粗
"fontSize", //字号
"fontName", //字体
"italic", //斜体
"underline", //下划线
"strikeThrough", //删除线
"indent", //缩进
"lineHeight", //行高
"foreColor", //文字颜色
"backColor", //背景颜色
//'link',//链接
"list", //序列
"todo", //待办
"justify", //对齐
"quote", //引用
// 'emoticon',//表情
"image",
//'video',
"table",
//'code',
"splitLine", //分割线
"undo",
"redo"
]
}
}
name: "textEditor",
props: {
// 定义值属性,用于接收父组件传递的值
value: {
type: String,
default: ''
},
data() {
return {
editor: null,
cursorPos: 0
}
},
mounted() {
this.initEditor()
height: {
type: Number,
default: 300
},
menus: {
type: Array,
default: () => {
return [
'head',//标题
'bold',//加粗
'fontSize',//字号
'fontName',//字体
'italic',//斜体
'underline',//下划线
'strikeThrough',//删除线
'indent',//缩进
'lineHeight',//行高
'foreColor',//文字颜色
'backColor',//背景颜色
//'link',//链接
'list',//序列
'todo',//待办
'justify',//对齐
'quote',//引用
// 'emoticon',//表情
'image',
//'video',
'table',
//'code',
'splitLine',//分割线
'undo',
'redo',
]
}
}
},
data() {
return {
editor: null
}
},
mounted() {
this.initEditor()
},
watch: {
value: {
handler: function (newValue) {
this.$nextTick(() => {
if (newValue !== this.editor.txt.html()) {
this.editor.txt.html(newValue)
} else {
// this.editor.selection.moveCursor(this.editor.$textElem.elems[0], 1)
}
})
},
immediate: true
}
},
watch: {
value: {
handler: function (newValue) {
this.$nextTick(() => {
if (newValue !== this.editor.txt.html()) {
this.editor.txt.html(newValue)
} else {
// this.editor.selection.moveCursor(this.editor.$textElem.elems[0], 1)
}
})
},
immediate: true
}
},
methods: {
initEditor() {
let _this = this
this.editor = new wangEditor(this.$refs.editorRef)
this.editor.config.focus = false
//内容change回调
this.editor.config.onchange = (newHtml) => {
this.cursorPos = this.editor.selection.getCursorPos()
const range = this.editor.selection.getRange()
range.setStart(range.startContainer, Math.max(this.cursorPos, range.endOffset))
this.$emit("input", newHtml)
}
this.editor.config.linkImgCheck = function (imgSrc, alt, href) {
// 1. 返回 true ,说明检查通过
return true
}
methods: {
initEditor() {
let _this = this
this.editor = new wangEditor(this.$refs.editorDom)
this.editor.config.focus = false
//配置图片上传
this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
Promise.all(_this.uploadFiles(resultFiles)).then((res) => {
res.forEach((v) => {
if (v.data && v.data.code === 0) {
insertImgFn(v.data.data)
} else {
ELEMENT.message.error("图片上传失败")
}
})
})
//内容change回调
this.editor.config.onchange = (newHtml) => {
this.cursorPos = this.editor.selection.getCursorPos()
const range = this.editor.selection.getRange()
range.setStart(range.startContainer, Math.max(this.cursorPos, range.endOffset))
this.$emit("input", newHtml)
}
//配置图片上传
this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
Promise.all(_this.uploadFiles(resultFiles)).then(res => {
res.forEach(v => {
if (v.code === 0) {
insertImgFn(APP_DOMAIN + CREATE_PREVIEW_URL(v.data.filepath))
} else {
ELEMENT.message.warning('图片上传失败')
}
this.editor.config.pasteFilterStyle = false
this.editor.config.height = this.height
this.editor.config.menus = this.menus
this.editor.create()
},
uploadFiles(resultFiles) {
return resultFiles.map(async (file) => {
const formData = new FormData()
formData.append("file", file, file.name)
formData.append("folderPath", "/wangEditorImg/")
return jQuery.ajax({
url: "/file_server/uploadFile",
type: "post",
data: formData,
processData: false,
contentType: false
})
})
}
})
})
}
//粘贴过滤
this.editor.config.pasteFilterStyle = false
//高度
this.editor.config.height = this.height
//菜单
this.editor.config.menus = this.menus
this.editor.create()
},
created() {}
isEmptyEditor() {
const children = this.editor.$textElem.children()
for (let i = 0; i < children.elems.length; i++) {
const node = children.elems[i]
if (node && node.nodeType === Node.TEXT_NODE && node.textContent.trim().length !== '') {
return false
}
if (node && node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'p' && node.innerText.trim() !== '') {
return false
}
}
return true
},
uploadFiles(resultFiles) {
return resultFiles.map(async file => {
const formData = new FormData()
formData.append('file', file, file.name)
formData.append("folderPath", "/wangEditorImg/")
return jQuery.ajax({
url: '/file_server/uploadFile',
type: 'post',
data: formData,
processData: false,
contentType: false
})
})
}
},
created() {
}
}
</script>
<style scoped></style>
<style scoped>
</style>