diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss index dcc6f951d..a245117c2 100644 --- a/nezha-fronted/src/components/charts/chart.scss +++ b/nezha-fronted/src/components/charts/chart.scss @@ -629,3 +629,9 @@ .rich-text-container .ql-container.ql-snow { border: unset !important; } +.rich-text-screen-container .ql-container.ql-snow { + border: unset !important; +} +.chart-text-preview .ql-container.ql-snow { + border: unset !important; +} diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue index 8303a69b4..99847411c 100644 --- a/nezha-fronted/src/components/charts/chartPreview.vue +++ b/nezha-fronted/src/components/charts/chartPreview.vue @@ -162,7 +162,11 @@ diff --git a/nezha-fronted/src/components/charts/richTextEditor.vue b/nezha-fronted/src/components/charts/richTextEditor.vue index 7d849d368..02725798f 100644 --- a/nezha-fronted/src/components/charts/richTextEditor.vue +++ b/nezha-fronted/src/components/charts/richTextEditor.vue @@ -1,6 +1,7 @@ @@ -29,6 +30,8 @@ ] } }, + maxLength:0,//记录最大长度 + tooLong:false, } }, created() { @@ -47,14 +50,31 @@ } } }) + this.quill.on('text-change',function(delta, oldDelta, source){ + let length=$self.getHtml().length; + if(length>60000){ + $self.quill.deleteText($self.maxLength-1,$self.quill.getText().length-1,'api') + $self.tooLong=true; + }else{ + $self.maxLength=$self.quill.getText().length; + $self.tooLong=false; + } + }) this.$nextTick(()=>{ this.$emit('after-init') }) } }, getHtml:function(){ - let html=this.quill.root.innerHTML; - return `
${html}
`; + let html=`
${this.quill.root.innerHTML}
`; + return html; + }, + getContent:function(){ + if(this.tooLong){ + return false; + }else{ + return this.getHtml(); + } }, guid() { function S4() { @@ -84,7 +104,26 @@ .ql-editor{ overflow: auto; } - .ql-tooltip{ - + .text-too-long{ + color: #F56C6C; + font-size: 12px; + line-height: 1; + padding-top: 4px; + position: absolute; + top: 100%; + left: 0; } + .rich-text-editor-error { + border: 1px solid #F56C6C; + } + .rich-text-editor-error .ql-container.ql-snow { + border: unset !important + } + + .rich-text-editor-error .ql-toolbar.ql-snow{ + border-top: unset !important; + border-left: unset !important; + border-right: unset !important; + } + diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index e3bbd8036..218248490 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -363,7 +363,8 @@ const cn = { usize: "必须是(1 - 49)的数字", url: "不合法的URL", uSize: "必须是(1 - 47)的数字", - requiredIdc:'机房为必选项' + requiredIdc:'机房为必选项', + tooLong:"文本太长" }, search: { searchTip: "点击或回车执行搜索", diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 1bdac509a..ea9bf86ab 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -366,7 +366,8 @@ const en = { uSize:'Must be number(1 - 47)', requiredIdc:'dc is required', key:'Invalid key', - repeat:'Repeat' + repeat:'Repeat', + tooLong:'Too long content', }, search: { searchTip: 'Enter to search',//'点击或回车执行搜索' diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index 5b556ba3a..dcca1ac1f 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -565,7 +565,7 @@ }); } } else { - console.log('error submit!!'); + console.error('error submit!!'); return false; } }); @@ -895,13 +895,17 @@ }); }else{ this.$refs.chartForm.validate((valid) => { + let text=this.$refs.richTextEditor.getContent(); + if(!text){ + valid=false; + } const params = { title: this.editChart.title,//this.editChart span: this.editChart.span, height: this.editChart.height, type: this.editChart.type, param:{ - text:this.$refs.richTextEditor.getHtml() + text:text }, sync: this.editChart.sync }; @@ -1286,6 +1290,10 @@ }); }else{ this.$refs.chartForm.validate((valid) => { + let text=this.$refs.richTextEditor.getContent(); + if(!text){ + valid=false; + } const params = { title: this.editChart.title,//this.editChart span: this.editChart.span, @@ -1293,7 +1301,7 @@ type: this.editChart.type, unit:this.editChart.unit, param:{ - text:this.$refs.richTextEditor.getHtml() + text:text } };