PHP使用summernote编辑器

summernote是一个很好用的编辑器，简单大方，基本功能都有，我只记录使用图片上传接口和获取内容接口功能的演示，其他的功能暂时还没有用到，下面是summernote编辑器的样子

1.summernote界面的代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;图集内容上传&lt;/title&gt;
    &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" rel="stylesheet"&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"&gt;&lt;/script&gt;

    &lt;link rel="stylesheet" href="/public/static/assets/css/amazeui.min.css" /&gt;
&lt;/head&gt;
&lt;body style="width: 80%;margin: auto;" &gt;
&lt;form method="post" action="/index.php/admin/picture/form" id="myform"&gt;
    &lt;div id="summernote" &gt;123&lt;/div&gt;
    &lt;input type="hidden" name="content" id="content" value=""&gt;
    &lt;div class="am-form-group" align="center"&gt;
        &lt;div class="am-u-sm-12" &gt;
            &lt;button  type="button" class="am-btn am-btn-default am-btn-danger" onclick="submit_content()"&gt;保存内容&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;


&lt;script&gt;
    function submit_content(){
        var content = $('#summernote').summernote('code');
        document.getElementById('content').value = content;
        document.getElementById('myform').submit();
    }
    $(document).ready(function() {
        var summernote = $('#summernote').summernote({
            maxHeight: 500,
            minHeight: 400,
            lang: 'zh-CN',
            focus: true,
            callbacks:{
                onImageUpload: function(files,editor,$editable){
                    sendFile(files);
                }
            }
        });
    });
    //选择图片时把图片上传到服务器再读取服务器指定的存储位置显示在富文本区域内
    function sendFile(files, editor, $editable) {
        var formdata = new FormData();
        formdata.append("file", $('.note-image-input')[0].files[0]);
        $.ajax({
            data : formdata,
            type : "POST",
            url : "/index.php/admin/picture/upload_image", //图片上传出来的url，返回的是图片上传后的路径，http格式
            cache : false,
            contentType : false,
            processData : false,
            dataType : "json",
            success: function(data) {
//                alert(data);
                //data是返回的hash,key之类的值，key是定义的文件名
                $('#summernote').summernote('insertImage', data);
            },
            error:function(){
                alert("上传失败");
            }
        });
    }
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>图集内容上传</title>

</head>

</div>

</form>

function submit_content(){

var content = $('#summernote').summernote('code');

document.getElementById('content').value = content;

document.getElementById('myform').submit();

}

$(document).ready(function() {

var summernote = $('#summernote').summernote({

maxHeight: 500,

minHeight: 400,

lang: 'zh-CN',

focus: true,

callbacks:{

onImageUpload: function(files,editor,$editable){

sendFile(files);

}

});

//选择图片时把图片上传到服务器再读取服务器指定的存储位置显示在富文本区域内

function sendFile(files, editor, $editable) {

var formdata = new FormData();

formdata.append("file", $('.note-image-input')[0].files[0]);

$.ajax({

data : formdata,

type : "POST",

url : "/index.php/admin/picture/upload_image", //图片上传出来的url，返回的是图片上传后的路径，http格式

cache : false,

contentType : false,

processData : false,

dataType : "json",

success: function(data) {

// alert(data);

//data是返回的hash,key之类的值，key是定义的文件名

$('#summernote').summernote('insertImage', data);

error:function(){

alert("上传失败");

}

});

}

</script>

</body>

</html>

`var content = $('#summernote').summernote('code');`这段代码可以获取到编辑器中的内容

sendfile函数中，url表示图片上传到PHP函数的地址，返回值为json格式的图片地址

下面是thinkphp5中的代码

public function upload_image($name){
        $image = \request()-&gt;file($name);
        if($image){
            /**
             * //判断图片文件的格式
             * 判断图片大小 最大为10mb
             */
            $info = $image-&gt;validate(['size'=&gt;10000000,'ext'=&gt;'jpg,png,jpeg'])-&gt;move(ROOT_PATH . 'public' . DS . 'uploads');
//             echo $info-&gt;getSize();
//        $info-&gt;getExtension()   //判断图片文件的格式
//        $info-&gt;getSize()&gt;10000000 //判断图片文件的格式
            if($info){
                $image_src = '/public/uploads/'.$info-&gt;getSaveName();
                return $image_src;
            }else{
                return '0';
            }
        }else{
            return '0';
        }
    }

public function upload_image($name){

$image = \request()->file($name);

if($image){

/**

* //判断图片文件的格式

* 判断图片大小最大为10mb

$info = $image->validate(['size'=>10000000,'ext'=>'jpg,png,jpeg'])->move(ROOT_PATH . 'public' . DS . 'uploads');

// echo $info->getSize();

// $info->getExtension() //判断图片文件的格式

// $info->getSize()>10000000 //判断图片文件的格式

if($info){

$image_src = '/public/uploads/'.$info->getSaveName();

return $image_src;

}else{

return '0';

}