summernote是一款基于bootstrap的富文本编辑器,大小只有400k,包含了常用的功能,支持图片上传,添加视频地址。等等。因为百度的ueditor、umeditor相对比较大,wangeditor在不支持移动端最后找到了这款简单、功能又挺齐全的富文本编辑器,接下来讲讲怎么在tp框架中引入这个文本编辑器。
1、下载summernore,地址:summernote官网,summernote只支持html5的页面。
2、因为是基于bootstrap的,所以要下载bootstrap,下载地址bootstrap官网。
3、前端页面引入所需文件
<!-- 首先引入jquery和bootstrap文件 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- 引入summernote文件,可以使用本地的也可以使用网上提供的 -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
4、创建一个summernote编辑器的容器
<textarea name="info" id="summernote" class="form-control"></textarea>
5、当html的文档加载完毕之后使用js创建summernote编辑器,并重写图片上传函数(因为summernote自带的图片处理函数使用base64的,所以数据量大,对数据库的开销非常大,所以要自己重写图片上传函数)
<script>
$('#summernote').summernote({
height: 300,
minHeight: null,
maxHeight: 500,
callbacks: {
onImageUpload: function (files) {
var formData = new FormData();
formData.append('file', files[0]);
$.ajax({
url: '{$smarty.const.__CONTROLLER__}/saveimg'//上传图片文件处理地址,
type: "POST",
data: formData,
dataType: 'JSON',
processData: false,//告诉jQuery不要加工数据
contentType: false,
success: function (data) {
if (data.Result == 1) {
$('#summernote').summernote('insertImage', data.Data, 'img');
} else {
alert(data.Data);
}
},
error: function (data) {
alert('图片上传出错,文件过大或者其他情况');
}
});
}
}
});
</script>
6、后端php处理传文件
public function saveimg(){//后端上传处理函数
$upload = new \Think\Upload();
$upload->maxSize=0;//(不限制上传大小,但是同时要修改php.ini中的upload_max_filesize和post_max_size上传大小限制,否则过大会报错)
$upload->rootPath='Public/Upload/';//上传图片目录
$upload->exts=array('jpg','gif','png','jpeg');//允许上传的图片格式
$info=$upload->upload();//上传
if(!$info){//上传错误,输出错误信息
$result=json_encode(
$upload->getError()
);
}else{//上传成功,输出图片地址和上传的结果,因为前端ajax接收的是json的数据,所以要进行json_encode
$url=__ROOT__."/Public/Upload/".$info['file']['savepath'].$info['file']['savename'];
$result=json_encode(
array(
'Data'=>$url,
'Result'=>1,
)
);
}
echo $result;//输出信息
}
效果:
1、编辑器
2、上传图片框
3、上传之后的图片
编辑器中的html
服务器上已经上传的图片文件
总结:summernote富文本编辑器的引入比百度的富文本编辑器简单得多,并且移动端的显示相对友好,像点击图片可以选择缩放比例,不想百度富文本编辑器,图片按照原本的大小进行插入,导致整个图片超出编辑框,而且无法进行点击缩放,summernote可以点击图片进行缩放,提供了选项,在移动端还是可以将就的进行使用,相对与wangeditor,界面也差不多,移动端wangeditor整个编辑器按钮选项没有进行折叠,好像是v3版本作者取消了折叠,原因是因为折叠后太丑。。。