更新记录

1.0.0（2020-12-23）

如果你不是nvue列表，如果你还有其他办法在nvue列表展示富文本，不建议你使用此插件

另外补充一下，希望官方的富文本编辑器editor可以完善一下插入html标签后光标自动定位到插入位置的功能，被逼无奈只能改了editor源码，有急需此功能(editor插入html后光标回到插入标签位置)的小伙伴也可以自行处理HBuilderX安装目录下 \plugins\uniapp-cli\node_modules\@dcloudio\uni-app-plus\dist\view.umd.min.js文件

平台兼容性

可导入示例项目运行完整示例

最近项目需求发布短文和评论的时候要求能@人，并且在列表能点击跳转到用户主页 可是···发布做好后发现在nvue列表没法实现展示 查官方提供的rich-text 可是···它不支持a标签点击(官方说后续会加上，后续..)，于是又查官方的uParser，总算可以点击了 可是···它星星的text是块级元素！块级元素！块级元素！于是找遍插件库富文本，没有于是了。

被逼无奈只能走极端，写了个插件来实现text转行内元素（假装行内元素） 如果你不是nvue列表，如果你还有其他办法，不建议使用此插件,推荐使用这位大大的富文本插件

如果你希望text内可以嵌套可点击的a标签，如果你希望text可以部分内容变色 那你可以尝试下此插件，也可按此思路自行实现你的需求

插件使用方式未写清楚的可以右上角点击完整示例查看，留言或加qq群：701468256

• 最后：希望官方早日完善nvue text标签行内元素需求，rich-text可监听链接点击需求

使用说明

vue:

//v-for => item
<l-text @click="onClick(item)" @navigate="navigate" :nodes="getHtmlArray(item.html)"></l-text>

js：

import lText from '@/components/l-text/l-text.vue';
import parseHtml from '@/components/l-text/js/html-parser.js';

• 函数说明

data() {
    return {
        htmlDemo: `<p>此html是通过富文本编辑器生成的<a href="https://app?type=user&amp;name=@那个谁&amp;sysNo=1000" rel="noopener noreferrer" target="_blank" style="text-decoration: none;">@那个谁</a>&nbsp;不能监听a标签的点击事件,text不能实现行内元素，那还玩个啥？<a href="https://app?type=user&amp;name=@Promise&amp;sysNo=1000" rel="noopener noreferrer" target="_blank" style="text-decoration: none;">@Promise</a> nvue不能监听a标签的点击事件,text块级元素，那还玩个啥？</p>`,
    }
},
methods: {
    //富文本内点击事件
    navigate(href) {
        if (href.indexOf('https://app?') == 0) {
            let {name,sysNo} = this.getRequestParameters(href);
            uni.showModal({
                content:'点击了'+name
            });
        }
    },
    //普通文字
    onClick(item) {
        uni.showModal({
            content:'点击列表普通内容'
        });
    },
    //转义html
    getHtmlArray(html){
        let nodes = parseHtml(html);
        return nodes;
    }
}