html 格式输出优化

src/components/page/comArtHtmlEdit.vue

@@ -12,7 +12,7 @@
 				{{detailTitle}}
 			</h3>
 			<div class="type_MTxt">
-				<div v-for="(item,index) in Main_List">
+				<div class="type_MTxt_item" v-for="(item,index) in Main_List" :key="index">
 					<p v-html="item.text" v-if="item.width==0"></p>
 					<p v-if="item.width!=0" class="MaxPicture">
 						<img :src="baseUrl+'public/mainimg/'+item.content" :style="'width:'+item.width+'px'">
@@ -20,10 +20,15 @@
 						</font>
 					</p>
 					<font v-if="item.getnum!=0" class="chNumer">{{item.getnum}}</font>
-					<b class="MaxBtn" @click="MTxtEdit(item,index)" style="background-color: #006699;right: 120px;">
+					<div class="tools">
+					<b class="MaxBtn" @click="MTxtEdit(item,index)" style="background-color: #006699;">
 						<i class="el-icon-edit"></i>
 					</b>
-					<b class="MaxBtn" @click="MTxtAdtxt(item,index)" style="background-color: #1c0099;right: 80px;">
+					<!-- 批量添加 -->
+					<b class="MaxBtn" @click="showMultAdd(item,index)" style="background-color: #bc9feb;">
+						<svg t="1689577244398" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3063" width="16" height="16"><path d="M793.343512 870.449643H76.775179c-42.482265 0-76.775179-34.292913-76.775179-76.775179V77.106131C0 34.623865 34.292913 0.330952 76.775179 0.330952h537.42625c14.331367 0 25.591726 11.26036 25.591726 25.591726s-11.26036 25.591726-25.591726 25.591727H76.775179c-14.331367 0-25.591726 11.26036-25.591727 25.591726v716.568333c0 14.331367 11.26036 25.591726 25.591727 25.591726h716.568333c14.331367 0 25.591726-11.26036 25.591726-25.591726v-281.508988c0-14.331367 11.26036-25.591726 25.591726-25.591726s25.591726 11.26036 25.591727 25.591726v281.508988c0 42.482265-34.292913 76.775179-76.775179 76.775179z" fill="#ffffff" p-id="3064"></path><path d="M946.893869 1024H281.508988c-14.331367 0-25.591726-11.26036-25.591726-25.591726s11.26036-25.591726 25.591726-25.591726h665.384881c14.331367 0 25.591726-11.26036 25.591726-25.591727V435.390298c0-14.331367 11.26036-25.591726 25.591727-25.591727s25.591726 11.26036 25.591726 25.591727v511.834523c0 42.482265-34.292913 76.775179-76.775179 76.775179zM485.219129 566.93177c-20.473381 0-39.411258-8.189352-54.25446-22.520719L238.003054 350.937601c-10.23669-10.23669-10.23669-26.103561 0-36.340251s26.103561-10.23669 36.340251 0l193.47345 193.47345c5.118345 5.118345 11.26036 7.677518 18.426043 7.677518 6.653849 0 13.307698-3.071007 18.426043-8.189353l475.494272-499.550495c9.724856-10.23669 26.103561-10.748525 36.340251-1.023669 10.23669 9.724856 10.748525 26.103561 1.02367 36.340251L541.009092 542.875548c-14.331367 15.355036-33.781079 23.544388-54.766294 24.056222h-1.023669z" fill="#ffffff" p-id="3065"></path></svg>
+					</b>
+					<b class="MaxBtn" @click="MTxtAdtxt(item,index)" style="background-color: #1c0099;">
 						<svg t="1685694820833" class="icon" viewBox="0 0 1025 1024" version="1.1"
 							xmlns="http://www.w3.org/2000/svg" p-id="10080" width="15" height="15">
 							<path
@@ -31,7 +36,7 @@
 								fill="#ffffff" p-id="10081"></path>
 						</svg>
 					</b>
-					<b class="MaxBtn" @click="MTxtPic(item,index)" style="background-color: #13bc20;right: 40px;">
+					<b class="MaxBtn" @click="MTxtPic(item,index)" style="background-color: #13bc20;">
 						<svg t="1684978324047" class="icon" viewBox="0 0 1024 1024" version="1.1"
 							xmlns="http://www.w3.org/2000/svg" p-id="1967" width="15" height="15">
 							<path
@@ -39,12 +44,18 @@
 								fill="#ffffff" p-id="1968"></path>
 						</svg>
 					</b>
+					<!-- 回车 -->
+					<b class="MaxBtn" @click="addReturn(item,index)" style="background-color: #f0d22c;">
+						<svg t="1689578654755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3402" width="16" height="16"><path d="M350.814815 797.392593c-5.499259 0-10.903704-2.085926-15.075556-6.257778l-113.777778-113.777778c-8.343704-8.343704-8.343704-21.807407 0-30.151111l0.18963-0.18963 113.588148-113.588148c8.343704-8.343704 21.807407-8.343704 30.151111 0s8.343704 21.807407 0 30.151111L267.188148 662.281481l98.702222 98.702223c8.343704 8.343704 8.343704 21.807407 0 30.151111-4.171852 4.171852-9.576296 6.257778-15.075555 6.257778z" p-id="3403" fill="#ffffff"></path><path d="M604.728889 683.614815h-367.881482c-11.757037 0-21.333333-9.576296-21.333333-21.333334s9.576296-21.333333 21.333333-21.333333h367.881482c71.86963 0 130.37037-58.500741 130.37037-130.37037v-208.592593c0-11.757037 9.576296-21.333333 21.333334-21.333333s21.333333 9.576296 21.333333 21.333333v208.592593c0 46.08-18.014815 89.505185-50.820741 122.216296C694.139259 665.6 650.714074 683.614815 604.728889 683.614815z" p-id="3404" fill="#ffffff"></path></svg>
+					</b>					
 					<!-- 		<b class="MaxBtn" @click="MTxtTable(item,index)" style="background-color: #e07404;right:40px;">
 						<i class="el-icon-document-add"></i>
 					</b> -->
-					<b class="MaxBtn" @click="MTxtDelet(item,index)" style="background-color: #bc1a13;right: 0px;">
+					<b class="MaxBtn" @click="MTxtDelet(item,index)" style="background-color: #bc1a13;">
 						<i class="el-icon-delete"></i>
-					</b>
+					</b>					
+					
+				</div>
 				</div>
 			</div>
 			<div style="height: 20px;"></div>
@@ -181,8 +192,8 @@
 					<b>{{lineStyle.titleTop}}</b>
 				</p>
 				<div class="lineAll" :style="'width:'+lineStyle.tabwith+'%'">
-					<div v-for="item in lineTable" class="lineTit">
-						<div v-for="(eqrt,iner) in item" :style="'width:'+lineStyle.arrwith[iner]+'%'">
+					<div v-for="(item, index) in lineTable" class="lineTit" :key="index">
+						<div v-for="(eqrt,iner) in item" :style="'width:'+lineStyle.arrwith[iner]+'%'" :key="iner">
 							{{eqrt}}
 						</div>
 					</div>
@@ -196,11 +207,29 @@
 				</el-button>
 			</span>
 		</el-dialog>
-
+		<el-dialog ref="multAdd" title="Add in bulk"
+			:visible.sync="multAddVisible"
+			width="800px">
+			<div>
+				<div class="logtips">
+					<p >Paste the contents of the wold file here, delete the carriage return at the end and click "Submit".</p>
+				</div>
+				<vue-ueditor-wrap v-model="wordText" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
+			</div>
+			<span slot="footer">
+				<span slot="footer" class="dialog-footer">
+					<el-button @click="multAddVisible = false">Cancel</el-button>
+					<el-button v-if="saveMode == 'mult'" type="primary" @click="saveMultAdd">Add</el-button>
+					<el-button v-if="saveMode == 'edit'" type="primary" @click="saveEdit">Save</el-button>
+					<el-button v-if="saveMode == 'addOneText'" type="primary" @click="saveAddOne">Add</el-button>
+				</span>
+			</span>
+		</el-dialog>
 	</div>
 </template>
 
 <script>
+import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
 	export default {
 		data() {
 			return {
@@ -230,15 +259,153 @@
 					imageUrl: '',
 					width: '500'
 				},
-				pictVisible: false,
+				wordText:'',
+				editorConfig: {
+					// 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
+					UEDITOR_HOME_URL: "/UEditor/",
+					// serverUrl: "//ueditor.zhenghaochuan.com/cos",	
+					serverUrl: "",									
+					
+				},
+				pictVisible:false,
+				multAddVisible:false,				
+				multAdd:{
+					// 批量添加项
+					article_id:null,
+					pre_id:null,
+
+					contents:[],  // 识别出的word引用数组
+					article_main_id:null,
+				},
+				saveMode:''
+				
 			};
 		},
 
 		created() {
 			this.getDate()
 		},
-
+		components:{
+			VueUeditorWrap
+		},
 		methods: {
+			// 添加空白行
+			addReturn(item, index){
+				this.$api
+					.post('api/Production/addWebMainEmpty', {
+						'article_id':this.Art_web_Id,
+						'pre_id': item.article_main_id
+					} ).then((res)=>{
+							if (res.code == 0) {								
+								this.getDate()															
+							}else{
+								this.$message.error(res.msg);
+							}
+						}).catch(err => {
+								console.log(err);
+							});
+			},
+			// 显示批量添加窗口
+			showMultAdd(item,index){							
+				this.multAdd.article_id = this.Art_web_Id;
+				this.multAdd.pre_id = item.article_main_id;
+				this.multAddVisible = true
+				this.saveMode = 'mult'
+				// console.log(this.multAdd,'multAdd')
+			},
+			// 提交批量添加数据
+			saveMultAdd(){				
+				var pp = this.wordText.split('</p>')
+				var ss = []
+				var re = /<[^>]+>/gi;
+				var nbsp = /&nbsp;/gi;
+				pp.forEach(element => {
+				element = element.replace(re, "")
+				element = element.replace(nbsp,"")
+				ss.push(element)
+				});
+				// 去掉最后一个数据
+				// console.log(ss[ss.length-1].length)
+				if(ss[ss.length-1].length <= 0){
+					this.multAdd.contents = ss.slice(0,-1)
+				}else{
+					this.multAdd.contents = ss
+				}			
+				this.multAdd.contents.length > 0 ? this.wordSubmit() : this.$message.error('Please enter content in the editor before submitting!');
+			},
+			// 发送后台
+			wordSubmit(){
+				// console.log(this.multAdd.contents)				
+				this.$api
+					.post('api/Production/addWebMains', {
+						'article_id': this.multAdd.article_id,
+						'pre_id': this.multAdd.pre_id,
+						'contents':this.multAdd.contents
+					} ).then((res)=>{
+							if (res.code == 0) {
+								this.multAddVisible = false
+								this.multAdd.contents = []
+								this.multAdd.pre_id = ''
+								this.wordText = ''
+								this.saveMode = ''
+								this.$message.success('successed!');
+								this.getDate()																
+							}else{
+								this.$message.error(res.msg);
+							}
+						}).catch(err => {
+								console.log(err);
+							});
+				},
+			// 编辑文本(新)
+			saveEdit(){
+				this.$api
+					.post('api/Production/editWebMain', {
+							article_main_id: this.multAdd.article_main_id,
+							type: 'content',
+							content: this.wordText
+						})
+						.then(res => {
+							if (res.code == 0) {
+								this.$message.success('Successfully edit text!')
+								this.multAddVisible = false
+								this.multAdd.article_main_id = ''
+								this.wordText = ''
+								this.saveMode = ''
+								this.getDate()
+							} else {
+								this.$message.error(res.msg);
+							}
+						})
+						.catch(err => {
+							this.$message.error(err);
+						});
+			},
+			// 添加段落文本（新）
+			saveAddOne(){
+				this.$api
+						.post('api/Production/addWebMain', {
+							'article_id':this.Art_web_Id ,
+							'pre_id': this.multAdd.pre_id,
+							'type': 'content',
+							'content': this.wordText,							
+						})
+						.then(res => {
+							if (res.code == 0) {
+								this.$message.success('Successfully add text!')								
+								this.multAddVisible = false
+								this.multAdd.pre_id = ''
+								this.wordText = ''
+								this.saveMode = ''
+								this.getDate()
+							} else {
+								this.$message.error(res.msg);
+							}
+						})
+						.catch(err => {
+							this.$message.error(err);
+						});
+			},
 			// 获取数据
 			getDate() {
 				const loading = this.$loading({
@@ -275,11 +442,18 @@
 
 			// 修改段落/图片
 			MTxtEdit(val, num) {
+				// console.log(val,'val')
 				if (val.width == 0) {
-					this.txtVisible = true
-					this.txtStyle = JSON.parse(JSON.stringify(val))
-					this.txtStyle.index = num
-					this.txtStyle.visiTitle = 'Edit Text'
+					this.multAdd.article_id = this.Art_web_Id;
+					this.multAdd.article_main_id = val.article_main_id;
+					this.wordText = val.text
+					this.multAddVisible = true
+					this.saveMode = 'edit'
+					// 以前的
+					// this.txtVisible = true
+					// this.txtStyle = JSON.parse(JSON.stringify(val))
+					// this.txtStyle.index = num
+					// this.txtStyle.visiTitle = 'Edit Text'
 				} else {
 					this.picStyle = JSON.parse(JSON.stringify(val));
 					this.picStyle.type = 'img';
@@ -293,12 +467,17 @@
 
 			// 添加段落
 			MTxtAdtxt(val, num) {
-				this.txtStyle.visiTitle = 'Add Text'
-				this.txtStyle.article_id = this.Art_web_Id;
-				this.txtStyle.pre_id = val.article_main_id;
-				this.txtStyle.type = 'content'
-				this.txtStyle.text = ''
-				this.txtVisible = true
+				this.multAdd.article_id = this.Art_web_Id;
+					this.multAdd.pre_id = val.article_main_id;				
+					this.multAddVisible = true
+					this.saveMode = 'addOneText'
+					this.wordText = ''
+				// this.txtStyle.visiTitle = 'Add Text'
+				// this.txtStyle.article_id = this.Art_web_Id;
+				// this.txtStyle.pre_id = val.article_main_id;
+				// this.txtStyle.type = 'content'
+				// this.txtStyle.text = ''
+				// this.txtVisible = true
 			},
 
 
@@ -542,6 +721,12 @@
 </script>
 
 <style scoped>
+/* 隐藏编辑器底部内容 */
+/deep/ #edui1_bottombar{display: none;} 
+/* 编辑器高度 */
+/deep/ #edui1_iframeholder{ height: 260px;} 
+.logtips{margin-bottom: 15px; color: #666;}
+	.type_MTxt_item .tools{position: absolute; right: 0; top: 0; z-index: 1; width: 280px;}
 	.lineStyle {
 		border-top: 1px solid #0066994d;
 		padding: 20px 20px 40px 20px;
@@ -676,10 +861,10 @@
 		font-size: 13px;
 	}
 
-	.type_MTxt>div .MaxBtn {
-		position: absolute;
+	.type_MTxt>div .MaxBtn { display:inline-block; float: left; margin-left: 15px; text-align: right;
+		/* position: absolute;
 		right: 0;
-		top: -1px;
+		top: -1px; */
 		color: #fff;
 		border-radius: 50px;
 		font-size: 15.5px;

src/components/page/editPublicRefRdit.vue

@@ -360,9 +360,12 @@ export default {
 			element = element.replace(nbsp,"")
 			ss.push(element)
 			});
-			// 去掉最后一个数据
-		// console.log(pp,ss.slice(0,-1))
-			this.wordTextArr = ss.slice(0,-1)
+			// 去掉最后一个空白数据
+			if(ss[ss.length-1].length <= 0){
+				this.wordTextArr = ss.slice(0,-1)
+			}else{
+				this.wordTextArr = ss
+			}
 			this.wordTextArr.length > 0 ? this.wordSubmit() : this.$message.error('Please enter content in the editor before submitting!');
 		},
 		// 发送后台