图片未进入编辑器 [PHP 图片上传]答案

【问题标题】：Image isnt getting in editor [PHP image upload]图片未进入编辑器 [PHP 图片上传]
【发布时间】：2015-08-26 07:39:11
【问题描述】：

您好，我尽我所能，并在网上搜索，但发现了。

我的 index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
  <!-- include libraries BS3 -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>

<!-- include summernote css/js-->
<link href="include/summernote.css" / rel="stylesheet">
<script src="include/summernote.min.js"></script>
<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);//You can append as many data as you want. Check mozilla docs for this
            $.ajax({
                data: data,
                type: "POST",
                url: 'savetheuploadedfile.php',
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    editor.insertImage(welEditable, url);
                }
            });
        }
    }); 
</script>
<head>
    <title>Bootstrap WysWig Editor Summernote</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
    <div class="container">
            <div class="row">
                <form class="span12" id="postForm" action="index.php" method="POST" enctype="multipart/form-data" >
                    <fieldset>
                        <legend>MyCodde.Blogspot.com Editor</legend>
                        <p class="container">
                            <textarea class="input-block-level" id="summernote" name="content" rows="18">
                            </textarea>
                        </p>
                    </fieldset>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </form>
            </div>
    </div>
</body>
</html>

我的savetheuploadedfile.php

<?php

$dir_name = "uploads/";
    move_uploaded_file($_FILES['file']['tmp_name'],$dir_name.$_FILES['file']['name']);
    echo "http://localhost:90/summernote/".$dir_name.$_FILES['file']['name'];
?>

问题是当我像上传图片一样使用它但图片没有添加到编辑器时，从 chrome 工具我看到这个错误 Uncaught TypeError: Cannot read property 'insertImage' of undefined 我找到了这个代码来修复它。

$('.summernote').summernote('editor.insertImage', url);

但静止图像正在上传但未添加到编辑器。感谢您的帮助。

【问题讨论】：

标签： php summernote

【解决方案1】：

onImageUpload 回调签名已更改，试试这个修改后的 JavaScript：

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 200,
            onImageUpload: function(files) {
                sendFile(files[0]);
            }
        });
        function sendFile(file, editor, welEditable) {
            data = new FormData();
            data.append("file", file);//You can append as many data as you want. Check mozilla docs for this
            $.ajax({
                data: data,
                type: "POST",
                url: 'savetheuploadedfile.php',
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    $('#summernote').summernote('editor.insertImage', url);
                }
            });
        }
    }); 
</script>

基本上您不再获取编辑器对象，而是必须在成功回调中自己获取它。

【讨论】：

ReferenceError: 编辑器未定义editor.insertImage(welEditable, url);