Question

我正在尝试创建wp类型的文本编辑器，以上传帖子的图像和内容。因此，我将summernote用作文本编辑器。

我想要实现的是，我要发送帖子内容，即同时发送到帖子的文本内容和媒体。这样我就可以同时处理它。

以下是我的HTML代码。

<textarea name="post_content" id="post_content" class="form-control round post_content"></textarea>

我正在使用以下jQuery代码：

$('#post_content').summernote(
                {
                    height: 300,
                    placeholder: "Type Your Post Content...",
                    toolbar: [
                                ['style', ['style']],
                                ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                                ['fontname', ['fontname']],
                                ['fontsize', ['fontsize']],
                                ['color', ['color']],
                                ['para', ['ul', 'ol', 'paragraph']],
                                ['height', ['height']],
                                ['table', ['table']],
                                ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
                                ['view', ['fullscreen', 'codeview']]
                                // ['help', ['help']]
                            ],
                    callbacks:
                        {
                            onImageUpload: function(files, editor, welEditable)
                                {
                                    for(var i = files.length - 1; i >= 0; i--)
                                        {
                                            sendFile(files[i], this);
                                        }
                                }
                        }
                });

            function sendFile(file, el)
                {
                    var form_data = new FormData();
                    form_data.append('file', file);
                    $.ajax({
                        data: form_data,
                        type: "POST",
                        url: '/image-upload.php',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(url) {
                            $(el).summernote('editor.insertImage', url);
                        }
                    });
                }

当前代码的问题是它将图像直接上传到服务器。我想单击按钮同时发送图像和内容，以便可以将文本代码存储在DB中并取出图像，以各种大小处理它们并将其存储在DB中。

但是我无法弄清楚该如何实现。

Answer 1

作为@cloudformatter的一部分，有一个embedLocalImages选项。这实质上是使用jQuery来获取一些内容，查找所有图像，将它们放在画布上，将它们作为base64编码的数据刮取，然后将图像URL替换为base64编码的数据。这仅用于嵌入该项目中本地的图像（这意味着您正在本地主机中运行），因为它将发送要远程格式化的数据，当然，远程格式化程序不知道“ http://localhost/myimage.jpg”在哪里

您可以在http://www.cloudformatter.com/CSS2PDF代码中找到它，相关部分已在此处发布。您可以采用类似的方法来用base64等效项替换所有图像，因为这样的数据是内联的。

当然，您要长期存储，这意味着如果图像在某个http：//位置更改，则图像将不会更新。您可以添加诸如data-url属性之类的内容来存储原始URL，如果您将数据带回来以进行更新，则可以使用该URL替换base64编码的数据。

embedLocalImages: function(dest) {
    jQuery(dest).find('img').each(function(index) {
        var img = this;
        var imageUrl = img.src;
        if (imageUrl.indexOf(xepOnline.Formatter.getBase()) != -1){
             var canvas = document.createElement('canvas');
             var ctx = canvas.getContext('2d');
             canvas.height = img.height;
             canvas.width = img.width;
             ctx.drawImage(img,0,0, img.width, img.height);
             var dataURL = canvas.toDataURL();
             jQuery(img).attr('src', dataURL);
            canvas = null;
        }
    });
},

如何使用Summernote通过Ajax同时传递内容和图像

1 个答案: