如何为ckeditor设置ckfinder（React.js django django rest framework）？

Question

我试图为我的最后一个学校项目创建一个Web应用程序，我决定使用CKEditor5创建丰富的测试帖子，我设法集成Ckeditor与Django，我可以成功地创建帖子从管理咏叹调和添加图像，但当我想做同样的事情从前端（反应），我面临着一些问题，我不知道如何解决。

所以，当我尝试上传图片时，我在浏览器中收到一个弹出的消息**不能上传文件**。

这是我的编辑器的代码(它可以和文本一起使用)

<CKEditor
              editor={ClassicEditor}
              data=""
              onInit={(editor) => {
                // You can store the "editor" and use when it is needed.
                console.log("Editor is ready to use!", editor);
              }}
              onChange={(event, editor) => {
                const data = editor.getData();
                this.setState({ content: editor.getData() });
              }}
              onBlur={(event, editor) => {}}
              onFocus={(event, editor) => {
                console.log("Focus.", editor);
              }}
              config={{
                ckfinder: {
                  // Upload the images to the server using the CKFinder QuickUpload command.
                  uploadUrl: "http://localhost:8000/media/uploads/",
                  options: {
                    resourceType: "Images",
                  },
                },
              }}
            />

我在uploadUrl中的url路径是我在使用我集成的admin ckeditor时放置媒体的路径，我按照我的教程来做。

这是我在sittings文件中设置的变量。

STATIC_URL = '/static/'
STATIC_ROOT = 'static/'

MEDIA_URL = '/media/'
MEDIA_ROOT = 'media/'


CKEDITOR_UPLOAD_PATH = 'uploads/'

所以我认为我不应该使用相同的路径，因为我不能POST到这个网址，我得到在本地主机控制台的错误

Forbidden (CSRF token missing or incorrect.): /media/uploads/
[22/May/2020 08:26:49] "POST /media/uploads/ HTTP/1.1" 403 2513

(我没有使用react-create-app服务器，我把react作为一个django前端应用加载在8000端口)

Answer 1

经过搜索，解决方案是你在请求的头中传递csrf_token。

所以这里我们需要先从django session中获取csrf_token，然后将其传递给服务器。

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

上面的函数会提取csrf_token，这样你就可以调用它，并将它存储在一个const

const csrftoken = getCookie('csrftoken');

然后您可以将头文件添加到您的调用中。

    uploadUrl: "http://localhost:8000/media/uploads/",
    options: {
        resourceType: "Images",
    },
    headers: {
        'X-CSRF-TOKEN': csrftoken,
    }

试试，如果不行就告诉我。

作为一个替代方案，你可以尝试用csrf_exempt的装饰器来包装你的函数，先看看是否能用，先导入它。

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt 
def my_view(request):