后台框架富文本代码 summernote的实现

亦凉 2023-10-05 14:59 20阅读 0赞

[依赖地址 可提供技术支持 ][Link 1]

<!DOCTYPE HTML>
    <html  lang="zh" xmlns:th="http://www.thymeleaf.org">
    <meta charset="utf-8">
    <head th:include="include :: header">
    </head>
    <link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    		<form class="form-horizontal m" id="form-commodity-add">
    
    				<input id="detailfont" name="detailfont"  type="hidden">
    				<div id="editor" class="summernote"></div>
    			</div>
    			</div>
    		</form>
    	</div>
        <div th:include="include::footer"></div>
    	<script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
    	<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
        <script type="text/javascript">
    
    		var prefix = ctx + "system/commodity"
    		//summenote富文本编辑器初始化和上传文件重写
    		$(function() {
        
    			$('.summernote').summernote({
        
    				height : '220px',
    				lang : 'zh-CN',
    				callbacks: {
        
    					onImageUpload: function (files) {
        
    						sendFile(files[0], this);
    					}
    				}
    			});
    			var content = $("#detailfont").val();
    			console.log(content+"我是content");
    			$('#editor').summernote('code', content);
    			console.log("我是是是是code"+$('#editor').summernote('code', content));
    		});
    
    		// 上传文件
    		function sendFile(file, obj) {
        
    			var data = new FormData();
    			data.append("mediaFile", file);
    			$.ajax({
        
    				type: "POST",
    				url: prefix + "/uploadImage",
    				data: data,
    				cache: false,
    				contentType: false,
    				processData: false,
    				dataType: 'json',
    				success: function(result) {
        
    
    					$(obj).summernote('editor.insertImage', result.url, result.fileName);
    
    				},
    				error: function(error) {
        
    					console.log("图片上传失败。")
    				}
    			});
    		}
    
    		$("#form-commodity-add").validate({
        
    			rules:{
        
    				xxxx:{
        
    					required:true,
    				},
    			}
    		});
    
    		function submitHandler() {
        
    	        if ($.validate.form()) {
        
    	            // $.operate.save(prefix + "/add", $('#form-commodity-add').serialize());
    				var formdata = new FormData();
    				formdata.append("marketPrice", $('#marketPrice').val());
    				formdata.append("childPrice", $('#childPrice').val());
    				formdata.append("specsPrice", $('#specsPrice').val());
    				formdata.append("ticketPrice", $('#ticketPrice').val());
    				formdata.append("rebatePrice", $('#rebatePrice').val());
    				formdata.append("other", $('#other').val());
    				formdata.append("commodityBrief", $('#commodityBrief').val());
    				formdata.append("commodityCount", $('#commodityCount').val());
    				formdata.append("detailCode", $('#detailCode').val());
    				// formdata.append("commodityArea", $('#commodityArea').val());
    				formdata.append("price", $('#price').val());
                    formdata.append("typeId", $('#typeId').val());
                    formdata.append("kindId", $('#kindId').val());
    				formdata.append("mailId", $('#mailId').val());
    				formdata.append("secondKill",$('#secondKill option:selected').val());
    				formdata.append("mailDetail",$('#mailDetail option:selected').text());
    				var detailfontCode = $('.summernote').summernote('code');
    				console.log(detailfontCode+"我是富文本");
    				formdata.append("detailfont",detailfontCode);
    				if(document.getElementById("briefUrl").files[0]!==null&&typeof(document.getElementById("briefUrl").files[0]) != "undefined"){
        
    					formdata.append("briefUrl", document.getElementById("briefUrl").files[0]);
    				}else{
        
    					formdata.append("briefUrl", new File([null],null));
    				}
    				if(document.getElementById("url").files[0]!==null&&typeof(document.getElementById("url").files[0]) != "undefined"){
        
    					formdata.append("url", document.getElementById("url").files[0]);
    				}else{
        
    					formdata.append("url", new File([null],null));
    				}
    				// if(document.getElementById("detailimg").files[0]!==null&&typeof(document.getElementById("detailimg").files[0]) != "undefined"){
        
    				// 	formdata.append("detailimg", document.getElementById("detailimg").files[0]);
    				// }else{
        
    				// 	formdata.append("detailimg", new File([null],null));
    				// }
    
    				console.log(formdata);
    				$.ajax({
        
    					url: prefix + "/add",
    					data: formdata,
    					type: "post",
    					processData: false,
    					contentType: false,
    					success: function(result) {
        
    						$.operate.saveSuccess(result);
    					}
    				})
    
    	        }
    	    }
    
            $(function(){
        
                $.ajax({
        
                    url:"/system/industry/industryList",
                    type:"POST",
                    dataType:"json",
                    success:function (data) {
        
                        $("#instury").empty();
                        for(var i=0;i<data.length;i++){
        
                            $("#instury").append('<option value='+data[i].id+'>'+data[i].name+'</option>');
                        }
                    }
                })
            })
    
    
    		$("#instury").change(function () {
        
    			console.log(this.options[this.options.selectedIndex].value)
    			var indexData =this.options[this.options.selectedIndex].value
    
    			$(function(){
        
    				$.ajax({
        
    					url:"/system/commodityType/listCommodityType",
    					type:"POST",
    					data:{
        
    						industryId:indexData
    					},
    					dataType:"json",
    
    						success:function (data) {
        
    					$("#typeId").empty();
    					for(var i=0;i<data.length;i++){
        
    						$("#typeId").append('<option value='+data[i].id+'>'+data[i].name+'</option>');
    					}
    				}
    			})
    			})
    
    
    		})
    
    
    
    		$(function(){
        
    			$.ajax({
        
    				url:"/system/commodityKind/commodityKindlist",
    				type:"POST",
    				dataType:"json",
    				success:function (data) {
        
    					$("#kindId").empty();
    					for(var i=0;i<data.length;i++){
        
    						$("#kindId").append('<option value='+data[i].id+'>'+data[i].kindName+'</option>');
    					}
    				}
    			})
    		})
    
    		$(function(){
        
    			$.ajax({
        
    				url:"/system/media/mailListByUserId",
    				type:"POST",
    				dataType:"json",
    				success:function (data) {
        
    					$("#mailId").empty();
    					for(var i=0;i<data.length;i++){
        
    						$("#mailId").append('<option value='+data[i].id+'>'+data[i].name+'</option>');
    					}
    				}
    
    			})
    		})
    
    		$(function(){
        
    			$.ajax({
        
    				url:"/system/mail/mailByMailDetail",
    				type:"POST",
    				dataType:"json",
    				success:function (data) {
        
    					$("#mailDetail").empty();
    					for(var i=0;i<data.length;i++){
        
    						$("#mailDetail").append('<option value='+data[i].id+'>'+data[i].mailDetail+'</option>');
    					}
    				}
    
    			})
    		})
    
    	</script>
    </body>
    </html>

[Link 1]: https://download.csdn.net/download/sqL520lT/13451463