Как установить каталог по умолчанию для wysisyg в редакторе insertImage во фляге - PullRequest
Новая
       18

Как установить каталог по умолчанию для wysisyg в редакторе insertImage во фляге

1 голос
/ 25 апреля 2019

Я создаю CMS в колбе, и я создал простой редактор wysiwyg, использующий команды exec для создания и редактирования сообщений, и все работает. Для команды insertImage я использую элемент ввода, чтобы открыть каталог и выбрать изображение. Он работает, за исключением, конечно, он открывает папку по умолчанию на моих компьютерах. Я хочу, чтобы он открыл папку загрузки в статическом каталоге, где пользовательские изображения хранятся в колбе. Как?

Я искал в документации по фляге, документации по файлам Python, и об этом ничего не сказано. Это проект, который я делаю для класса. Я иду за пределы требований к этому проекту, но именно так я делаю вещи интересными. Я имею в виду, что это должно быть правильно CMS. Ну, в CMS всегда есть wysiwyg, которые открывают папку «uploads» по умолчанию для вставки медиа. Также при создании функций загрузки я обнаружил, что при загрузке файлов в флягу нужен абсолютный путь. Но при их обслуживании необходим относительный путь. Любая точка в правильном направлении будет принята с благодарностью. Спасибо.

Вот структура 

<div class="col-md-1 tools">
   <a href="#" data-command='insertImage'data-toggle="tooltip" title="Insert Media"><i class='material-icons'>add_photo_alternate</i>
   </a>
   <div class="editorInputs">
      <input type="file" name="media" id="insertImage" 
         accept="audio/*,video/*,image/*"/>
   </div>
</div>

Вот мой сценарий js 

$('.tools a').mousedown(function(e){
let command = $(this).data('command');
 if(command == 'insertImage'){
  $(this).next().children('input').trigger('click');
      let input = $(this).next().children();
      input.on('change', function(e){
        let val = $(input).val();
        document.execCommand(command, false, val);
      })
    }
});

Вот как мой файл загрузки настраивается в колбе 

app.config['SITE_UPLOADS'] = 'D:/Courses/Development/Programming/Python/LaunchCode/LC101/unit2/build-a-blog/static/site/uploads/'
app.config['ADMIN_UPLOADS'] = 'D:/Courses/Development/Programming/Python/LaunchCode/LC101/unit2/build-a-blog/static/admin/uploads/'    
app.config['ALLOWED_IMAGE_EXTENSIONS'] = ['PNG', 'JPG', 'JPEG', 'SVG', 'GIF']
app.config['DATA_FILES'] = 'D:/Courses/Development/Programming/Python/LaunchCode/LC101/unit2/build-a-blog/data/'
app.config['RELATIVE_PATH_SITE'] = '../static/site/uploads/'
app.config['RELATIVE_PATH_ADMIN'] = '/static/admin/uploads/'

1 Ответ

0 голосов
/ 26 апреля 2019

Итак, я понял, что мне нужно создать функцию для извлечения изображений из папки загрузки, их отображения, получения их URL-адреса и передачи их в execcommand. И я сделал.

Сначала создайте структуру галереи с переключателями для просмотра файлов. Затем поместите галерею в режим начальной загрузки, чтобы она запускалась при нажатии на ссылку execccomand insertImage. Захватите URL проверенного изображения. передать его функции execcomand в моем js.

На стороне колбы получите список всех файлов в каталоге загрузки с помощью os.listdir (absolute / path / to / directory), возвращает список файлов Python. Затем создайте URL-адреса файлов и поместите информацию в текст, перебирая имена файлов в списке и добавляя относительный путь к имени файла. Передайте dict шаблону jinja2 и заполните галерею.

Наконец, выполните команду js.

Вот мой код Python и код JS. 

def get_uploads():
    list_images = os.listdir(app.config['ADMIN_UPLOADS'])
    images = []
    i =0
    length = len(list_images)
    while i < length:
        img = {}
        img['name'] = list_images[i]
        img['url'] = os.path.join(app.config['RELATIVE_PATH_ADMIN'], list_images[i])
        images.append(img)
        i+=1 
    return images

Вот мой JS. 

if(command == 'insertImage'){
      $("#uploadsGallery").modal();
      $('.ftco-animate').addClass('fadeInUp ftco-animated')
      let check = $(this).next().find('input.form-check-input');
      let val;
        check.on('change', function(e){
       val = $(this).val();          
      });     
      $('#insertImg').click(function (e) {
        r.setStart(editDiv, lastCaretPos);
        r.setEnd(editDiv, lastCaretPos);
        s.removeAllRanges();
        s.addRange(r);
        document.execCommand(command, false, val);
        check.prop('checked',  false);
      });

    }
...