使用 Summernote 烧瓶并添加图像 - 获取正确的数据？

Posted 2023-03-22

【中文标题】使用 Summernote 烧瓶并添加图像 - 获取正确的数据？

【英文标题】：Flask with Summernote And Adding An image - Grabbing The Proper Data?

【发布时间】：2020-07-01 01:21:45

【问题描述】：

所以我试图获取通过summernote textarea 获取的信息。当我不添加图像时，一切正常，我从文本编辑器中看到了 html 内容。 但是当我上传图片时，它突然卡在一个循环中？？？有更多的功能实际上将信息添加到数据库中，并且带有那个可笑的 img src 的图像被保存了，但是由于某种原因它一遍又一遍地迭代 img src？从那以后，我已经将所有内容都注释掉了，只是为了打印文本字段内容，并且由于某种原因，当我单击提交按钮时，仍然会遇到无限循环？任何帮助表示赞赏，谢谢。

flask.py

 @app.route("/update", methods=["POST"])
    def update():
    # Grab Text editor content from form:
    contentInfo = request.form["content"]

    print("TEST HERE", contentInfo)

html:

<form action="/update" method="POST">
 <h1 style="text-align:center">content</h1><textarea name=content id="summernote">value</textarea>
 <input class="input-btn" type="submit" value="Update">
 </form>

在 html 中内联脚本初始化：

<script>
    $(document).ready(function() 
    $('#summernote').summernote(
        height: 300,
        minHeight: null,
        maxHeight: null,
        focus: true,
        onImageUpload: function(files, editor, welEditable) 
            sendFile(files[0],editor,welEditable);
        
        );
    );
</script>

所以文本编辑器和一切工作都很完美，但是当我添加图像并单击提交时，我的终端陷入了无限循环，实际上需要丢弃终端以使其在崩溃之前停止。 任何建议表示赞赏，谢谢。

结果：一遍又一遍......

Stack over flow 不会让我发布示例，但它只是一堆看起来像是来自 Summernote 的 img src 代码一遍又一遍

更新： - 所以我改变了一些东西，至少让它停止循环。我猜它从来没有循环它正在做的事情，实际上是打印出被抓取的内容，显然它是一堆废话。然后，我尝试使用某些参数（例如“content [”img”]）打印它，但发现它是切片，所以这显然是一个数组：但我将它放入类型中，它返回一个“字节”和 529288 的长度....大声笑！所以打印不是一个循环，它实际上是在打印这个愚蠢转换的 500k 行......（在我看来，summernote 以这种方式编译他们的图像非常愚蠢） 无论如何，想要发布当前的更改，我觉得我开始取得一些进展，因为它不再卡在尝试打印 500k 行。显然被抓取的数据是整个应用程序转换成再见？因为我觉得图像转换大约是 7k 个字符，而不是 500k...

我觉得我的问题可能是我如何尝试获取数据？由于我的应用程序是烧瓶和 python，它一直是一个错误过程，试图让它与内联 javascript 一起工作。所以我的逻辑在这里是如何工作的，是图像被放入summernote的那一刻，它被扔进python逻辑“updateTest”我在这里想要做的只是抓取图像数据，这样我就可以像我一样操作和做希望与结果。如何正确获取此信息？任何建议或见解都值得赞赏，谢谢。

更新代码：

html:
<form action="/updateTest" method="POST">
 <h1 style="text-align:center">content</h1><textarea name=content id="summernote">value</textarea>
 <input class="input-btn" type="submit" value="Update">

flask.py：

 @app.route("/updateTest", methods=["POST"])
def updateTest():
    content = request.get_data()
    print("test here", type(content))
    print("test here2", len(content))

HTML 中的内联 javascript：

$(document).ready(function() 
        $('#summernote').summernote(
            height: 300,
            focus: true,
            callbacks: 
                onImageUpload(files) 
                  sendFile(files[0], data => 
                    let imgNode = document.createElement("img");
                    imgNode.setAttribute('src', data.url)
                    $(this).summernote('insertNode', imgNode);
                  )
                
              
            );
        );
 var sendFile = function(file, callback) 
                    var data;
                    data = new FormData();
                    data.append("file", file);
                    return $.ajax(
                      url: "/updateTest",
                      data: data,
                      cache: false,
                      contentType: false,
                      processData: false,
                      type: 'POST',
                      success: function(data) 
                        return callback(data);
                      
                    );
                  ;

任何有关如何正确提取此文件/图像数据的帮助都是我现在正在寻找的。任何帮助表示赞赏，谢谢

【参考方案1】：

所以我终于想通了。这是正确的代码。现在我最初希望它可以与 S3 存储桶一起使用，所以最后，马上就去那条路线，而不是处理summernote 试图做的糟糕的转换，我建议其他人在遇到这样的事情时做同样的事情：

html:

<form action="/updateTest" method="POST">
 <h1 style="text-align:center">content</h1><textarea name=content id="summernote">value</textarea>
 <input class="input-btn" type="submit" value="Update">

在 html 中内嵌 javascript：

<style>
$(document).ready(function() 
        $('#summernote').summernote(
            height: 300,
            focus: true,
            callbacks: 
                onImageUpload(files) 
                  sendFile(files[0], data => 
                    let imgNode = document.createElement("img");
                    imgNode.setAttribute('src', data.url)
                    $(this).summernote('insertNode', imgNode);
                  )
                
              
            );
        );
                   var sendFile = function(file, callback) 
                    var data;
                    data = new FormData();
                    data.append("file", file);
                    return $.ajax(
                      url: "/addImgSummer",
                      data: data,
                      cache: false,
                      contentType: false,
                      processData: false,
                      type: 'POST',
                      success: function(data) 
                        return callback(data);
                      
                    );
                  ;
</style>

flask.py：

@app.route("/addImgSummer", methods=["POST"])
def addImgSummer():
    #Grabbing file:
    img = request.files["file"]    #<------ THIS LINE RIGHT HERE! Is #literally all I needed lol.

    # Below is me replacing the img "src" with my S3 bucket link attached, with the said filename that was added. 
    imgURL = "https://"+ S3_BUCKET_NAME +".s3.amazonaws.com/images/"+ img.filename

    return jsonify(url = imgURL)

注意我在其他地方有将数据添加到 S3 存储桶的逻辑，上面的代码只是从我的存储桶中呈现结果。我计划将我的代码上传到堆栈溢出，以了解如何使用 Summernote 执行完整的 s3 存储桶情况。因为这里只是为了完成我最初的“被卡住”的结论

无论如何，希望这可以帮助任何被困在我所做的地方的人，因为实际上没有关于如何将 Summernote 与烧瓶一起使用的适当文档......（不要误会我的意思，但没有一个有用..）并且更重要的是，没有使用比将图像转换为 7k 字节字符序列更好的方法，正如我看到的大多数人所做的那样……只是将那些可怕的废话保存在他们的数据库中……所以没有什么能正常工作，至少不是那样我发现过去 3 天的搜索..这就是我遇到的唯一可行的解​​决方案。

主要的困惑在于在前端混合 javascript，并与您的烧瓶/python 后端对话。一旦你现在如何获取这些数据，它就会一帆风顺。