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

最新推荐文章于 2022-08-31 14:31:44 发布

是汤圆丫

最新推荐文章于 2022-08-31 14:31:44 发布

阅读量276

点赞数

分类专栏：工作BUG相关

汤圆

本文链接：https://blog.csdn.net/sqL520lT/article/details/110644991

版权

工作BUG相关专栏收录该内容

79 篇文章 3 订阅

订阅专栏

依赖地址可提供技术支持

<!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">
<!--		
			<div class="form-group">
			<label class="col-sm-3 control-label">商品详情文本：</label>
			<div class="col-sm-8">
<!--				<p>详情</p>-->
				<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>

是汤圆丫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
后台框架富文本代码 summernote的实现

<!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"/><li
复制链接

扫一扫