使用tinymce发布的图片有大小限制吗?

tsm1rwdh  于 2021-07-26  发布在  Mysql
关注(0)|答案(3)|浏览(1044)

我在一个网站,其中包括一个博客类型的部分工作。我有一个发布系统,其中来自编辑器的输入被发送到mysql数据库表。到目前为止,除了添加本Map像外,其他一切都正常。如果图像的文件大小非常小,它就可以工作,否则它不会显示,有时会清除$\u post['body]中的所有内容。有没有一种方法可以放大图像?
以下是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();
}
});
zlhcx6iw

zlhcx6iw1#

tinymce已经有了一种方法来处理插入本地映像并将其发送到服务器:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
如果您在编辑器上配置此选项 init() 编辑器的图像将自动神奇地上传给你处理时,它插入。这将达到您的最终目标的形象是在一个服务器和服务器上 src 属性只指向图像,而不是在html内容中有大的base64图像。

envsm3lx

envsm3lx2#

我面临同样的问题,通过将列类型从text改为longtext来解决

ddrv8njm

ddrv8njm3#

与其将图像保存在数据库中,不如将其保存为文件夹中的文件。根据tinymce文档,有两种方法可以在服务器中上传图像。
使用 uploadImages() 表格提交前
功能- uploadImages() -将所有上传到编辑器的图片,逐一发送到 images_upload_url 通过post方法,将该图像的scr属性设置为包含location属性的json对象。

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

服务器应该返回类似json的

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

设置为发布图像的src属性。上传图片 images_upload_handler 如果您要使用自定义逻辑的自己的方法,则使用它。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);
  }});

相关问题