我应该如何设置以便可以使用 CKeditor4 将图像从 reactjs 上传到 django 服务器?

时间:2021-01-30 14:39:01

标签: reactjs ckeditor

在 Django 管理页面中,您可以使用 ckeditor 上传图片。但是,您不应该尝试与 reactjs 集成。 [禁止 (403) CSRF 验证失败。请求中止。] 我收到这些错误。我应该怎么办?我想将图片上传到服务器,但我不知道该怎么做。请告诉我。

Django 设置 设置.py

INSTALLED_APPS = [
    'ckeditor',
    'ckeditor_uploader',
]

CKEDITOR_UPLOAD_PATH = 'board/'
CKEDITOR_IMAGE_BACKEND = "pillow"

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

urls.py

urlpatterns = [

    path('', include('ckeditor_uploader.urls')),
    path('ckeditor/upload/', login_required(views.upload), name='ckeditor_upload'),
    path('ckeditor/browse/', login_required(never_cache((views.browse))), name='ckeditor_browse'),
    path('board/', include('board.urls')),
]
urlpatterns += \
    static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

板模型.py

from ckeditor_uploader.fields import RichTextUploadingField
class board(models.Model):
    title = models.CharField(max_length=50)
    contents = RichTextUploadingField()
    pub_date = models.DateTimeField(auto_now_add=True)

reactjs 代码

import CKEditor from 'ckeditor4-react-advanced';

function Boardwrite() {
    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;
    }
  
    const csrftoken = getCookie('csrftoken');


<CKEditor 
                  value = {content}
                  onChange = {handleChange}
                  config={{
                    extraPlugins: 'print,format,font,colorbutton,justify,uploadimage,image2',
                    filebrowserUploadMethod  : "form",
                    uiColor: "#AADC6E",
                    filebrowserUploadUrl :("http://BackEndIP:Port/media/board/"),
                    filebrowserBrowseUrl: ("http://BackEndIP:Port/ckeditor/browse/"),
                    headers: {
                      'X-CSRFToken': csrftoken,
                    }
                  }}
              />

enter image description here

0 个答案:

没有答案
相关问题