summernote富文本编辑器
Posted mcll
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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富文本编辑器的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap summernote，超级漂亮的富文本编辑器