Как установить расширения изображения для диалога вставки изображения Summernote - PullRequest
Новая
       12

Как установить расширения изображения для диалога вставки изображения Summernote

0 голосов
/ 27 февраля 2019

Я использую Summernote , и все работает отлично, но есть одна вещь, которую я не могу понять.Ниже приведены настройки, которые я использую для SummerNote: 

        summerNoteElement.summernote({
        toolbar: [
            ['magic', ['style', 'h1', 'h2', 'h3', 'h4']],
            ['actions', ['undo', 'redo']],
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['fontname', 'strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['media', ['picture', 'video', 'link', 'table', 'hr']],
            ['insert', ['map', 'localmap']],
            ['uploadcare', ['uploadcare']],
            ['misc', ['help', 'fullscreen']] 
        ],
        height: 300,
        maximumImageFileSize: maxImageFileSize,
    }

Теперь я прилагаю скриншоты здесь, чтобы показать, что я хочу изменить.Поэтому я нажимаю кнопку вставки изображения на панели ниже: enter image description here

Затем нажимаю Выбрать файлы: enter image description here

Теперь, есливыбрав расширения файлов, вы увидите список разрешенных форматов изображений: enter image description here

Что мне нравится делать, так это ограничивать эти расширения только несколькими, такими как JPG, BMP, PNG.

Есть ли какая-либо конфигурация, которую мне не хватает, или хитрость, чтобы сделать это?Спасибо.

1 Ответ

0 голосов
/ 21 июня 2019

summernote не имеет этой опции для управления расширением, оно принимает все виды изображений, но мне нужно было выпустить файл, загруженный в формате pdf, и найти решение:

в основном файле summernote.js найдите строку: 

'type = "file" name = "files" accept = "image / *" multiple = "multiple" />' +

и измените accept = "image / *" на нужные вам форматы, например: 

' type="file" name="files" accept="image/gif,image/jpeg,image/jpg,image/png,application/pdf,application/vnd.ms-excel,application/msword, application/vnd.ms-powerpoint,text/plain" multiple="multiple" />' +

Надеюсь, это поможет

Для тех, кому нужен полный код для отправки в дополнение к изображениям также файлов pdf, doc, txt и т. Д. Сервером через summernote, следует:

Js код 

$ (document) .ready (function () {

        (summernote) summernote ({
           toolbar: [
            ['myotherbutton', ['parameters']],
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear'
            ['fontname', ['fontname']],
['fontsize', ['fontsize']],
            ['color', ['color']]
            ['for', ['ul', 'ol', 'paragraph']]
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr', 'codeview']]
],
lang: 'pt-BR',
height: 300,
minHeight: null,
maxHeight: null,
            callbacks: {
                onImageUpload: function (files) {
                    uploadFile (files [0]);
                },
onMediaDelete: function (target) {
                alert (target [0] .src)
                deleteFile (target [0] .src);
}
            }
        });

    function uploadFile (file) {
       
   data = new FormData ();
        data.append ("file", file);

        $ .ajax ({
            date: date,
            type: "POST",
            url: "../midia/upload.php", // replace with your url
            cache: false,
            contentType: false,
            processData: false,
            success: function (url) {

alert (url);

function checkURL (url) {
return (url.match (/ \. (jpeg | jpg | gif | png) $ /)! = null);
}

if (checkURL (url)) {

                var linkfile = url.split ("Images /");

alert (linkfile [1]);

$ image = "../midia/Images/"+linkfile[1];

$ ('# publisher'). summernote ("insertImage", $ image);

} else {

var linkfile = url.split ("Images /");

$ ('# publisher'). summernote ('createLink', {
text: linkfile [1],
url: url,
isNewWindow: true
});

}

            }
        });
    }

function deleteFile (src) {

    $ .ajax ({
        date: {src: src},
        type: "POST",
        url: "../midia/delete.php", // replace with your url
        cache: false,
        success: function (resp) {
            console.log (resp);
        }
    });
}


});

send phpфайлы в папку / media /

upload.php 

<? php
      $ allowed = array ('png', 'jpg', 'gif', 'pdf', 'doc', 'docx', 'txt', 'mp3');
        if (isset ($ _ FILES ['file']) && $ _FILES ['file'] ['error'] == 0) {
            $ extension = pathinfo ($ _FILES ['file'] ['name'], PATHINFO_EXTENSION);
            if (! in_array (strtolower ($ extension), $ allowed)) {
                 echo 'AN ERROR OCCURED - INVALID IMAGE';
                exit;
            }
            if (move_uploaded_file ($ _FILES ['file'] ['tmp_name'], '../midia/Images/'.$_FILES['file']['name'])) {
                echo $ _SERVER ['SERVER_NAME']. dirname ($ _ SERVER ['PHP_SELF']). '/ Images /'.$_ FILES [' file '] [' name ']; // echo absolute file_url
                exit;
            }
        }
        echo 'AN ERROR OCCURED';
        exit;
?>

delete.php 

<? php

$ url = explode ("Images", $ _ POST ['src']);

        $ file_name = str_replace ($ url [0], '', $ _ POST ['src']); // striping host to get relative path

        if (unlink ($ file_name))
        {
            echo 'file deleted!';
        }
?>
...