<!doctype html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
<!-- summernote富文本编辑器 -->
<link href="__STATIC__/summernote/summernote.css" rel="stylesheet">
<link href="__STATIC__/summernote/bootstrap.css" rel="stylesheet">
</head>
<body>
{include file="public/header"}
<div class="content">
<div class="main-wrap">
<form action="{:url(‘Index/insert‘)}" class="parsley-validate" enctype="multipart/form-data" method="post">
<div class="form-group-col-2">
<div class="form-label">文字描述</div>
<div class="form-cont">
<!-- 加载编辑器的容器 -->
<textarea id="summernote" class="aa" name="content" required placeholder="文字描述"></textarea>
</div>
</div>
<div class="form-group-col-2">
<div class="form-cont">
<input type="submit" class="btn btn-primary aaa" value="保存"/>
</div>
</div>
</div>
</div>
<!--form validation js -->
<script src="__STATIC__/js/common/jquery.js"></script>
<script src="__STATIC__/js/parsley.js"></script>
<script src="__STATIC__/js/zh_cn.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<!-- summernote富文本编辑器 -->
<script src="__STATIC__/summernote/summernote.js"></script>
<!-- <script src="__STATIC__/summernote/jquery-3.3.1.min.js"></script> -->
<script src="__STATIC__/summernote/bootstrap.js"></script>
<script>
//富文本编辑器
$(‘#summernote‘).summernote({
height: 400, // set editor height
width: 800,
toolbar: [
[‘style‘, [‘style‘]],
[‘style‘, [‘bold‘, ‘italic‘, ‘underline‘, ‘clear‘]],
[‘fontsize‘, [‘fontsize‘]],
[‘fontname‘,[‘fontname‘]],
[‘color‘, [‘color‘]],
[‘para‘, [‘ul‘, ‘ol‘, ‘paragraph‘]],
[‘height‘, [‘height‘]],
[‘table‘,[‘table‘]],
[‘insert‘, [‘picture‘,‘link‘]] ,
[‘help‘,[‘help‘]]
],
onImageUpload: function(files, editor, $editable) {
sendFile(files,editor,$editable);
},
onblur: function(e) {
//$(‘.summernote‘).html("");
//$(‘#content‘).html($(this).code());
validateContent();
},
onfocus:function(e){
validateContent();
},
onChange: function(contents, $editable) {
validateContent();
},
bFullscreen:false,
});
//选择图片时把图片上传到服务器再读取服务器指定的存储位置显示在富文本区域内
function sendFile(files, editor, $editable) {
var formdata = new FormData();
formdata.append("file", $(‘.note-image-input‘)[0].files[0]);
$.ajax({
data : formdata,
type : "POST",
url : "http://118.31.62.9/tcxny/public/uploads", //图片上传出来的url，返回的是图片上传后的路径，http格式
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {
//data是返回的hash,key之类的值，key是定义的文件名
$(‘#user-work-content‘).summernote(‘insertImage‘, data.message);
},
error:function(){
alert("上传失败");
}
});
}
</script>
<!-- texarea判断 -->
<script>
$(".aaa").click(function(){
if($.trim($(".aa").val())==""){
alert("内容不能为空");
}
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/mcll/p/9415767.html