Question

我正在开发一个包含博客类型部分的网站。我有一个发布系统，其中编辑器的输入发送到mysql数据库表。到目前为止，除了添加本地图像之外，一切都有效。如果图像文件大小非常小，则图像无效，否则无法显示，有时会清除$ _POST [＆＃39; body＆＃39;]中的所有内容。有没有办法让更大的图像？

这是php：

    <?php
        if(isset($_POST['title'], $_POST['body'])) {
        include 'php/mysql.php';
        date_default_timezone_set('America/New_York');
        $title = filter_input(INPUT_POST, 'title', FILTER_SANITIZE_STRING);
        $body = $_POST['body'];
        $date = date('Y/m/d');
        $query = "INSERT INTO posts(title,body,date) 
                VALUES('$title','$body','$date')";
        $insert = runQuery($query,$conn);
        if(!$insert) die($conn->error);
        redirect('News.php');

}

?>

<form id="get-data-form" method="post">
    <table>
        <tr>
            <td><label for="title">Title</label></td>
            <td><input name="title" id="title" /></td>
        </tr>
        <tr>
            <td valign="top"><label for="body">Body</label></td>
            <td><textarea name="body" class="tinymce" id="body">
            </textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Post" /></td>
        </tr>
    </table>
</form>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script>

以下是我对TinyMCE的js代码：

tinymce.init({
/* replace textarea having class .tinymce with tinymce editor */
selector: "textarea.tinymce",

/* force_p_newlines : false,
force_br_newlines : true, */

/* theme of the editor */
theme: "modern",
skin: "lightgray",

/* width and height of the editor */
width: "100%",
height: 300,

/* display statusbar */
statubar: true,

/* plugin */
plugins: [
    "advlist autolink link image lists charmap print preview hr anchor pagebreak",
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
    "save table contextmenu directionality emoticons template paste textcolor"
],

/* toolbar */
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",

/* enable title field in the Image dialog */
image_title: true,
/* enable automatic uplaods of images represented by blob or data URIs */
automatic_uploads: true,
/* add custom file picker only to image dialog */
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

    input.onchange = function() {
      var file = this.files[0];
      var reader = new FileReader();

      reader.onload = function () {
        var id = 'blobid' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        // call the callback and populate the Title field with the file name
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };

    input.click();
}
});

Answer 1

TinyMCE已经有办法处理插入本地图像并将它们发送到您的服务器：

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

如果您在init()编辑器中在编辑器上对其进行配置，则会自动神奇地上传图像，以便您在插入图像时进行处理。这将达到您在服务器上的图像的最终目标，src属性仅指向图像，而不是在HTML内容中包含大型Base64图像。

Answer 2

我遇到了同样的问题，可以通过将列类型从TEXT更改为LONGTEXT来解决

Answer 3

与其将图像保存在数据库中，不如将它们另存为文件夹中的文件更好。根据tinymce文档，可以使用两种方法在服务器中上传图像。

在表单提交之前使用uploadImages()

函数uploadImages()-将所有上传到编辑器的图像逐一发送到images_upload_url的post方法，并将该图像的scr属性设置为JSON对象，其中包含位置属性。

    tinymce.activeEditor.uploadImages(function(success) {
        document.forms[0].submit();
    });

，服务器应返回

之类的JSON。

{ location : '/uploaded/image/path/image.png' }

设置为发布图像的src属性。 upload_images

images_upload_handler 如果您打算将自己的方法与自定义逻辑一起使用，则使用它。上载处理程序函数采用三个参数：blobInfo，success回调和failure回调。当图像在编辑器中上载时触发，并通过XMLHttpRequest发送图像，并使用远程图像的位置调用成功回调。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;

xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'postAcceptor.php');

xhr.onload = function() {
  var json;

  if (xhr.status != 200) {
    failure('HTTP Error: ' + xhr.status);
    return;
  }

  json = JSON.parse(xhr.responseText);

  if (!json || typeof json.location != 'string') {
    failure('Invalid JSON: ' + xhr.responseText);
    return;
  }

  success(json.location);
};

formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());

xhr.send(formData);
  }});

使用TinyMCE发布的图像是否有尺寸限制？

3 个答案: