Thinkphp与summernote编辑器实现图片上传

7个月前 0 0 1998

    最近换了编辑器,轻量级别的summernote,挺好用的,不太大,之前用的是百度的编辑器ueditor,太大了,本身写这个小博客就只有几M,一个编辑器的大小居然就别我这个大的太多了,我觉得不太合适,其他在用ueditor之前就已经知道了summernote了,但是当时因为卡在了文章图片上传的地方,所以一度就放弃了,最近借助公司高手的相助,终于解决了一系列问题,终于可以安安心心用上summernote,博客一度瘦身了不少,我心里好受了不少!废话不多说了,下面就来分享一下这个编辑,希望对一些需要的人有一些帮助,文章会很详细的描述整个过程!


    首先这款编辑器是基于bootstrap的,所以你必须引入bootstrap的两个文件css和js,这里我就不多说了,用这个编辑器的人一个知道bootstrap。除了这两个之外,还要引入一个css文件【http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css】访问这个网址,然后复制粘贴就可以了,放入到你的网站目录下引入便可以了
    第一步当然就是下载summernote了,网上有很多资源,你也可以去summernote.org官网下载,没有被墙,可以放心去下载!现在就是引入的文件!一个是summernote.js,一个是summernote.css!除了这个summernote还有两个比较重要的文件,一个plugin,一个lang文件,一个是第三方插件,一个语言包,语言包只有一个有用,就是summernote-zh-CN.js,简体中文的,还有一个是台湾的,其他的你都可以删掉,或者这整个语言包都可以删除,只保留一个简体中文的js也行,插件包我现在就是用来代码高亮的,其他的我没关注!当然这是后续!这个最后说。

下面开始吧:

第一步:<div id="summernote" style="width:500px">{$articleInfo['content']}</div>

第二步:初始化编辑器

$(document).ready(function() {
        $('#summernote').summernote();
});  

第三步:设置工具栏(根据实际需要地址)

$('#summernote').summernote({
	  height: 300,
	  focus: true,
	  lang: 'zh-CN',//设置语言
	  tabsize: 4,
	  toolbar: [      
		    ['style', ['style','bold', 'italic', 'underline', 'clear']],
		    ['fontsize', ['fontsize']],
		    ['color', ['color']],
		    ['para', ['ul', 'ol', 'paragraph']],
		    ['height', ['height']],
		    ['highlight', ['highlight']],//代码高亮插件
		    ['insert', ['picture', 'link']], // no insert buttons
		    ['table', ['table']], // no table button
		    ['help', ['help']] //no help button		
	    ]
	});
$('#summernote').summernote('code');//获取内容

这样你就可以用这个编辑器啦!下面来说说怎么使用代码高亮插件!这个插件是一位国人在github分享的,你只要引入一个js文件就可以了,在summernote官网示例plugin栏目有介绍!自己可以到github下载,他这个主要结合google-code-prettify在实现高亮效果!网上有很多教程,请自行查找!

下面进入正题,其实最难的是在后端的处理,图片的上传,怎么把图片的地址替换成自己网站的图片路径!当你用这个编辑的时候,你会发现图片的格式是base64格式的!所以需要进行将这个直接变成可视化的图片,这样可以减轻数据库的压力!


//图片格式
preg_match_all('/src=[\'\"]?(.*)[\'\"]?\s+.*/iUs',$data['content'],$arr);//首先正则匹配出文章所有图片
$saveData=stripslashes($data['content']);
if(count($arr[1]) == "0"){
	$error['imgext'] = "上传图片太大!";//主要原因是如果图片过大,根本匹配不到。原因未知!
}else{
	foreach($arr[1] as $k => $vo){
		$vo = trim(stripslashes(html_entity_decode($vo)),'"');
		preg_match('/data\:image\/(\w+)\;base64\,/iUs', $vo, $tempArr);//匹配图片格式
		if(strpos($vo,':')){
		$str = str_replace($tempArr[0],"", $vo);
	        $imgname = time().rand(1000,9999).'.'.$tempArr[1];
		file_put_contents('./'.$imgpath.$imgname, base64_decode($str)); //生成图片
	        $saveData=str_replace($vo,$imgpath.$imgname,$saveData);//将文章的base64地址替换成网站的图片址
	    }
	}
}

以上便是summernote的文章上传,网上似乎有国外分享的ajax上传,但是我看不懂,只好用这个方法,还希望有更好的方法的可以与我分享,如果有疑问也可以问我!

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)

评论 (0)

    暂无评论~

njphper@copyright From 2014 to 2019-02-17