在Vue中导入Typora编辑的文章

最初我是想直接将Typora放在web页面上使用，但是试了一下后发现有点难度，同时考虑到可能会有版权问题之类，所以决定退而求其次，在Typora上编辑，然后导出到web页面上显示。

1. 方案挑选

• 方案一：直接显示Typora导入的Html
• 方案二：在vue组件中引入typora的CSS样式，然后使用v-html添加typora导出的html
• 方案三：使用iframe动态写入

分析：

​ 对于方案一，需要保存大量HTML，然后通过iframe嵌入，在数据处理上并不方便，url并不能直接访问数据库。

​ 对于方案二，如果引入的CSS不使用scope方法，则会造成全局样式污染，如果使用scope，v-html中的样式无法生效，方案不成立。

​ 对于方案三，手动创建iframe然后通过write方法写入内容，不会造成样式污染，并且可以直接使用数据库中的数据，拟选择方案三。

2. 实现原理

• 在Typora中编辑好文档，然后导出HTML，执行脚本去掉CSS与head等多余内容（为了减小体积），并将图片转换为base64格式（方便直接在web上面显示，如果使用url，那么还需要一个自动上传、删除等操作的脚本），得到一个格式化后的文件。

• 在Vue Typora组件中，使用iframe，在iframe中写入CSS与导出后格式化的文本，达到在页面上显示Typora的效果。

• 关于Typora自动格式化，在Typora的自定义导出设置中添加自定义指令，在每次导出后，对导出的HTML文件进行相应的格式化。之所以使用HTML而不是HTML（without Styles）是因为导出去掉style会把class一起去掉，这样的话我们的CSS就无效了。Typora设置如下所示：

  

  命令如下：

  java -jar D:\Program" "Files\Typora\TyporaToBase64AndFormat.jar "${outputPath}"
  

  其中TyporaToBase64AndFormat.jar是一个java脚本，打包成jar包后复制到Typora的安装目录，这个脚本会把导出的HTML中除了body之外的内容去掉，并把图片转换为base64格式。脚本代码如下：

  package online.hell_vision;
  
  import java.io.*;
  import java.nio.charset.StandardCharsets;
  import java.util.Base64;
  
  public class Main {
       
      /**
       * @param src img src 内容
       * @param end 下次查找字符串起始位置
       * @return java.lang.String
       * @description 递归执行查找同一行字符串多个 img 标签
       */
      public static String execute(String src, int end) {
       
          String result = matchImg(src, end);
          if (result.isEmpty()) {
       
              return src;
          } else {
       
              String[] split = result.split(",");
              String s1 = fileToBase64(split[0]);
              if (s1.isEmpty()) {
       
                  return src;
              } else {
       
                  String replace = src.replace(split[0], s1);
                  return execute(replace, Integer.parseInt(</