如何使用summernote获取用户插入的图像，并用PHP将其上传到磁盘上 - how to get the image inserted by the user using summernote and upload it on disk in PHP

how to get the image inserted by the user using summernote and upload it on disk in PHP

我在引导程序中使用summernote作为编辑器。它看起来不错，我很喜欢使用它。我可以得到用户插入的文本，但问题是，当用户插入图像时，图像的src返回到二进制文本。我不想把src的整个文本保存到数据库中，相反，我想把图像直接保存到我的磁盘驱动器上，复制图像名称并保存到数据库。

有人知道吗？

感谢

var weblayout = {
  data : { 
    rows : function() {
        return 1;
    } 
  }     
};
weblayout.data.rows();// call the function row()

演示

或

var weblayout = {
  data : { 
    rows : function() {
        return 1;
    } 
  }     
};
var fctRow = weblayout.data.rows();// call the function row()
alert(fctRow);

演示

使用Summernote图像按钮

这是我在cms中使用的一个小片段。

将图像上传功能集成到summernote

$(document).ready(function() {
    $('.editor').summernote({
        height: 300,
        toolbar: [
                ['style', ['style']],
                ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
                ['genixcms', ['elfinder']],
                ['view', ['fullscreen', 'codeview']],
                ['help', ['help']]
            ],
        onImageUpload: function(files, editor, welEditable) {
                sendFile(files[0],editor,welEditable);
            }
    });
    function sendFile(file,editor,welEditable) {
      data = new FormData();
      data.append("file", file);
        $.ajax({
            url: "saveimage.php",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
            alert(data);
              $('.editor').summernote('editor.insertImage', data);
            },
           error: function(jqXHR, textStatus, errorThrown) {
             console.log(textStatus+" "+errorThrown);
           }
        });
    }
    $(".alert").alert();
});

这个片段将使图像上传对话框将文件发送到磁盘中。但是要处理这个问题，您必须创建一个php文件来处理图像上传。看到这个小代码为我的厘米

保存图像PHP文件

$url = "http://yoursite.com";
$allowed = array('png');
if(isset($_FILES['file']) && $_FILES['file']['error'] == 0){
    $extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
    if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error"}';
        exit;
    }
    if(move_uploaded_file($_FILES['file']['tmp_name'], GX_PATH.'/assets/images/uploads/'.$_FILES['file']['name'])){
        $tmp= '/assets/images/uploads/'.$_FILES['file']['name'];
        echo $url.'/assets/images/uploads/'.$_FILES['file']['name'];
        //echo '{"status":"success"}';
        exit;
    }
}

这个php文件将把文件保存到路径中。把它插入你的数据库，我想你已经知道了。

我希望这将对你或任何有同样问题的人有所帮助。

使用elFinder文件管理器

用于使用elFinder文件管理器。请看这个答案。如何在Summernote所见即所得编辑器中添加图像管理器？

谢谢你，