个人中心
gpt4 book ai didi

javascript - TinyMCE uploadImages() 函数不起作用

转载 作者：行者123 更新时间：2023-12-03 03:08:55 24 4
gpt4 key购买 nike

我正在尝试使用 TinyMCE 作为所见即所得编辑器。但是，当我尝试将图像上传到我的服务器时，我收到一条错误消息:

Cannot read property 'uploadImages' of undefined

我正在阅读确切的文档，但由于某种原因它无法识别该功能。这是我的代码:

<!DOCTYPE html>
<html>

<head>
    <link href="resources/css/index.css" rel="stylesheet" type="text/css">
    <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>
            <label>Title</label>
            <input type="text" name="title">

            <label>Description</label>
            <input type="text" name="desct">

            <textarea id="editor"></textarea>

            <input type="submit">
        </form>
    </div>
</body>
<script>
    tinymce.init({
        selector: '#editor',
        theme: 'modern',
        browser_spellcheck: true,
        height: 480,
        images_upload_url: 'resources/scripts/postAcceptor.php',
        images_upload_base_path: '/tutorials/resources/images/',
        images_upload_handler: function (blobInfo, success, failure) {
            this.activeEditor.uploadImages(function(success) {
              $.post('resources/scripts/postAcceptor.php', this.activeEditor.getContent()).done(function() {
                console.log("Uploaded images and posted content as an ajax request.");
              });
            });
        },
        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'
    });

</script>

</html>

最佳答案

错误在于，在 images_upload_handler 键所在的函数内部，代码尝试获取 this.activeEditor，但此变量返回 undefined

images_upload_handler: function (blobInfo, success, failure) {
    this.activeEditor.uploadImages(function(success) {
       $.post('resources/scripts/postAcceptor.php', this.activeEditor.getContent()).done(function() {
          console.log("Uploaded images and posted content as an ajax request.");
       });
   });
},

基于此文档 https://www.tinymce.com/docs/api/tinymce/tinymce.editor/看起来应该是tinymce.activeEditor。

PS:我不确定你想做什么。如果我理解正确的话，你不应该执行 post 方法，它应该自己执行，你应该只发送一个在 post 成功完成或失败后执行的函数。如果您将该 post 方法放入该处理程序中，也许它会被上传两次。看看完整功能的演示:https://www.tinymce.com/docs/demo/full-featured/

关于javascript - TinyMCE uploadImages() 函数不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47027982/

24 4 0
文章推荐： javascript - 读取 Flask 未设置的 cookie
文章推荐： gradle - 如何重构类似任务中的重复代码？
文章推荐： Gradle processResources 损坏 .jks
文章推荐： javascript - 调试chrome "remotely"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com