uni |
您所在的位置：网站首页 › markdown编辑器开发 › uni |
uni
|
简介
Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。 Towxml 3.0版本发布啦！✨✨✨ 较2.x版本，新版体积更小、速度更快⚡️、支持无限级解析，增加诸多新特性。对微信小程序的Markdown及Html内容解析支持更加完善。 项目地址：https://github.com/sbfkcel/towxml Towxml3.0 特性Towxml 3.0 完整支持以下功能。当然在构建时可仅保留需要功能以减少体积大小和代码依赖。 支持echarts图表（3.0+）✨支持LaTex数学公式（3.0+）✨支持yuml流程图（3.0+）✨支持按需构建（3.0+）✨支持代码语法高亮、代码块行号显示支持emoji表情😉支持上标、下标、下划线、删除线、表格、视频、图片（几乎绝大部分html元素）……支持typographer字符替换支持多主题切换支持Markdown TodoList支持事件绑定（这样允许自行扩展功能哟，例如：点击页面中的某个元素，更新当前页面内容等…）极致的中文排版优化支持前后解析数据 Demo 截图
注意：3.0切勿直接拉取代码使用，请根据自行需要构建得到最终的代码。 首先需要构建 克隆项目到本地或直接到项目地址下载压缩包 git clone https://github.com/sbfkcel/towxml.git解压后使用cmd安装构建依赖 npm install 或 yarn install运行 npm run build 或 yarn run build即可新构建出来的文件在dist目录下，将dist目录复制到你的小程序项目中并将目录名称改为towxml即可 在uniapp项目中使用构建完成后，把构建好的文件夹dist改名为towxml，在uni-app项目根目录中新建的wxcomponents目录中，将towxml复制进去即可 修改 towxml/decode.json { "component": true, "usingComponents": { "decode": "./decode", "audio-player": "./audio-player/audio-player", "echarts": "./echarts/echarts", "latex": "./latex/latex", "table": "./table/table", "todogroup": "./todogroup/todogroup", "yuml": "./yuml/yuml", "img": "./img/img" } }在pages.json中添加配置,在需要使用到towxml组件中引入 { "path": "pages/article/article", "style": { "usingComponents": { "towxml": "/wxcomponents/towxml/towxml" }, }在main.js中全局挂载towxml解析方法 vue3也不推荐Vue. prototype的方式挂在原型上，所以我选择了下面的方式 const towxml = require('./wxcomponents/towxml/index'); export function createApp() { const app = createSSRApp(App) app.config.globalProperties.$towxml = towxml return { app } }在需要使用towxml的组件中使用 import { ref, getCurrentInstance } from 'vue' import { onLoad } from "@dcloudio/uni-app"; import $http from "@/api/request.js" let { appContext } = getCurrentInstance(); const article = ref({} as any) onLoad((e) => { getArticleById(e.id) }) const getArticleById = (id: string) => { $http.request({ url: `/getArticleById/${id}` }).then(res => { // res.data.content = appContext.config.globalProperties.$towxml('markdown语法文本','markdown') res.data.content = appContext.config.globalProperties.$towxml(res.data.content,'markdown') article.value = res.data }) } |
【本文地址】
今日新闻 |
推荐新闻 |