IconFontPreview——一款预览IconFont的插件

时间 2019-11-08

标签 iconfontpreview 一款预览 iconfont 插件繁體版

原文原文链接

背景

使用过IconFont的应该都深有体会，每次使用IconFont的时候，因为不知道Unicode和Icon的对应关系，每次都要到对应的文件夹下找到默认生成的html文件，打开后才能寻找到咱们须要的IconFont。而每次找文件这个过程真的很麻烦，并且当公司IconFont的版本更新的时候，这个路径也会相应改变，那就更痛苦了。为了解决这个问题，我就考虑能不能作一款预览IconFont的插件，避免这种痛苦的寻找文件过程，提升开发效率。css

功能特性

支持已定义的IconFont的预览
支持缓存避免每次查找
使用方便

源码地址

IconFontPreviewhtml

欢迎Star👏～欢迎提issue和PR～这里再推荐一下个人另外一个开源项目EasyTextView，一款高效利用IconFont的TextView，功能丰富，用过的人都说好～git

jar包地址

我已经发布到Intellij的官网上了，不知道为啥搜不到github

IconFontPreview.zip浏览器

使用步骤

1.安装完插件后,在操做面板会生成一个草帽的Icon，点击操做面版的草帽icon(ONE PIECE)

2.第一次须要设置工程下ttf字体文件路径和定义iconfont的string.xml路径

这一步只会在第一次才会使用，由于本地会有缓存，后面的会读取缓存的目录（根目录下的PlugCache）缓存

3.点击肯定后或者之后在点击草帽就会在浏览器中打开预览定义的IconFont图标了

4.后面再使用就能够直接点击操做面板的草帽Icon就会直接弹出预览页面了

实现原理

1.IntelliJ插件开发

这个网上博客不少，这里就不专门讲解了bash

2.XML解析

这里原本一开始是准备直接读取ttf文件，而后直接生成ttf文件中全部定义的IconFont的，可是我好像没有找到实现方式（你们有好的实现方式能够告诉我～，或者提PR）咱们通常定义IconFont的都会在String.xml定义unicode相似于下面app

<resources>
    <!--后退-->
    <string name="icon_font_606">\ue606</string>
    <!--评论-->
    <string name="icon_font_comment">\ue68f</string>
    <!--收藏-->
    <string name="icon_font_collection">\ue68e</string>
    <!--赞-->
    <string name="icon_font_like">\ue695</string>
</resources>
复制代码

因此这里就须要咱们遍历XML了，这里我选择了SAX解析的方式，取出了定义的Key，和对应的Unicode，并保存起来ide

3.Jsoup动态渲染HTML

拿到咱们的数据集后，咱们就须要生成咱们最终的预览页面了，这里直接利用IconFont固定的HTMl模版，下载下来，利用Jsoup这个HTMl解析库，遍历咱们生成的数据集，并对应在固定位置插入HTML代码，最后利用File保存到PluginCache文件夹下这里有几个问题：组件化

3.1 jar包中HTML读取css文件路径问题

因为插件最终生成的是jar文件，全部html中的css文件，因为路径没法读取，须要将css文件拷贝到html中

3.2 缓存文件须要利用文件流保存，这里涉及到插件的数据持久化。

由于用户设置的ttf文件路径和string.xml文件路径不能每次点击都要从新设置，哪还要这个插件干啥...，因此我就想将用户设置的这两个路径缓存起来，因此这里就涉及到插件的数据持久化。网上提供的插件持久化的两种方式我都试了一下，发现无法真正意义上的持久化，当你idea关闭后，这些数据都会被对应清理掉，对应于 1.使用PersistentStateComponent 2.使用PersistentStateComponent 因此最后我是用了文件流的方式缓存目录路径（你们若是有更好的方式能够告诉我～）

/**
     * 建立li
     */
public static final String ICON_ITEM = "<li>\n" +
            " <i class=\"icon iconfont\">%s</i>\n" +
            " <div class=\"name\">%s</div>\n" +
            " <div class=\"code\">%s</div>\n" +
            " </li>";
public void printer(String ttfPath) {
        InputStream html = this.getClass().getResourceAsStream(Common.HTML_PATH);
        try {
            Document doc = Jsoup.parse(html, "UTF-8", "");
            if (data != null) {
                Elements style = doc.select("style");
                style.prepend(String.format(Common.STYLE_DF, ttfPath));
                Elements container = doc.getElementsByClass("icon_lists clear");
                if (Common.MODE_ALL) {
                    //全量模式，从16进制最小值到16进制最大值
                    printerAll(container);
                } else {
                    //自定义模式,只输出定义的资源文件
                    printerDefine(container);
                }
            }
            File result = CreateFileUtil.createFile(RESULT_PATH);
            if (result == null) {
                return;
            }
            FileOutputStream outStream = new FileOutputStream(result);    //文件输出流用于将数据写入文件
            outStream.write(doc.toString().getBytes(StandardCharsets.UTF_8));
            outStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private void printerDefine(Elements container) {
        for (Map.Entry<String, XmlIconFontModel> entry : data.getFonts().entrySet()) {
            String code = entry.getValue().getFontValue();
            if (code.startsWith(Common.ICON_START)) {
                String value = "&#xe" + code.substring(3) + ";";
                container.append(String.format(Common.ICON_ITEM, value,
                        entry.getValue().getFontKey(), code));
            } else if (code.startsWith(Common.ICON_START_SUB)) {
                container.append(String.format(Common.ICON_ITEM, code,
                        entry.getValue().getFontKey(), code));
            }
        }
    }
复制代码

4.利用exec执行命令，打开生成的html文件

/**
         * 执行展现
         */
        try {
            if (OSinfo.isWindows()) {
                Runtime.getRuntime().exec("cmd.exe /c start " + RESULT_PATH);
            } else {
                Runtime.getRuntime().exec("open " + RESULT_PATH);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
复制代码