MakeDown格式的处理(vue前端编辑与展示，微信小程序展示，SpringBoot后端获取摘要)

Vue端处理

组件官网

http://www.mavoneditor.com

安装依赖

npm install mavon-editor --save

main.js添加引用

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

编辑页面使用

template
      <mavon-editor ref="md"
        :toolbars="markdownOption"
        v-model="form.content"
        @save="save"
        @imgAdd="imgAdd"
        :ishljs = "true"
      />
data 
markdownOption: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        }
method
      //图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
      imgAdd(filename,imgfile){
        // 第一步.将图片上传到服务器.
        upload(imgfile).then(({data})=>{
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          this.$refs.md.$img2Url(filename, data.url);
        })
      }

展示页面使用

    <mavon-editor v-if="show" style="margin: 10px 0;"
      v-model="form.answer"
      defaultOpen = "preview"
      :toolbarsFlag = "false"
      :subfield = "false"
    />

SpringBoot后端处理

获取摘要

public class MDToText {
    /**
     * 去除html代码中含有的标签
     *
     * @param htmlStr
     * @return
     */
    private static String delHtmlTags(String htmlStr) {
        //定义script的正则表达式，去除js可以防止注入
        String scriptRegex = "<script[^>]*?>[\\s\\S]*?</script>";
        //定义style的正则表达式，去除style样式，防止css代码过多时只截取到css样式代码
        String styleRegex = "<style[^>]*?>[\\s\\S]*?</style>";
        //定义HTML标签的正则表达式，去除标签，只提取文字内容
        String htmlRegex = "<[^>]+>";
        //定义空格,回车,换行符,制表符
        String spaceRegex = "\\s*|\t|\r|\n";

        // 过滤script标签
        htmlStr = htmlStr.replaceAll(scriptRegex, "");
        // 过滤style标签
        htmlStr = htmlStr.replaceAll(styleRegex, "");
        // 过滤html标签
        htmlStr = htmlStr.replaceAll(htmlRegex, "");
        // 过滤空格等
        htmlStr = htmlStr.replaceAll(spaceRegex, "");
        // 返回文本字符串
        return htmlStr.trim();
    }

    /**
     * 获取HTML代码里的内容
     *
     * @param htmlStr
     * @return
     */
    private static String getTextFromHtml(String htmlStr) {
        //去除html标签
        htmlStr = delHtmlTags(htmlStr);
        //去除空格" "
        htmlStr = htmlStr.replaceAll(" ", "");
        return htmlStr;
    }

    public static String mdToText(String mdContent) {
        PegDownProcessor pdp = new PegDownProcessor(Integer.MAX_VALUE);
        String htmlContent = pdp.markdownToHtml(mdContent);
        return getTextFromHtml(htmlContent);
    }
}

微信小程序端展示MakeDown文档

组件地址

https://github.com/sbfkcel/towxml

导入组件

克隆项目到本地
git clone https://github.com/sbfkcel/towxml.git
安装构建依赖
npm install 或 yarn
编辑配置文件towxml/config.js
根据自行要求，仅保留你需要的功能即可（配置中有详细注释）
运行 npm run build 或 yarn run build即可

将dist文件夹下的内容拷到小程序项目中，最好放在根目录下towxml文件夹中，这样就可以直接使用，不然还要更改里面文件的引用，

修改app.js

App({
  // 引入`towxml3.0`解析方法
	towxml:require('/towxml/index'),
...
})

要使用的页面的配置文件中加入组件引用

{
  "usingComponents": {
    "towxml":"../../towxml/towxml"
      # 路径自定义
  }
}

js文件中对数据进行解析

        let result = app.towxml(data.blog.content,'markdown',{
          //base:'https://xxx.com',				// 相对资源的base路径
          theme:'light',					// 主题，默认`light`
          events:{					// 为元素绑定的事件方法
            tap:(e)=>{
              console.log('tap',e);
            }
          }
        });

app.towxml(str,type,options)有三个参数

str 必选，html或markdown字符串
type 必选，需要解析的内容类型html或markdown
options [object] 可选，可以该选项设置主题、绑定事件、设置base等
base [string] 可选，用于指定静态相对资源的base路径。例如：https://xx.com/static/
theme [string] 可选，默认:light，用于指定主题'light'或'dark'，或其它自定义
events [object] 可选，用于为元素绑定事件。key为事件名称，value则必须为一个函数。例如:{tap:e=>{console.log(e)}}

页面进行引用

<towxml nodes="{{article}}"/>

标签：vue,SpringBoot,展示,标签,html,htmlStr,towxml,true,String
来源： https://blog.csdn.net/qq_39016934/article/details/120314299