Summernote图片上传 [英] Summernote image upload

问题描述

编辑器Summernote有问题。我想将图像上传到服务器上的目录中。
我有一些脚本：

I have problem with editor Summernote. I want to upload images into a catalog on server. I have some script:

    <script type="text/javascript">
$(function () {
        $(\'.summernote\').summernote({
                    height: 200
                  });
                     $(\'.summernote\').summernote({
                       height:300,
                       onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0],editor,welEditable);
                       }
                      });

            });
</script>
<script type="text/javascript">
function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    url = "http://localhost/spichlerz/uploads";
    $.ajax({
        data: data,
        type: "POST",
        url: url,
        cache: false,
        contentType: false,
        processData: false,
        success: function (url) {
            editor.insertImage(welEditable, url);
        }
    });
}
</script>



        <td><textarea class="summernote" rows="10" cols="100" name="tekst"></textarea></td>

当然我有所有的js和css文件。
我做错了什么？如果我单击图像上传并转到编辑器，则图像不在textarea中。

Of course I have all js and css files. What i do wrong? If I click on image upload and go to the editor, the image is not in textarea.

如果我删除sendFile函数和onImageUpload：图像保存在base64上。

If I delete sendFile function and onImageUpload: the image save on base64.

夏令时链接： http://hackerwins.github.io / summernote /

推荐答案

我测试了这段代码并且工作

I tested this code and Works

Javascript

Javascript

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 200,
            onImageUpload: function(files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            }
        });
        function sendFile(file, editor, welEditable) {
            data = new FormData();
            data.append("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "Your URL POST (php)",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    editor.insertImage(welEditable, url);
                }
            });
        }
    });


</script>

PHP

if ($_FILES['file']['name']) {
            if (!$_FILES['file']['error']) {
                $name = md5(rand(100, 200));
                $ext = explode('.', $_FILES['file']['name']);
                $filename = $name . '.' . $ext[1];
                $destination = '/assets/images/' . $filename; //change this directory
                $location = $_FILES["file"]["tmp_name"];
                move_uploaded_file($location, $destination);
                echo 'http://test.yourdomain.al/images/' . $filename;//change this URL
            }
            else
            {
              echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
            }
        }

这篇关于Summernote图片上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！