时间戳

首页 > 解决方案 > 如何让ckeditor图片上传简单拖拽

django - 如何让ckeditor图片上传简单拖拽

问题描述

在 CKeditor 中，我完成了 RichTextUploadingField 和所有操作。

一切正常。

我可以在顶部菜单中看到图像按钮。

但这对用户来说太混乱了。

就像单击图像按钮->上传->选择图像->将其发送到服务器。这对用户来说太多了。就像我需要它在ckeditor中非常简单的图像上传。

我想要的是简单的图片上传。意思是，用户友好，例如单击图像按钮，然后拖放或选择图像（浏览）并上传。

有很多我不想要的东西，比如图像信息、链接和高级。因为它让我的用户感到困惑。

谁能帮我这个？请。

顺便说一句，我正在使用 django-ckeditor==5.9.0

标签： djangockeditordjango-ckeditor

解决方案

设置.py

CKEditor Django 配置：

CKEDITOR_JQUERY_URL = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'

CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_IMAGE_BACKEND = "pillow"

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline'],
            ['Link', 'Unlink'],
            ['Image'],
        ],
        "filebrowserUploadUrl": "https://mywebsite.com/ckeditor/upload/",
    }
}

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

通过 Ajax 加载和上传图像的 Javascript 代码：

function cke_img_upload(input){
    var myFormData = new FormData();
    myFormData.append('upload', input.files[0]);
    $.ajax({
      url: 'http://mywebsite.com/ckeditor/upload/',
      type: 'POST',
      processData: false, // important
      contentType: false, // important
      dataType : 'json',
      data: myFormData,
      success: function (success_data) {
        ckeditor_field = $('.' + $(input).attr('id').replace('img_','')).prev()
        if (ckeditor_field[0]){
            CKEDITOR.instances[ckeditor_field.attr('id')].insertHtml(jQuery('<img/>', {src: success_data['url']}).attr('data-cke-saved-src',success_data['url']).prop('outerHTML'));
        }
      },
      error: function (error_data) {
         console.log(error_data)
      }
    });
}

function load_image_in_cke(input){

    if (input.files && input.files[0]) {

    file_extension = input.files[0].name.substring(input.files[0].name.lastIndexOf('.') + 1).toLowerCase();

    if (file_extension == "png" || file_extension == "jpeg" || file_extension == "jpg"){
        var reader = new FileReader();
        reader.onload = function (e) {
            cke_img_upload(input)
        }
        reader.readAsDataURL(input.files[0]);
    }
    else{
        show_error_toaster('Only jpg/png formats are supported !!');
    }
  }
}

CKEDITOR.on('instanceReady', function(event) {
    var cke_toolbox = $('.' + event.editor.id).find('.cke_toolbox')
    cke_toolbox.find('.cke_button__image').closest('.cke_toolbar').remove()
    cloned_copy = $('#custom_img_cke').clone().css('display','initial')
    cloned_copy.find('input').attr('id','img_'+event.editor.id)
    cke_toolbox.append(cloned_copy)
});

将此 HTML 代码粘贴到您使用 CKEditor 的文件中的任何位置：

<span id="custom_img_cke" class="cke_toolbar cke_toolbar_last" role="toolbar" style="display:none">
<span class="cke_toolbar_start"></span><span class="cke_toolgroup" role="presentation">
<label style="margin:20%;cursor:pointer;" id="cke_c" class="cke_button cke_button__image cke_button_off" href="javascript:void('Image')" title="Image"
tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_c_label" aria-describedby="cke_c_description" aria-haspopup="false" aria-disabled="false">
<input type="file" accept="image/jpeg,image/png" onchange="load_image_in_cke(this)" style="display: none; background-color: rgb(235, 235, 235);">
<span class="cke_button_icon cke_button__image_icon"
style="background-image:url('/static/ckeditor/ckeditor/plugins/icons.png?t=JB9C');
background-position:0 -960px;background-size:auto;">&nbsp;</span>
<span id="cke_c_label" class="cke_button_label cke_button__image_label" aria-hidden="false">Image</span><span id="cke_c_description" class="cke_button_label" aria-hidden="false"></span></label></span><span class="cke_toolbar_end"></span></span>

表格.py

from django import forms
import validators as vals
from ckeditor_uploader.widgets import CKEditorUploadingWidget

class ABCForm(forms.Form):
    abc_description = forms.CharField(max_length=10000, validators=[],
                                                        strip=True,
                                                        required=False,
                                           widget=CKEditorUploadingWidget(attrs={
                                           'data-field': 'abc_description',
                                           "class": "form-control abc_description",
                                           'placeholder': 'ABC Description'}))

网址.py

from django.views.decorators.cache import never_cache
from ckeditor_uploader import views as ckeditor_views


urlpatterns = [
...
url(r'^ckeditor/upload/', ckeditor_views.upload, name='ckeditor_upload'),
url(r'^ckeditor/browse/', never_cache(login_required(ckeditor_views.browse)), name='ckeditor_browse'),
...
]

推荐阅读