sunny
/
webchat
ответвлено от webchat-group/webchat


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

    <title>webchat-公众号文章编辑</title>

    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />

    <link href="/ref/wangeditor5/editor.css" rel="stylesheet">
    <link href="/css/client/writer.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="/css/common/common.css">
    <link rel="stylesheet" href="/css/client/chat.css">
    <link href="/ref/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css" />

    <script src="/ref/jquery/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="/ref/layui-v2.6.8/layui/layui.js" type="text/javascript"></script>
    <script src="/ref/wangeditor5/editor.js"></script>

    <style>
        #public-account-select {
            position: relative;
            float: left;
            top: 10px;
            width: 200px;
            height: 40px;
            border-radius: 3px;
            border: 1px solid #e6e1e1;
        }
        #editor-container-box {
            min-height: 600px;
            height: auto;
            width: 700px;
            padding: 20px 80px 150px 80px;
            background-color: white;
            border: 0px;
            border-radius: 3px;
            margin-top: 130px;
            margin-bottom: 80px;
            box-shadow: 0px 0px 3px #d9d8d8;
        }
        .editor-footer {
            position: fixed;
            bottom: 0px;
            height: 60px;
            line-height: 60px;
            width: 860px;
            left: calc((100% - 860px)/2);
            background-color: #f6f8f9;
        }
        #toolbar-container {
            border: 0px;
        }
        #editor-header {
            position: relative;
            width: 100%;
            height: 60px;
        }
        #editor-title {
            line-height: 60px;
            font-size: 25px;
            text-align: left;
            width: 100%;
            border: 0px;
            padding: 12px;
            border-bottom: 1px solid whitesmoke;
        }
        #yipian-header {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 60px;
            background-color: white;
            z-index: 999;
        }
        .editor-logo {
            position: absolute;
            left: 50px;
            height: 35px;
            top: 10px;
        }
        .common-login-user {
            width: 30px;
            height: 30px;
            border-radius: 40px;
            padding: 3px;
            border: 1px solid #f1f1f1;
        }
        .common-login-user {
            width: 30px; height: 30px; border-radius: 40px; padding: 3px; border: 1px solid #f1f1f1
        }
        .common-login-user:hover {
            cursor: pointer;
        }
        .editor-ext {
            position: relative;
            width: 100%;
            margin-top: 40px;
            display: block;
        }
        .editor-ext-title {
            text-align: left;
            font-size: 16px;
            line-height: 20px;
            margin-bottom: 20px;
            color: #353535;
        }
        .editor-ext-title2 {
            text-align: left;
            font-size: 14px;
            line-height: 20px;
            margin: 20px 0px 10px 0px;
            color: #b6b3b3;
        }
        .editor-cover-image-upload {
            float: left;
            position: relative;
            height: 90px;
            width: 212px;
            border: 2px dashed whitesmoke;
            overflow: hidden;
            color: #b1afaf;
            line-height: 90px;
            overflow: hidden;
        }
        .editor-cover-image-upload:hover {
            cursor: pointer;
            background-color: #faf9f9;
        }
        #editor-description {
            float: left;
            position: relative;
            height: 90px;
            width: 360px;
            margin-left: 20px;
            border: 1px solid whitesmoke;
        }
        #editor-description textarea {
            position: absolute;
            left: 2px;
            top: 2px;
            width: 340px;
            height: 75px;
            border: 0px;
            resize: none;
            padding: 5px;
        }
        #standalone-container{
            position: fixed;
            top: 60px;
            padding: 15px 0px;
            left: 0px;
            height: 40px;
            border: 0px;
            z-index: 999;
            width: 100%;
            background-color: #f6f8f9;
        }
        .editor-out-url {
            position: relative;
            width: 100%;
            height: 45px;
            line-height: 45px;
            border-radius: 3px;
            border: 1px solid whitesmoke;
            text-indent: 10px;
        }
        .editor-sign-box, #editor-path-id {
            position: relative;
            width: 100%;
            height: 45px;
            line-height: 45px;
            border-radius: 3px;
            border: 1px solid whitesmoke;
        }
        #editor-cover-image {
            position: absolute;
            left: 5px;
            top: 5px;
            height: 80px;
            width: 202px;
            display: none;
        }
        .editor-footer button {
            width: 100px;
            height: 35px;
            border: 1px solid whitesmoke;
            border-radius: 5px;
            color: #353535;
            background-color: white;
            font-weight: 400;
        }
        .editor-footer button:hover {
            cursor: pointer;
            opacity: 0.7;
        }
        .editor-plugin-module {
            position: relative;
            width: 760px;
            height: 40px;
            margin-top: 10px;
        }
        .editor-plugin-module button {
            background-color: #f7f7f7;
            border: 0px;
            height: 35px;
            float: left;
            padding: 0px 20px;
        }
        .editor-plugin-module button:hover {
            background-color: #ededed;
        }
        input:-moz-placeholder {
            color: #e5e5e5;
        }
        input:-moz-placeholder {
            color: #e5e5e5;
        }
        input:-moz-placeholder {
            color: #e5e5e5;
        }
    </style>

    <style>
        .w-e-bar {
            background-color: #f6f8f9;
        }
    </style>

</head>
<body style="overflow-x: hidden; background-color: #f6f8f9;">
<center>
    <div id="yipian-header">
        <a href="/"><img src="/image/icon/writer-logo.png" class="editor-logo"></a>

        <img src="" id="author-photo" style="position: absolute; right: 50px; top: 10px; height: 40px; width: 40px; border-radius: 100%">
    </div>
    <div id="standalone-container">
        <div id="toolbar-container" style="background-color: transparent; width: 1200px;">

        </div>
    </div>
    <div id="editor-container-box">
        <div id="editor-header">
            <input id="editor-title" placeholder="请输入标题（5 - 50字）">
        </div>
        <div id="content" style="text-align: left; min-height: 500px; height: auto"></div>
        <div class="editor-ext">
            <div class="editor-ext-title">封面和摘要</div>
            <div class="editor-cover-image-upload" id="editor-cover-image-upload">
                <span id="editor-cover-image-upload-default">选择封面</span>
                <img src="" id="editor-cover-image">
            </div>
            <div id="editor-description">
                <textarea id="editor-description-input"
                          placeholder="用于文章列表、分享等外显，帮助读者快速了解内容，如不填写则默认抓取文章前54字"></textarea>
            </div>

            <div style="clear: both"></div>
        </div>
        <div class="editor-ext">
            <div class="editor-ext-title">绑定公众号</div>
            <select id="public-account-select"></select>
            <div style="clear: both"></div>
        </div>
        <div class="editor-ext">
            <div class="editor-ext-title2">文章标签</div>
            <div class="editor-sign-box">
                <input class="editor-sign-box" type="text" name="" id="editor-input-tags"
                       placeholder="多个标签请用英文逗号分割，如：标签A,标签B,标签C"
                       autocomplete="off" style="border: none; text-indent: 10px">
            </div>
            <div style="clear: both"></div>
        </div>
        <div style="clear: both"></div>

        <div class="editor-footer">
            <div class="layui-inline"> <label class="layui-form-label">设置计划推文时间</label>
                <div class="layui-input-inline" style="margin-right: 40px">
                    <input type="text" class="layui-input" id="plan-push-time" placeholder="默认立刻推送">
                </div>
            </div>
            <button id="editor-publish-btn" style="background-color: #00c166; color: white">立即推文</button>
        </div>
    </div>

</center>

<script src="/js/common/login.js"></script>
<script>

    var me;
    loadCurrUserInfo();
    function loadCurrUserInfo() {
        $.ajax({
            url:"/api/user/getCurrentUserInfo",
            type:"get",
            success:function (data) {
                data = eval(data);
                if (data.success){
                    data = data.data;
                    me = data;
                    $("#author-photo").attr("src", me.photo);
                } else {
                    location.href="/h5/auth";
                }
            },error:function () {
                location.href="/h5/auth";
            }
        })
    }

    // 获取URL请求参数
    function getUserParamByName(key) {
        var url = window.location.search;
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var result = url.substr(1).match(reg);
        return result ? decodeURIComponent(result[2]) : "";
    }

    // 计划推文时间
    var planPushTime = '';
    var articleId = getUserParamByName("id");

    /**
     * 富文本编辑器 wangEditor 配置
     */
    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
        placeholder: '文章正文...',
        MENU_CONF: {}
    }

    editorConfig.MENU_CONF['uploadImage'] = {
        server: '/api/file/updateForEditor',
        timeout: 5 * 1000, // 5s
        fieldName: 'file',
        uploadImgMaxLength: 1,
        maxFileSize: 5 * 1024 * 1024, // 10M
        uploadImgAccept: ['jpg', 'jpeg', 'png'],
        onFailed(file, res) {
            layer.msg("图片上传失败");
        },
        onError(file, err, res) {
            layer.msg("图片上传失败");
        }
    }
    editorConfig.MENU_CONF['uploadVideo'] = {
        server: '/api/file/uploadForWangEditor',
        // form-data fieldName ，默认值 'wangeditor-uploaded-video'
        fieldName: 'file',
        // 单个文件的最大体积限制，默认为 20M
        maxFileSize: 20 * 1024 * 1024, // 2M
        // 最多可上传几个文件，默认为 5
        maxNumberOfFiles: 1,
        // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['video/*'],
        // 超时时间，默认为 30 秒
        timeout: 15 * 1000, // 15 秒
    }

    const editor = createEditor({
        selector: '#content',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })
    const toolbarConfig = {}
    toolbarConfig.excludeKeys = [
        'group-indent',
        'todo',
        'undo',
        'redo'
    ]
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // 'default' or 'simple'
    })

    layui.use(['upload'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
        //常规使用 - 普通图片上传
        upload.render({
            elem: '#editor-cover-image-upload'
            ,url: '/api/file/moment/upload' //改成您自己的上传接口
            ,accept: 'images'
            ,acceptMime: '*'
            ,done: function(res){
                if(!res.success){
                    return layer.msg('上传失败');
                    $("#editor-cover-image-upload-default").show();
                    $("#editor-cover-image").hide();
                } else {
                    $('#editor-cover-image').attr('src', res.data.url);
                    $("#editor-cover-image").show();
                    $("#editor-cover-image-upload-default").hide();
                }
            }
        });
    });

    loadPublicAccounts();
    function loadPublicAccounts() {
        $.ajax({
            url:"/api/public-account/list",
            type:"get",
            success:function (data) {
                data = eval(data);
                if (data.success){
                    var accountList = data.data;
                    $("#public-account-select").append("<option value=''>--- 选择公众号 ---</option>");
                    $.each(accountList, function (index, publicAccount) {
                        $("#public-account-select").append("<option value='"+publicAccount.id+"'>"+publicAccount.name+"</option>");
                    })
                }
            }
        })
    }

    $("#editor-publish-btn").on('click', function () {
        var publicAccount = $("#public-account-select").val();
        var title = $("#editor-title").val();
        var description = $("#editor-description-input").val();
        var cover = $("#editor-cover-image").attr("src");
        var signs = $("#editor-input-tags").val();
        var content = $("#content").html();
        if (publicAccount == '') {
            layer.msg("请先选择公众号");
            return;
        }
        if (title == '' || title.length > 100  || title.length < 5) {
            layer.msg("标题5~100字");
            return;
        }
        if (signs == '') {
            layer.msg("标签不能为空");
            return;
        }
        if (description == '' || description.length > 300) {
            layer.msg("文章描述为空或不合法");
            return;
        }
        if (cover == '') {
            layer.msg("封面图不能为空");
            return;
        }
        if (title != '') {
            title = title;
        }
        if (description != '') {
            description = description;
        }
        $.ajax({
            url: "/api/article/save",
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                id: articleId,
                publicAccount: publicAccount,
                title: title,
                signs: signs,
                description: description,
                cover: cover,
                content: content,
                planPushTime: planPushTime
            }),
            success: function (data) {
                data = eval(data);
                if (data.success){
                    articleId = data.data;
                    layer.msg("文章已提交");
                    window.open("/article/"+articleId);
                } else {
                    layer.msg(data.msg);
                }
            },error:function () {
                layer.msg("服务端异常");
            }
        })

    })

</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#plan-push-time'
            ,type: 'datetime'
            ,done: function(value, date, endDate){
                // 将日期转换为时间戳
                planPushTime = new Date(value).getTime();
                if (isNaN(planPushTime)) {
                    $("#editor-publish-btn").text("立即推文");
                } else {
                    $("#editor-publish-btn").text("定时推文");
                }

            }
        });
    });
</script>
</body>
</html>