Skip to content

Commit

Permalink
feat: support iframe and lazy-load display of media resources. (#10)
Browse files Browse the repository at this point in the history
#### What type of PR is this?

/kind feature

#### What this PR does / why we need it:

为瞬间编辑器添加 `ExtensionIframe` 扩展,并对展示列表的 iframe、image 等进行懒加载处理。

#### Which issue(s) this PR fixes:

Fixes #6 

#### Special notes for your reviewer:

测试方式:

1. 安装可测试插件 [plugin-moments-1.0.0-SNAPSHOT.jar.zip](https://github.com/halo-sigs/plugin-moments/files/11147099/plugin-moments-1.0.0-SNAPSHOT.jar.zip)
2. 在编辑器复制一个 iframe 资源,查看是否能够正常识别,如下所示:
![image](https://user-images.githubusercontent.com/31335418/229754654-bdaa81b2-bfb3-4c2d-9815-70c100db4d24.png)

#### Does this PR introduce a user-facing change?

```release-note
瞬间编辑器支持 `iframe` ,并优化列表资源过多的情况下,整体会卡顿的问题。
```
  • Loading branch information
LIlGG authored Apr 5, 2023
1 parent 49885d3 commit bd42b0c
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 1 deletion.
24 changes: 23 additions & 1 deletion console/src/components/MomentPreview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,28 @@ const vHighlight = {
},
};
const vLazy = {
mounted: (el: HTMLElement) => {
// iframe
const iframes = el.querySelectorAll<any>("iframe");
iframes.forEach((iframe: any) => {
iframe.loading = "lazy";
iframe.importance = "low";
});
// 图片
const imgs = el.querySelectorAll<HTMLImageElement>("img,image");
imgs.forEach((img: HTMLImageElement) => {
img.loading = "lazy";
});
// 视频,音频
const medium = el.querySelectorAll<HTMLMediaElement>("video,audio");
medium.forEach((media: HTMLMediaElement) => {
media.autoplay = false;
media.preload = "metadata";
});
},
};
const mediums = ref(props.moment.spec.content.medium || []);
const detailVisible = ref<boolean>(false);
const selectedIndex = ref<number>(0);
Expand Down Expand Up @@ -151,7 +173,7 @@ const getExtname = (type: string) => {
<div
class="moment-preview-html moments-overflow-hidden moments-relative moments-pt-1"
>
<div v-highlight v-html="props.moment.spec.content.html"></div>
<div v-highlight v-lazy v-html="props.moment.spec.content.html"></div>
</div>
<div
v-if="
Expand Down
2 changes: 2 additions & 0 deletions console/src/components/TextEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
ExtensionPlaceholder,
ExtensionHighlight,
ExtensionCommands,
ExtensionIframe,
CommandsSuggestion,
CommentParagraph,
CommandCodeBlock,
Expand Down Expand Up @@ -143,6 +144,7 @@ const editor = useEditor({
ExtensionCodeBlock.configure({
lowlight,
}),
ExtensionIframe,
Extension.create({
addGlobalAttributes() {
return [
Expand Down

0 comments on commit bd42b0c

Please sign in to comment.