Question

为此，GitHub上已经存在一个管道，但是它不起作用。似乎有些过时了，但我不知道需要更改什么。以下错误被登录到浏览器控制台：

GET http://localhost:4200/assets/images/emojis/apple_32.png 404 (Not Found)

我希望可以复制整个管道：

import { Pipe, PipeTransform, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { emojis, EmojiService, CompressedEmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';

@Pipe({
    name: 'replaceEmojis'
})
export class ReplaceEmojisPipe implements PipeTransform {
    private static cachedEmojiRegex: RegExp;
    private sheet: string;

    constructor(@Inject(DOCUMENT) private document: Document, private sanitizer: DomSanitizer, private emojiService: EmojiService) {}

    public transform(html: string, sheet = 'apple'): SafeHtml {
        this.sheet = sheet;
        return this.sanitizer.bypassSecurityTrustHtml(
            this.emojisToImages(html)
        );
    }

    /**
     * Replaces all unicode emojis available through emoji-mart with a span displaying
     * the image representation of that emoji
     * @param html The original html
     */
    public emojisToImages(html: string): string {
        // Ensure most html entities are parsed to unicode:
        const div = <Element> this.document.createElement('div');
        div.innerHTML = html;
        html = div.innerHTML;

        html = html
            // Replace zero width joins with their unicode representations:
            .replace(/&zwj;/g, '\u200d')

            // Replace every emoji with a span with a background image:
            .replace(this.emojiRegex, unicodeEmoji => {
                const hexCodeSegments = [];
                let i = 0;
                while (i < unicodeEmoji.length) {
                    const segment = unicodeEmoji.codePointAt(i).toString(16).toUpperCase();
                    hexCodeSegments.push(segment);

                    i += Math.ceil(segment.length / 4);
                }
                const hexCode = hexCodeSegments.join('-');
                const matchingData = this.findEmojiData(hexCode);
                if (matchingData) {
                    const span = document.createElement('span');
                    span.style.width = '22px';
                    span.style.height = '22px';
                    span.style.display = 'inline-block';
                    span.style.backgroundImage = `url(/assets/images/emojis/${this.sheet}_32.png)`;
                    span.style.backgroundSize = `${100 * 52}%`;
                    const multiply = 100 / 51;
                    span.style.backgroundPosition = `${multiply * matchingData.sheet[0]}% ${multiply * matchingData.sheet[1]}%`;
                    span.style.textIndent = '-10000px';
                    span.style.overflow = 'hidden';
                    span.innerText = unicodeEmoji;


                    return span.outerHTML;
                }

                return unicodeEmoji;
        });

        return html;
    }

    /**
     * Regex matching all unicode emojis contained in emoji-mart
     */
    private get emojiRegex(): RegExp {
        if (ReplaceEmojisPipe.cachedEmojiRegex) {
            return ReplaceEmojisPipe.cachedEmojiRegex;
        }

        let characterRegexStrings: string[] = [];
        for (const emoji of emojis) {
            characterRegexStrings.push(this.emojiService.unifiedToNative(emoji.unified).replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));

            if (emoji.skin_variations) {
                for (const skinVariation of emoji.skin_variations) {
                    characterRegexStrings.push(this.emojiService.unifiedToNative(skinVariation.unified).replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
                }
            }
        }

        characterRegexStrings = characterRegexStrings.sort((a, b) => {
            if (a.length > b.length) {
                return -1;
            }

            if (b.length > a.length) {
                return 1;
            }

            return 0;
        });

        const strings = characterRegexStrings;
        const reString = '(' + strings.join('|') + ')';
        ReplaceEmojisPipe.cachedEmojiRegex = new RegExp(reString, 'gu');

        return ReplaceEmojisPipe.cachedEmojiRegex;
    }

    /**
     * Find raw emoji-mart data for a specific emoji hex code
     * @param hexCode String representation of the emoji hex code
     */
    private findEmojiData(hexCode: string): CompressedEmojiData {
        for (const emojiData of emojis) {
            if (emojiData.unified === hexCode) {
                return emojiData;
            }

            if (emojiData.skinVariations) {
                for (const skinVariation of emojiData.skinVariations) {
                    if (skinVariation.unified === hexCode) {
                        const skinData = Object.assign({}, emojiData);
                        skinData.sheet = skinVariation.sheet;
                        return skinData;
                    }
                }
            }
        }

        return null;
    }

}

来源是：https://gist.github.com/lentschi/8600f9b6ea7e7f5178f40a36f3053de7

因此，第一件事已经过时，您需要将变量名从skin_variations更改为skinVariations。如果现在我想将其用作HTML文件的innerHTML，则会发生错误。

我真的很想拥有它，因为拥有表情符号选择器以及所有可能的设置都是没有用的，但是例如在Chrome中，所有的表情符号选择器都具有浏览器主题样式。

Answer 1

这对我有用。

我从npm软件包ngx-emoji-mart（Link to image）下载了32px图像，并将其存储在/assets/images/emojis/32.png的应用程序下。

然后我将背景图片替换为

span.style.backgroundImage = `url(/assets/images/emojis/32.png)`;

该管道对于显示由emojimart创建的Native Emojis的我的角度应用程序来说是完美的。这就是我需要的帖子。

角管替换表情符号-mart表情符号

1 个答案: