summernote富文本編輯器
<!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>
summernote富文本編輯器