编辑器实现markdown上传图片的功能

function initMarkDown() {
            editormd('editor', {
                placeholder: '请输入内容',
                height: 500,
                path: '/static/markdown_of_web/editor.md-master/lib/', //依赖组件(必填)
                imageUpload: true,
                imageUploadURL: doc_url,//接收图片的url
                imageFormats: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
                htmlDecode: true,
                toolbarIcons: function () {
                    return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon", "file"]//自定义工具栏上的按钮
                }
            })
        }

自定义工具栏的效果

pic = request.FILES.get('editormd-image-file', None)  # 获取图片对象

# 返回数据的结构，须转化为JSON类型
result = {
            'success': 1,
            'message': None,
            'url': im_url#图片的连接
        }

# 视图函数必须加上这两个装饰器，
@csrf_exempt        #图片是以post形式进行提交，所以Django会进行从csrf验证
@xframe_options_exempt   #图片的的跨域显示，不设置跨域访问限制

文件目录的结构展示

示例：

ID

所属项目ID

文件/文件夹名

类型(文件(夹))

大小

父目录ID

key

1

1

歌曲

1

null

null

null

2

1

难忘今宵.mp3

2

50MB

1

jklfad.mp3

folderID = request.GET.get('folder')    #获取当前访问的文件夹的id
if request.method == 'GET':  # 展示当前目录下的文件和文件夹
    if folderID and folderID.isdecimal():
        parent_obj = models.File.objects.filter(id=folderID, fileType=0, project=request.project).first()  # 找到父文件夹
        files = models.File.objects.filter(project=request.project, parent_id=folderID).order_by(
            'fileType')
        while parent_obj:
            parentFolder.insert(0, {'id': parent_obj.id, 'name': parent_obj.fileName})
            parent_obj = parent_obj.parent  # 找到所有的父目录
    else:
        files = models.File.objects.filter(project=request.project, parent_id=None).order_by(
            'fileType')  # 按照type从小到大，文件夹在前，文件在后
            # 当没传递参数folder时，默认访问根目录

文件上传模块

<style>
#filDiv {
            height: 40px;
            float: right;
            width: 100px;
            margin-right: 15px;
        }

        #filDiv > button {
            width: 100px;
            height: 35px;
        }

        #filDiv > input {
            opacity: 0;
            position: absolute;
            overflow: hidden;
            width: 80px;
        }
<style>

<div id="filDiv">
     <input type="file" multiple/>
     <button class="btn btn-success" type="button">
       <i class="fa fa-cloud-upload" aria-hidden="true"></i>&nbsp;文件上传
    </button>
</div>
<script>
function initUploadBtn() {
            $('#fileUploadBtn').change(function () {
                var fileList = $(this)[0].files;
                $.each(fileList, function (index, fileObj) {
                    console.log(fileObj.name)//fileObj就是文件对象，可以批量上传
                    //读取文件内容
                    var myfile = new FileReader();
                    myfile.readAsBinaryString(fileObj, 'utf-8')
                    myfile.onload = function (evt) {
                    console.log(evt.target.result)
                    }
                })
            })
        }
</script>

实现时间选择器

 <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
          rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>

<script>
            $(function () {
            initDate();

        })

        function initDate() {
            $('#id_end_time').datepicker({        //先找到时间input框
                format: 'yyyy-mm-dd',
                startData: '0',
                language: 'zh-CN',
                autoclose: true
            });
            $('#id_start_time').datepicker({
                format: 'yyyy-mm-dd',
                startData: '0',
                language: 'zh-CN',
                autoclose: true
            });

        }
</script>

利用bootstrap-select实现多选框

下载bootstrap-select

   <link href="/static/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <script src="/static/bootstrap-select/bootstrap-select.min.js"></script>

给select框添加这两个class

  'assign': widgets.Select(attrs={'class': 'selectpicker','multiple':"multiple"}),

效果

相关使用