TinyMCE 不显示图片上传按钮

Question

我是 TinyMCE 的新手，这是我第一次使用它来上传图像。 就像编辑器一样，它工作得很好，但我可以上传图像..因为上传按钮没有出现 我在插件和工具栏中添加了图像作为设置选项，我还尝试了很多不同的设置/配置并阅读了手册，但无法弄清楚问题是什么..

<script>
  tinymce.init({
    selector: '#content',
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    images_upload_url: 'postAcceptor.php',
    file_picker_callback: (callback, value, meta) => {
    // Provide file and text for the link dialog
    if (meta.filetype == 'file') {
      callback('mypage.html', { text: 'My text' });
    }

    // Provide image and alt text for the image dialog
    if (meta.filetype == 'image') {
      callback('myimage.jpg', { alt: 'My alt text' });
    }

    // Provide alternative source and posted for the media dialog
    if (meta.filetype == 'media') {
      callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
    }
  }
  });
  
  tinymce.activeEditor.uploadImages(function(success) {
    $.post('ajax/post.php', tinymce.activeEditor.getContent()).done(function() {
      console.log("Uploaded images and posted content as an ajax request.");
    });
  });
</script>

这就是“插入图像”对话框的显示方式..

事情应该是这样的：

我必须更改什么才能上传图像..？

感谢您的关注。我期待您的回复。

Answer 1

我说出了你的问题，并认为我刚刚编写的这个脚本可能会帮助你找到解决方案。拖放被禁用，因为我还没有用它测试脚本。它是如何工作的，jpg、jpeg 和 png 的大小调整为 800 x 800 像素（如果需要可以更改）。 Gif 不会调整大小，但最大大小限制为 100kb（如果需要可以更改）。所有图像都保存为 blob，因此可以轻松地将其与其他文本编辑器内容一起保存到数据库中。 希望有帮助。

tinymce.init({
    selector: 'textarea#content',
    plugins: 'media preview link emoticons help insertdatetime table anchor wordcount visualblocks image code',
    toolbar: 'undo redo | media | image | blocks | ' + 'bold italic backcolor forecolor | alignleft aligncenter ' + 'alignright alignjustify | outdent indent removeformat',
    content_css: '/css/styling.css',
    media_live_embeds: true,
    media_poster: false,
  menu: {
    file:  { title: 'File', items: 'print' },
    edit:  { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall' },
    view: { title: 'View', items: 'visualaid  visualblocks preview wordcount code' },
    insert: { title: 'Insert', items: 'table inserttable | cell row column | advtablesort | tableprops deletetable | emoticons link anchor media image | hr | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | removeformat' },
    table: { title: '', items: '' },
    tools: { title: '', items: '' },
    help:  { title: 'Help', items: 'help' },
  }, 
    block_unsupported_drop: true,
    paste_data_images:false,
    image_title: true,
    images_file_types: 'jpg,png,gif,jpeg',
    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.setAttribute('name', 'photo');
        input.addEventListener("change", (event) =>  {
            let file = event.target.files[0];
            var fTypes = ["jpg", "png", "gif", "jpeg"];
            filename = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length) || file.name;
            if (fTypes.indexOf(filename) == 2) {
                var fileSizeLimit = 0.1;
                if (file.size > fileSizeLimit * 1024 * 1024) {
                    alert(" Error! Image is too large, maximum file size allowed is 100kb");
                    return null;
                }
            }
            if (fTypes.indexOf(filename) > -1) {
                let reader = new FileReader;
                reader.readAsDataURL(file);
                reader.onload = (event) => {
                    let image_url = event.target.result;
                    let image = document.createElement("img");
                    image.src = image_url;
                    image.onload = (e) =>  {
                        var MAX_WIDTH = 800;
                        var MAX_HEIGHT = 800;
                        var width = e.target.width;
                        var height = e.target.height;
                        if (width > height) {
                            if (width > MAX_WIDTH) {
                                height = height * (MAX_WIDTH / width);
                                width = MAX_WIDTH;
                            }
                        } else {
                            if (height > MAX_HEIGHT) {
                                width = width * (MAX_HEIGHT / height);
                                height = MAX_HEIGHT;
                            }
                        }
                        let canvas = document.createElement("canvas");
                        canvas.width = width;
                        canvas.height = height;
                        const context = canvas.getContext("2d");
                        context.drawImage(image, 0, 0, canvas.width, canvas.height);
                        let new_image_url = context.canvas.toDataURL();
                        let new_image = document.createElement("img");
                        new_image.src = new_image_url;
                        
                        async function doBlob() {
                            const base64Response = await fetch(new_image.src);
                            const blob = await base64Response.blob();
                            let obj = '';
                            if (fTypes.indexOf(filename) == 2) {
                                obj = file;
                            }else{
                                obj = blob;
                            }
                            var id = 'blobid' + (new Date()).getTime();
                            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                            var base64 = reader.result.split(',')[1];
                            var blobInfo = blobCache.create(id, obj, base64);
                            blobCache.add(blobInfo);
                            cb(blobInfo.blobUri(), {
                                title: file.name
                            });             
                        }
                        doBlob();
                    }
                }
            } else {
                alert('Sorry, we only allow, jpg, png, gif or jpeg files, Please choose another file to upload.');
                return null;
            }
        });
        input.click();
    },
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});