summernote：

鏈接：https://summernote.org/deep-dive/

基於Bootstrap輕量級富文本框，支持直接粘貼圖片，開發文檔也比較全。

基本使用請自己查閱。

js：

$(‘#editor‘).summernote({
        height: 250,
        width: 1000,
        callbacks: {
           onImageUpload: function(files, editor, $editable) {
                    sendFile(files);
                }
        }
 

});

function sendFile(files, editor, $editable) {
        var size = files[0].size;
        console.log(files[0]);
        if((size / 1024 / 1024) > 2) {
            alert("圖片大小不能超過2M...");
            return false;
        }
        var data= new FormData();
        data.append("ajaxTaskFile", files[0]);
        $.ajax({
 
            data : data,
            type : "POST",
            url : “”,
            cache : false,
            contentType : false,
            processData : false,
            success: function(data) {
                    $(‘#summernote‘).summernote(‘insertImage‘,data.data);
            },
            error:function(){
 
                alert("上傳失敗");
            }
        });
    }
重寫內置的上傳圖片函數。
models：

class TestFile(models.Model):
    objectID = models.ForeignKey(TestBug, on_delete=models.CASCADE, blank=True, null=True)
    objectType = models.CharField(verbose_name=u‘對象類型‘, max_length=20, blank=False, default=‘bug‘)
    pathname = models.FileField(verbose_name=u‘路徑‘,  upload_to=‘front_static/assets/image‘)
　　　addedBy = models.CharField(verbose_name=u‘創建者‘, max_length=20, blank=False, default=‘‘)

    title = models.CharField(verbose_name=u‘圖片標題‘,   max_length=40, blank=False)
    extension = models.CharField(verbose_name=u‘後綴‘, max_length=20, blank=False)

    class Meta:
        db_table = ‘t_test_file‘

Serializer：

class TestFileSerializer(serializers.ModelSerializer):
    bug_name = ReverseRelated(source=‘objectID.title‘, many=False, read_only=True)

    class Meta:
        model = TestFile
        fields = (‘id‘, ‘objectID‘, ‘objectType‘, ‘pathname‘, ‘title‘, ‘extension‘, ‘bug_name‘ , ‘addedBy‘)

views：

class SaveFile(viewsets.ModelViewSet):
    authentication_classes = (CsrfExemptSessionAuthentication, BasicAuthentication)
    queryset = TestFile.objects.all()
    serializer_class = TestFileSerializer

    def create(self, request, *args, **kwargs):
        self.serializer_class = TestFileSerializer
        cn_name = request.COOKIES[‘cn_name‘]
        data = {
            "objectType": ‘bug‘,
            "pathname": request.data[‘ajaxTaskFile‘],
            "addedBy": urlunquote(cn_name),
            "title": ‘shhs‘,
            "extension": ‘jpg‘
        }
        serial = TestFileSerializer(data=data)
        if not serial.is_valid():
            return Response(serial.data,status=status.HTTP_400_BAD_REQUEST)

        serial.save()
        return Response(serial.data)
這樣的結果只是開發環境，圖片會保存到本地服務器，保存之後大致是這樣的

如果你需要在本地通過API訪問，參考一下配置

STATIC_URL = ‘/front_static/‘

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "front_static"),
)

urlpatterns = [
] + static( settings.STATIC_URL, document_root=‘front_static/‘ )

後續會上傳到ftp服務器。根據不同項目不同用戶創建不同目錄保存。

Django Rest Framework 使用summernote上傳圖片