我正在构建一个CMS烧瓶,我已经使用execcommands构建了一个简单的所见即所得编辑器来创建和编辑帖子,一切正常。对于insertImage命令,我使用输入元素打开目录并选择图像。它工作,当然它打开我的电脑默认文件夹。我希望它打开静态目录中的uploads文件夹,其中用户图像存储在flask中。怎么样?
我搜索了烧瓶文档,Python处理文件文档,并没有提到这一点。这是我正在为一堂课做的一个项目。我超越了这个项目的要求,但这就是我保持有趣的方式。我的意思是它应该是一个CMS权利。好吧,CMS总是有wysiwyg打开默认的“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);
})
}
});
这是我在上传文件配置的方式
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/'
所以,我意识到我必须创建一个函数来从uploads文件夹中提取图像,显示它们,获取它们的URL并将其传递给execcommand。而我做到了。
首先,使用单选按钮创建图库结构以查看文件。然后在单击execccomand insertImage链接时将库插入引导模式以触发。抓取已检查图像的URL。将它传递给我的js中的execcomand函数。
在烧瓶端获取上传目录中所有文件的列表,其中包含os.listdir(absolute / path / to / directory),返回文件的python列表。接下来,通过循环遍历列表中的文件名并添加文件名的相对路径,创建文件URL并将信息放入dict中。将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);
});
}