index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link href="./favicon.ico" rel="shoticon" type="image/x-icon">
    <meta content="width=device-width,height=device-height,initial-scale=1,user-scalable=0" name="viewport">
    <title>微信公众号排版</title>
    <meta content="微信公众号排版,在线微信公众号排版,网页微信公众号排版,公众号微信排版,公众号排版" name="keywords">
    <meta content="一款在线Markdown在线转换工具,让您编辑的内容可以在微信公众号上展示出更加美观的效果。" name="description"><!---->
    <script src="./output/index.js?v=20220115"></script>
    <style id="temp_style" type="text/css">
    </style>
    <style type="text/css">
        #beian {
            display: inline-block
        }
    </style>


</head>
<body id="body_id">

<div class="all_container">


    <div id="global_popup">
        <div class="popup_background"></div>
        <div class="popup_conetent popup">
        </div>
    </div>


    <div id="picture_popup" style="display:none">
        <div class="picture_popup_content common_pop">
            <div class="closePopupContainerId">
                <span class="icon_class  close_popup_icon close_popup_id"></span>
            </div>
            <div class="picItems">
            </div>
            <div class="picError">
                <div class="warning">如有图片上传失败！</div>
                <div>请点击工具栏“图片”图标，检查图床配置！</div>
                <div>并确认图片类型为：png、jpg、bmp、gif或jpeg!</div>
            </div>
        </div>
    </div>

    <div id="picture_setting_popup" style="display:none">
        <div class="picture_settingPopupContent common_pop">
            <div class="closePopupContainerId">
                <span class="icon_class  close_popup_icon close_popup_id"></span>
            </div>
            <div class="uploadPicBtnContainer">
                <label class="uploadPicBtn" for="uploadPicInputId">请点击选择本地图片</label>
                <input accept="image/png,image/jpg,image/jpeg,image/gif,image/bmp" id="uploadPicInputId"
                       multiple="multiple" name="pic" style="display:none" type="file"></input>
            </div>
            <div>

            </div>
            <div class="picSettingContainer picSetting">
                <label class="warning">注：如要插入本地图片，先要在七牛云上注册，填写下面信息并保存。OK后,插入本地图片会自动上传到七牛云，并正确显示到Md2All中。</label>
                <div class="picInputInfoItem"><label class="item_name ">Access Key:</label><input class="accesskey"
                                                                                                  placeholder="请输入你在七牛的AccessKey"></input>
                </div>
                <div class="picInputInfoItem"><label class="item_name ">Secret Key:</label><input class="secretkey"
                                                                                                  placeholder="请输入你在七牛的SecretKey"></input>
                </div>
                <div class="picInputInfoItem"><label class="item_name ">Bucket Name:</label><input class="bucketname"
                                                                                                   placeholder="请输入你在七牛个人的储存空间名称,如:mybucket"></input>
                </div>
                <div class="picInputInfoItem"><label class="item_name ">Bucket Domain:</label><input
                        class="bucketdomain" placeholder="请输入你在七牛个人的储存空间域名,如：mydomain.bkt.clouddn.com"></input></div>
                <div class="picInputInfoItem autouploadImgItem"><label class="autoUploadImgLabel ">文中需转换为图片的内容(如Latex数学公式),会自动上传到云图床</label><span
                        class="autouploadImg"><input class="autouploadImgInput" type="checkbox"></input></span></div>
                <button class="savePicSetting">保存设置</button>
            </div>
        </div>
    </div>

    <div class='popup' id="filewindow_popup"></div>
    <div class="tool_header">

        <div id="icon_container_left">
            <a class="icon_class tool_pic_icon edit_icon" id="edit_file" title="打开本地已存草稿，开始编辑,并自动保存"><span
                    class="icon_class"></span></a>
            <a class="icon_class tool_pic_icon export_icon" id="export_file" title="导出带样式的HTML文件"><span
                    class="icon_class  "></span></a>
            <a class="icon_class tool_pic_icon picture_icon" id="picture" title="上传图片，及图床设置"><span
                    class="icon_class  "></span></a>
        </div>

        <div id="icon_container_right">
            <button class="btn button" data-clipboard-action="copy" data-clipboard-target="#render_output_id"
                    id="copy_btn">复制
            </button>
            <a class=" icon_class" id='mycss_icon' title="可选css样式模板，或自定义css样式">一键排版 </a>
            <a class=" icon_class color_window_icon" id='color_ref' title="参考颜色"> </a>
            <span id="html_select">HTML <input id="html" name="html" type="checkbox"></input></span>
            <span id="codeline_select"><input id="codeline" name="codelineName" type="checkbox">显示代码行号</span>
            <span id="narrowcode_select"><input id="narrowcode" name="narrowcode" type="checkbox">代码紧凑</span>
            <div class="theme-wrapper" id="code_select">
                <label>代码主题：</label><select class="code-theme"></select>
            </div>

        </div>

    </div>

    <div id="display_area">

        <div id="fileWindow">


        </div>
        <textarea id="editor" spellcheck="false"></textarea>
        <!-- <div contenteditable="true" id="editor"></div> -->
        <div id="drag_indicate"></div>
        <div id="editor_render">
            <div id="render_output_id"></div>
        </div>
        <div id="cssSetting">
            <div id="cssToolHead">
                <div class="theme-wrapper" id="css_select">
                    <label>排版样式选择：</label><select class="css-theme"></select>
                </div>
                <label id="cssnote">注：修改或"恢复预设值"后，要<span
                        style="font-weight: bold;font-size: 17px"> 保 存 </span>才生效</label>
            </div>
            <div contenteditable="true" id="cssEditArea"></div>
            <div id="cssToolFoot">
                <a title="修改后，要保存才能看到效果"><span class="icon_class" id="css_save">保 存</span></a>
                <a title="恢复预设值后，要保存才能看到效果"><span class="icon_class" id="css_reset">恢复预设值</span></a>
                <span class="icon_class" id="css_close">关 闭</span>
            </div>
        </div>
    </div>

    <div id="container_foot">
     <span id="foot_css">
       <span id="saveIndicate">已保存！ </span>
       <span id="currentFile"></span>
     </span>
    </div>
</div>


<div id="file_export_container">
    <div id="file_export_tool_head">
        <a title="退出到主界面"><span class="icon_class" id="file_export_exit">退出</span></a>
        <a title="生成文件"><span class="icon_class" id="file_export_gen_file">生成文件</span></a>
        <span id="file_export_nameinput"><label id="file_export_note">文件名：</label> <input id="file_export_fileName"
                                                                                          value="文件名"></input><label
                id="file_export_suffix">.html</label> </span>
    </div>
    <div id="file_export_setting">
        <div id="file_export_settingHead">

        </div>
        <div contenteditable="true" id="file_export_cssEditArea">abcd</div>
        <div id="file_export_settingFoot">
            <a title="修改后，要保存才能看到效果"><span class="icon_class" id="file_export_save">保 存</span></a>
            <a title="恢复预设值后，要保存才能看到效果"><span class="icon_class" id="file_export_reset">恢复预设值</span></a>
        </div>
    </div>
    <div id="export_iframe_container">
        <iframe id="export_iframe"></iframe>
        <div id="export_iframe_cover"></div>
    </div>
</div>


<div class="color_windown" id="color_window_id">
    <div class="color_toolbar">
        <span id="color_name_id">red</span>
        <span class="icon_class  close_color_icon" id="close_color_id"></span>
    </div>
    <div class="color_container">
        <div class="color_father_container">
            <span class="color_father" style="background:red"></span>
        </div>
        <div class="color_son_container">
            <span class="color_son" style="background:#FFEBEE">#FFEBEE</span>
        </div>
    </div>
</div>

<div class="popup" id="popup_id">

</div>


</body>

</html>