master

分支 (4)

管理

管理

master

release

my

dev

wpformat
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>微信公众号格式化编辑器</title>
  <link rel="shortcut icon" href="logo.svg">
  <link rel="apple-touch-icon-precomposed" href="logo.svg">
  <link rel="stylesheet" href="assets/css/vue-eleui.css">
  <link rel="stylesheet" href="assets/css/element-ui-theme-chalk.css">
  <link rel="stylesheet" href="codemirror/codemirror.css">
  <link rel="stylesheet" href="codemirror/theme/base16-light.css">
  <link rel="stylesheet" href="codemirror/theme/duotone-light.css">
  <link rel="stylesheet" href="codemirror/theme/monokai.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
  <div id="app" class="container">
    <el-container>
      <el-header class="top">
        <div class="logo">{{ title }}</div>
        <el-form size="mini" class="ctrl" :inline=true>
          <el-form-item label="Editor Themes">
            <el-select v-model="currentEditorTheme" size="mini" placeholder="选择字体" @change="editorThemeChanged">
              <el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label"
                :value="editorTheme.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Fonts">
            <el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged">
              <el-option v-for="font in builtinFonts"  :style="{fontFamily: font.value}"
                :key="font.value"
                :label="font.label"
                :value="font.value">
                <span style="float: left">{{ font.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px" >Abc</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Font Size">
            <el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged">
              <el-option v-for="size in sizeOption"
                :key="size.value"
                :label="size.label"
                :value="size.value">
                <span style="float: left">{{ size.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px" >{{ size.desc }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Themes">
            <el-select v-model="currentTheme" size="mini" placeholder="选择主题样式" @change="themeChanged">
              <el-option v-for="theme in themeOption" :key="theme.value" :label="theme.label" :value="theme.value">
                <span style="float: left">{{ theme.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ theme.author }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button class="about" @click="aboutDialogVisible = true">关于</el-button>
      </el-header>
      <el-main class="main-body">
        <el-row :gutter="10" class="main-section">
          <el-col :span="12">
            <textarea
              id="editor"
              type="textarea"
              placeholder="Your markdown here."
              v-model="source">
            </textarea>
          </el-col>
          <el-col :span="12" class="preview-wrapper">
            <section>
              <div class="hint">全选复制或<a href="#" @click="copy" class="copy-button">点此复制</a>，然后在公众号编辑器粘贴</div>
              <div class="preview" contenteditable="true">
                <div id="output" v-html="output">
                </div>
              </div>
            </section>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
      <div>
		<a href="https://github.com/hityb/mp" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
        <h3>WeChat Format 有什么用？</h3>
        <p>能较好地排版；</p>
        <p>能解决 <code>ul</code> 和 <code>ol</code> 渲染时样式被微信编辑器重置的问题；</p>
        <p>能把外部链接自动转为参考文献索引，并且附在文章末尾</p>
        <p>&nbsp;</p>
		<h3>关于本站</h3>
		<p>本站是基于GitHub开源项目<a href="https://github.com/lyricat/wechat-format">wechat-format</a>而部署，感谢<a href="https://github.com/lyricat/wechat-format">wechat-format</a></p>
		<p>

      </div>
    </el-dialog>
  </div>

  <script src="assets/scripts/axios.min.js"></script>
  <script src="assets/scripts/marked.min.js"></script>
  <script src="assets/scripts/vue.js"></script>
  <script src="assets/scripts/vue-eleui.js"></script>
  <script src="assets/scripts/FuriganaMD.js"></script>

  <script src="codemirror/codemirror.js"></script>
  <script src="codemirror/mode/markdown/markdown.js"></script>

  <script src="assets/scripts/themes/default.js"></script>
  <script src="assets/scripts/themes/lupeng.js"></script>
  <script src="assets/scripts/renderers/wx-renderer.js"></script>
  <script src="assets/scripts/editor.js"></script>
</body>
</html>