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

tsm1rwdh  于 2021-06-23  发布在  Mysql
关注(0)|答案(3)|浏览(1101)

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

  1. <?php
  2. if(isset($_POST['title'], $_POST['body'])) {
  3. include 'php/mysql.php';
  4. date_default_timezone_set('America/New_York');
  5. $title = filter_input(INPUT_POST, 'title', FILTER_SANITIZE_STRING);
  6. $body = $_POST['body'];
  7. $date = date('Y/m/d');
  8. $query = "INSERT INTO posts(title,body,date)
  9. VALUES('$title','$body','$date')";
  10. $insert = runQuery($query,$conn);
  11. if(!$insert) die($conn->error);
  12. redirect('News.php');
  13. }
  14. ?>
  15. <form id="get-data-form" method="post">
  16. <table>
  17. <tr>
  18. <td><label for="title">Title</label></td>
  19. <td><input name="title" id="title" /></td>
  20. </tr>
  21. <tr>
  22. <td valign="top"><label for="body">Body</label></td>
  23. <td><textarea name="body" class="tinymce" id="body">
  24. </textarea></td>
  25. </tr>
  26. <tr>
  27. <td></td>
  28. <td><input type="submit" value="Post" /></td>
  29. </tr>
  30. </table>
  31. </form>
  32. <script type="text/javascript" src="js/jquery.min.js"></script>
  33. <script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script>
  34. <script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script>

下面是我为tinymce编写的js代码:

  1. tinymce.init({
  2. /* replace textarea having class .tinymce with tinymce editor */
  3. selector: "textarea.tinymce",
  4. /* force_p_newlines : false,
  5. force_br_newlines : true, */
  6. /* theme of the editor */
  7. theme: "modern",
  8. skin: "lightgray",
  9. /* width and height of the editor */
  10. width: "100%",
  11. height: 300,
  12. /* display statusbar */
  13. statubar: true,
  14. /* plugin */
  15. plugins: [
  16. "advlist autolink link image lists charmap print preview hr anchor pagebreak",
  17. "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
  18. "save table contextmenu directionality emoticons template paste textcolor"
  19. ],
  20. /* toolbar */
  21. toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
  22. /* enable title field in the Image dialog */
  23. image_title: true,
  24. /* enable automatic uplaods of images represented by blob or data URIs */
  25. automatic_uploads: true,
  26. /* add custom file picker only to image dialog */
  27. file_picker_types: 'image',
  28. file_picker_callback: function(cb, value, meta) {
  29. var input = document.createElement('input');
  30. input.setAttribute('type', 'file');
  31. input.setAttribute('accept', 'image/*');
  32. input.onchange = function() {
  33. var file = this.files[0];
  34. var reader = new FileReader();
  35. reader.onload = function () {
  36. var id = 'blobid' + (new Date()).getTime();
  37. var blobCache = tinymce.activeEditor.editorUpload.blobCache;
  38. var base64 = reader.result.split(',')[1];
  39. var blobInfo = blobCache.create(id, file, base64);
  40. blobCache.add(blobInfo);
  41. // call the callback and populate the Title field with the file name
  42. cb(blobInfo.blobUri(), { title: file.name });
  43. };
  44. reader.readAsDataURL(file);
  45. };
  46. input.click();
  47. }
  48. });
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对象。

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

服务器应该返回类似json的

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

设置为发布图像的src属性。上传图片 images_upload_handler 如果您要使用自定义逻辑的自己的方法,则使用它。upload handler函数有三个参数: blobInfo ,一个 success 回拨,以及 failure 回拨。它在编辑器中上载图像时触发,并通过xmlhttprequest发送图像,并使用远程图像的位置调用成功回调。

  1. tinymce.init({
  2. selector: 'textarea', // change this value according to your HTML
  3. images_upload_handler: function (blobInfo, success, failure) {
  4. var xhr, formData;
  5. xhr = new XMLHttpRequest();
  6. xhr.withCredentials = false;
  7. xhr.open('POST', 'postAcceptor.php');
  8. xhr.onload = function() {
  9. var json;
  10. if (xhr.status != 200) {
  11. failure('HTTP Error: ' + xhr.status);
  12. return;
  13. }
  14. json = JSON.parse(xhr.responseText);
  15. if (!json || typeof json.location != 'string') {
  16. failure('Invalid JSON: ' + xhr.responseText);
  17. return;
  18. }
  19. success(json.location);
  20. };
  21. formData = new FormData();
  22. formData.append('file', blobInfo.blob(), blobInfo.filename());
  23. xhr.send(formData);
  24. }});
展开查看全部

相关问题