アプレットはrich-textビデオのレンダリングをネイティブでサポートしていないため、主に文字列の切り取りと一致を使用して、処理して表示する必要があります。
リッチテキスト画像適応問題
バックエンドからリッチ テキスト データを取得したら、replace メソッドを使用して画像のスタイルを変更し、画像が携帯電話の幅と一致するようにします。
//richtext为富文本
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"') //图片自适应
リッチ テキストに不可解な空白がある場合は、リッチ テキストに改行タグが含まれている可能性があり、<br>タグを置き換えます。
//richtext为后端传过来的富文本
dealRichText(richtext) {
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, '');
return content;
}
ビデオをレンダリングする
インターネット上にも多くの方法がありますが、私のリッチ テキストは、次のように少し複雑な Baidu リッチ テキスト エディターで生成されます。
<p>
随便的文字
</p>
<p>
<img src="https://weiqing.kuxia.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p>
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
</p>
<p style="white-space: normal;">
随便的文字
</p>
<p style="white-space: normal;">
<img src="https://xxx.xxx.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p style="white-space: normal;">
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
</p>
<p>
<br/>
</p>
これは私が何気なく入力したもので、ビデオのリンクも変更されています (プロジェクトは機密です) 構造的に、各pタグは段落であり、段落内に複数のビデオがある場合があります。
1. 処理
dealRichText(richtext) {
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, ''); // 替换图片宽高
let textArr = content.split(/<p/); //按照段落分割字符串
let contentArr = [];
// 防止一段多个视频，进行切割
textArr.forEach(val => {
let arr = val.split(/<video/)
contentArr.push(...arr)
})
let newArr = []; //处理后的数组
contentArr.forEach((val, i) => {
if (val != '' && val != ">") {
//防止为空字符串
let matchResult = val.match(/(?<= class=\"edui-upload-video).+(?=\<\/video\>)/); //匹配字符串中是否有视频
if (matchResult) {
let a = matchResult[0].match(/(?<=src=\").+(?=\" data)/); //匹配视频链接
newArr.push({
type: 'video',
content: a[0]
})
} else {
newArr.push({
type: 'text',
content: "<p" + val
})
}
}
})
return newArr;
},
最終結果 (配列):
0: {
type: "text", content: "<p>随便的文字</p>"}
1: {
type: "text", content: "<p><img style="max-width:100%;height:auto" src="ht…f227c88c7c89737836814c.png" title="" alt=""/></p>"}
2: {
type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"}
3: {
type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"}
4: {
type: "text", content: "<p style="white-space: normal;">随便的文字</p>"}
5: {
type: "text", content: "<p style="white-space: normal;"><img style="max-wi…f227c88c7c89737836814c.png" title="" alt=""/></p>"}
6: {
type: "text", content: "<p style="white-space: normal;">"}
7: {
type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"}
8: {
type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"}
9: {
type: "text", content: "<p></p>"}
データに若干の欠けがありますが、使用には問題ありません。
2. レンダリング
<!-- config.remark是最后的数据，也就是上面的数组 -->
<view wx:for="{
{config.remark}}" wx:key="index">
<rich-text nodes="{
{item.content}}" wx:if="{
{item.type == 'text'}}"></rich-text>
<video src="{
{item.content}}" wx:if="{
{item.type == 'video'}}" style="width: 100%;" controls></video>
</view>