yangchaojie
/
Blog


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
							{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新文章</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> -->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <link href="{% static 'tags-input/jquery.tagsinput.min.css' %}" rel="stylesheet">
    <link href="{% static 'tags-input/jquery-ui.min.css' %}" rel="stylesheet">
    <link href="{% static 'semantic.min.css' %}" type="text/css" rel="stylesheet">
    <style>
        .ui-autocomplete {
            position: absolute;
            z-index: 100000;
            cursor: default;
            padding: 0;
            margin-top: 2px;
            list-style: none;
            background-color: #ffffff;
            border: 1px solid #ccc;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        .ui-autocomplete > li {
            padding: 3px 20px;
        }

        .ui-autocomplete > li.ui-state-focus {
            background-color: #DDD;
        }

        .ui-helper-hidden-accessible {
            display: none;
        }

        html,
        body {
            background-color: #fff;
            height: 100%;
            overflow: hidden;
            color: #333;
        }

        #top-container {
            border-bottom: 1px solid #e8e8e8;
            padding-left: 30px;
        }

        #editor-toolbar {
            width: 1350px;
            background-color: #FCFCFC;
            margin: 0 auto;
        }

        #content {
            height: calc(100% - 40px);
            background-color: rgb(245, 245, 245);
            overflow-y: auto;
            position: relative;
        }

        #editor-container {
            width: 850px;
            margin: 30px auto 150px auto;
            background-color: #fff;
            padding: 20px 50px 50px 50px;
            border: 1px solid #e8e8e8;
            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
        }

        #title-container {
            padding: 20px 0;
            border-bottom: 1px solid #e8e8e8;
        }

        #title-container input {
            font-size: 30px;
            border: 0;
            outline: none;
            width: 100%;
            line-height: 1;
        }

        #editor-text-area {
            min-height: 900px;
            margin-top: 20px;
        }

        #tags_tag {
            border: 0;
            padding: 6px;
            height: 100%;
        }
    </style>
</head>

<body>
{% csrf_token %}
<div id="top-container" style="padding-left: 6px;">
    <p style="text-align:right;padding: 2px;">
        <a class="ui button secondary mini" href="/management"><i class="angle left icon"></i>返回</a>
        <a class="ui button youtube mini" id="restore" onclick="restore()"><i class="trash alternate icon"></i>恢复</a>
        <a class="ui button primary mini" onclick="submit(-1)"><i class="send icon"></i>发布</a>
    </p>
</div>

<div style="border-bottom: 1px solid #e8e8e8;">
    <div id="editor-toolbar"></div>
</div>
<div id="content">
    <div id="editor-container">
        <div id="title-container">
            <input id="page_title" placeholder="Page title...">
        </div>
        <div id="editor-text-area"></div>
    </div>
</div>

<div class="ui longer modal">
    <div class="header">
        额外信息
    </div>
    <div class="scrolling content">
        <div class="description">
            <form onsubmit="return false" id="article_form" method="post" class="ui form">
                {% csrf_token %}
                <div class="field">
                    <label>标题</label>
                    <div class="field">
                        <input readonly type="text" id="title" name="title" placeholder="标题">
                    </div>
                    <div class="field">
                        <label>摘要</label>
                        <textarea type="text" name="intro"
                                  placeholder="摘要">{{ article.intro }}</textarea>
                    </div>
                </div>
                <div class="field">
                    <div class="fields">
                        <div class="field">
                            <label>栏目</label>
                            <select name="category" class="ui dropdown">
                                {% for item in category %}
                                    <option value="{{ item.id }}">{{ item.name }}</option>
                                {% endfor %}

                            </select>
                        </div>
                        <div class="field">
                            <label>置顶</label>
                            <select name="is_top" class="ui  dropdown">
                                <option value="1">YES</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>标签</label>
                    <div class="fields">
                        <div class="sixteen wide field">
                            <input name="tags" id="tags" value=""/>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="actions">
        <div onclick="submit(1)" class="ui primary approve button">
            发布
        </div>
        <div onclick="submit(0)" class="ui secondary approve button">
            保存
        </div>
    </div>
</div>

<!-- 显示内容 -->

<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'semantic.js' %}"></script>
<script src="{% static 'tags-input/jquery-ui.min.js' %}"></script>
<script src="{% static 'tags-input/jquery.tagsinput.min.js' %}"></script>

<!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

<script>

    const E = window.wangEditor

    // 切换语言
    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG)
    const imageToHtmlConf = {
        type: 'image',
        elemToHtml: function imageToHtml(elemNode) {
            const {src, alt, href = '', style = {}, width, height} = elemNode || {}
            if (alt === undefined || alt === null || alt === '') {
                return `<img src="${src}" alt="${alt}">`
            } else {
                return `<img  alt="${alt}"   src="${src}" "/>`
            }
        }
    };

    const editorConfig = {
        placeholder: 'Type here...',
        scroll: false, // 禁止编辑器滚动
        MENU_CONF: {
            uploadImage: {
                server: '/management/files/upload',
                // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                fieldName: 'file',

                // 单个文件的最大体积限制，默认为 2M
                maxFileSize: 4 * 1024 * 1024, // 1M

                // 最多可上传几个文件，默认为 100
                maxNumberOfFiles: 10,

                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ['image/*'],

                // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                meta: {
                    csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val()
                },

                // 将 meta 拼接到 url 参数中，默认 false
                metaWithUrl: false,

                // 自定义增加 http  header

                // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,

                // 超时时间，默认为 10 秒
                timeout: 5 * 1000, // 5 秒
            }
        },
        onChange(editor) {
            const html = editor.getHtml()
            let title = $('#page_title').val()
            if (title === '' || title === undefined) {
                title = '未命名标题'
            }
            if (html.length > 50) {
                localStorage.setItem('article_buffer', JSON.stringify({
                    'title': title,
                    'html': html
                }))
                $('#title').val($('#page_title').val())
            }

        }
    }
    E.Boot.registerElemToHtml(imageToHtmlConf);

    // 先创建 editor
    const editor = E.createEditor({
        selector: '#editor-text-area',
        content: [],
        // html: '',
        config: editorConfig
    })

    // 创建 toolbar
    const toolbar = E.createToolbar({
        editor,
        selector: '#editor-toolbar',
        config: {
            excludeKeys: 'fullScreen',
        }
    })

    // 点击空白处 focus 编辑器
    document.getElementById('editor-text-area').addEventListener('click', e => {
        if (e.target.id === 'editor-text-area') {
            editor.blur()
            editor.focus(true) // focus 到末尾
        }
    })

    function restore() {
        if (localStorage.getItem('article_buffer') !== null) {
            let item = JSON.parse(localStorage.getItem('article_buffer'))
            $('#page_title').val(item.title)
            editor.dangerouslyInsertHtml(item.html)
        }
    }
</script>
<script>
    function submit(flag) {
        $(".ui.form").form({
            fields: {
                title: {
                    identifier: "title",
                    rules: [
                        {
                            type: "empty",
                            prompt: "请输入标题"
                        }
                    ]
                },
                intro: {
                    identifier: "intro",
                    rules: [
                        {
                            type: "empty",
                            prompt: "请输入摘要"
                        }
                    ]
                }
            },
            inline: true,
            on: "blur"
        });
        $('#title').val($('#page_title').val())
        if (flag === -1) {
            $('.ui.longer.modal')
                .modal('show')
        } else {
            let isPass = true
            var data = $('#article_form').serializeArray();
            data.forEach((item, i) => {
                if (item.value === '') {
                    isPass = false
                }
            })
            if (isPass) {
                let formData = new FormData()
                data.forEach((item, i) => {
                    formData.append(item.name, item.value)
                })
                formData.append('html', editor.getHtml())
                formData.append('markdown', editor.getText())
                formData.append('type', 1)
                formData.append('tags', $('#tags').val())
                formData.append('status', flag)
                $.ajax('/management/article/add_article', {
                    method: 'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        window.location.href = '/management/article'
                    },
                    error: function (err) {
                    }
                })
            } else {
                alert('请检查表单')
            }
        }
    }

    $('#tags').tagsInput({
        'autocomplete_url': '/management/tags/search',
        'autocomplete': {selectFirst: true, width: '100px', autoFill: true},
        'height': '100px',
        'width': '100%',
        'interactive': true,
        'defaultText': '添加标签',
        'delimiter': [','],   // Or a string with a single delimiter. Ex: ';'
        'removeWithBackspace': true,
        'minChars': 0,
        'maxChars': 0, // if not provided there is no limit
        'placeholderColor': '#666666',
    });
    $(".ui.toggle.button").click(function () {
        $(".mobile.only.grid .ui.vertical.menu").toggle(100);
    });

    $(".ui.dropdown").dropdown();

    function generateIntro() {
        let text = editor.getText()
        if (text.length > 20) {
            $("input[name='intro']").val(text.substring(0, 20) + '...')
        } else {
            $("input[name='intro']").val(text + '...')
        }
    }
</script>
</body>

</html>