如何在 flask 中设置 wysisyg 编辑器 insertImage 的默认目录

Question

我正在用 Flask 构建一个 CMS，我已经使用 exec 命令构建了一个简单的所见即所得编辑器来创建和编辑帖子，一切正常。对于 insertImage 命令，我使用输入元素打开目录并选择图像。它可以正常工作，当然它会打开我的计算机默认文件夹。我希望它打开用户图像存储在 flask 中的静态目录中的上传文件夹。如何？

我搜索了 flask 文档，Python 处理文件文档，但没有提及。这是我正在为 class 做的一个项目。我正在超越这个项目的要求，但这就是我让事情变得有趣的方式。我的意思是它应该是一个 CMS 吧。好吧，CMS 始终具有打开默认 "uploads" 文件夹以插入媒体的所见即所得。此外，在创建上传功能时，我发现上传文件时 flask 需要绝对路径。但是在为他们服务时，相对路径是必要的。在正确方向上的任何一点将不胜感激。谢谢。

结构如下

<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);
      })
    }
});

这是我的上传文件在 flask 中的配置方式

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/'

Answer 1

所以，我意识到我必须创建一个函数来从上传文件夹中提取图像，显示它们，获取它们的 URL 并将其传递给 execcommand。我做到了。

首先，创建带有单选按钮的图库结构以查看文件。然后将图库放在 bootstrap 模态中，以便在单击 execccommand 和 insertImage link 时触发。抓取选中图像的 URL。将它传递给我的 js 中的 execcomand 函数。

在 flask 端获取上传目录中所有文件的列表，其中包含 os.listdir(absolute/path/to/directory)、returns 和 python 文件列表。接下来创建文件 url 并通过遍历列表中的文件名并将相对路径添加到文件名来将信息放入字典中。将字典传递给 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);
      });

    }

如何在 flask 中设置 wysisyg 编辑器 insertImage 的默认目录

How to set the default directory for wysisyg editor insertImage in flask

flask

input

wysiwyg