使用 TinyMCE 上传图片到服务器答案

【问题标题】：Using TinyMCE to upload images to server使用 TinyMCE 上传图片到服务器
【发布时间】：2017-10-31 02:28:09
【问题描述】：

我正在使用名为 TinyMCE 的所见即所得编辑器。我想让它让用户能够上传到我的服务器。到目前为止，这是我所拥有的：

HTML

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
</head>

<body>
    <div id="container">
       <form method="post">
            <textarea id="editor"></textarea>

            <input type="submit">
        </form>
    </div>
</body>
</html>

Javascript

<script>
    tinymce.init({
        selector: '#editor',
        theme: 'modern',
        browser_spellcheck: true,
        height: 480,
        images_upload_url: 'resources/scripts/postAcceptor.php',
        images_upload_base_path: '/some/basepath',
        plugins: [
            'advlist autolink link code image lists charmap print preview hr anchor pagebreak spellchecker',
            'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
            'save table contextmenu directionality emoticons template paste textcolor'
        ],

        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | fontselect'
    });

    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>

但是，当我尝试上传图片时，出现以下错误：

未捕获的类型错误：无法读取 null 的属性“uploadImages”

为什么会出现此错误？如何修复它以便用户可以将图像上传到服务器？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您正在尝试在 TinyMCE 完全初始化之前调用 tinymce.activeEditor。

您需要将您的函数放在init_instance_callback 中，以便在编辑器安全加载后调用它。 https://www.tinymce.com/docs/configure/integration-and-setup/#init_instance_callback

【讨论】：

在init_instance_callback 里面我把editor.uploadImages(); 之前的错误消失了，但是当我尝试上传图片时，我在控制台中收到了这个错误：Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.g.onload
当我执行我在那里的功能时，我收到一个 500 服务器错误，这意味着上传失败，因为没有要上传的文件，但是当我放入一个文件时，它给了我意外令牌错误