# Preview - 修改MDX CSS的神器，支持CSSJS实时预览 **URL:** \ **Category:** 技术交流与词典编修\ **Created:** [2020 年3 月 28 日 14:28 UTC](https://forum.freemdict.com/t/topic/1251 "2020-03-28T14:28:21Z")\ **Posts on this page:** 20\ **Page:** 1
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2020 年3 月 28 日 14:28 UTC](https://forum.freemdict.com/t/topic/1251/1 "2020-03-28T14:28:21Z")
> 现在修改词典CSSJS，通常有两种方式: > > - 用Goldendict加载词典，直接在GD的网页上边修改边预览效果。 > - 从词典里先提取一部份词条的页面，再在Chrome浏览器里修改。 > > 这两种方式，都有些问题，在GD里修改少量还行，改动多了就很不直观，尤其是JS这种要反复加载的，而且Goldendict的浏览器内核是老版本的webkit，自带的开发工具不支持高清屏也不支持手机预览。第二种方式通常是高手在用了，但需要在多个词条页面检查显示效果的时候，也很麻烦，也不支持读取MDD里文件。 **Preview** 是一款 **面向MDX词典前端开发** 的工具，很好的解决了上述问题，支持加载MDD资源文件，同时监听对应的CSSJS文件，用文本编辑器修改保存CSS后，会实时更新浏览器里的页面，不再需要手动刷新浏览器，并且支持词头查询，允许跳转任意词头，预览对比检查CSS。 欢迎大家尝试，提错或者新的需求。 ### 简单说明： - 如果启动exe程序失败或者超时，检查3030端口占用。 - 不支持多开，端口固定使用3030。 - 暂不支持32位系统，环境没装，等功能稳定下来会发版。 - 支持词头查询(2ms)，支持拼写提示，在网页上使用ALT+F打开输入框，ESCAPE取消。 - 支持页面词条链接跳转，支持MDD图片音频加载。 - 监听词典同目录下JSCSS文件，修改文件，实时同步预览显示效果(200ms)。 - 加载词典后生成的索引没有写文件，所以内存占用大概10万词头5M的样子。 - 支持多客户端同步显示搜索结果，允许在PC上修改CSS，手机上同步刷新，方便调试。 - 不支持IE浏览器。 ##### 检查端口占用的命令： ```auto netstat -ano|findstr "3030" // TCP 127.0.0.1:3030 0.0.0.0:0 LISTENING 1848 taskkill -PID 1848 -F // SUCCESS: The process with PID 1848 has been terminated. ``` ### 更新日志： [0.1.8] - 2020-04-09 - 增加随机读取词头功能，除第一次加载词典会显示启动信息页面，每次刷新页面都会加载新的词头。感谢@huala的反馈！ - 增加词头跳转功能，支持@@@LINK跳转，有些词典超过一半词头都是跳转。感谢@atauzki的反馈！ - 修复部份PNG读取失败问题，测试了16万+文件，特别是阿彌陀佛的图片词典，现在所有图片都能正常读取。感谢@nonwill的帮助! - 已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[[报告链接]](https://r.virscan.org/language/zh-cn/report/cb1f1feaed059b75eade3cba040c676b) [0.1.7] - 2020-04-04 - 现在搜索框会始终置顶，除非使用ESCAPE主动取消。感谢@喬治兄@huala的反馈! - 修复部份PNG读取失败导致的程序崩溃问题，目前只在纯PNG的图片版词典中发现有此问题，还没找到原因，发现GD和readmdict.py也无法处理，而MDict能正常读取此类文件。（已找到原因，下版本会解决） - 已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[[报告链接]](https://r.virscan.org/language/zh-cn/report/6ac02c85c1b04e8306e7a5b33cbf7dc8) [0.1.6] - 2020-04-02 - 现在会禁止浏览器从缓存中读取本地文件，已经缓存的需要先清空一次。感谢@Word@huala@eplono的反馈! - 压缩索引，现在每10万词头占用从10M → 5M内存，索引时间从70ms → 85ms。考虑提供选项继续压缩到1.5M内存，索引时间会提高到380ms。 - 已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[[报告链接]](https://r.virscan.org/language/zh-cn/report/82523cd8e38606f9a840b5576cf9326b) [0.1.5] - 2020-04-01 - 修复当文件名包含中文时CSS无法实时刷新的问题。感谢@Word的反馈! - 修复MAC 10.15版本缺少依赖库的问题。感谢@huala的反馈! - 已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[[报告链接]](https://r.virscan.org/language/zh-cn/report/f791390dbb4e5c2d543f7d8d15e6e532) [0.1.4] - 2020-03-31 - 修复当文件名包含空格时CSS无法实时刷新的问题。感谢@Word的反馈！ - 已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[[报告链接]](https://r.virscan.org/language/zh-cn/report/05ff97450c071b4ee1cd631fa8485a3d) [0.1.3] - 2020-03-30 - 现在读取词典内外的JSCSS等文件时会忽略大小写。 - 修复当URL路径包含空格时会读取不到文件的问题。 [0.1.2] - 2020-03-30 - 解决WIN7 DPI\>125%时界面错位问题。感谢@喬治兄的反馈！ [0.1.1] - 2020-03-29 - 支持多客户端同步搜索结果，支持在PC查词或修改CSS，在手机端同步显示结果。 - 发布WIN和MAC双版本。 [0.1.0] - 2020-03-28 - 诞生 下载地址： [Preview-0.1.8-x86\_64-pc-windows-msvc.zip](https://www.lanzous.com/ib5fjsd) [Preview-0.1.8-x86\_64-apple-darwin.zip](https://www.lanzous.com/ib5fjvg) 部份截图： ![preview-01](https://forumcdn.freemdict.com/uploads/default/original/2X/2/22b0c639f00d60f5dd874d4705a76c482ee6b6dd.png) ![preview-02](https://forumcdn.freemdict.com/uploads/default/original/2X/4/4f02a5b95a299e1c23a330d57eaafdf65b295880.png) ![preview-03](https://forumcdn.freemdict.com/uploads/default/original/2X/0/0bf8f10a59e2d99c15a487cd094dfd272782f240.png) ![preview-04](https://forumcdn.freemdict.com/uploads/default/original/2X/3/3571f9008795edd2b2430b2294e68dcafd25f258.png) ![preview-05](https://forumcdn.freemdict.com/uploads/default/original/2X/0/0b627db94a6b920295d2e53a5d573bddfd2e9909.png) ---
作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\ 发布日期： [2020 年3 月 28 日 14:45 UTC](https://forum.freemdict.com/t/topic/1251/2 "2020-03-28T14:45:46Z")
先赞为敬 :skr_4_gif: ---
作者： ![endnote](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/9de0a6/32.png) [@endnote](https://forum.freemdict.com/u/endnote)\ 发布日期： [2020 年3 月 28 日 16:07 UTC](https://forum.freemdict.com/t/topic/1251/4 "2020-03-28T16:07:17Z")
厉害啊，支持楼主，辛苦了 ---
作者： ![sxingbai](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/s/919ad9/32.png) [@sxingbai](https://forum.freemdict.com/u/sxingbai)\ 发布日期： [2020 年3 月 28 日 23:48 UTC](https://forum.freemdict.com/t/topic/1251/5 "2020-03-28T23:48:00Z")
牛人，致敬！ ---
作者： ![pesticide4](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@pesticide4](https://forum.freemdict.com/u/pesticide4)\ 发布日期： [2020 年3 月 29 日 01:05 UTC](https://forum.freemdict.com/t/topic/1251/6 "2020-03-29T01:05:05Z")
楼主厉害，无奈技术太差不会用 😓 ---
作者： ![Arlin](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/82dd89/32.png) [@Arlin](https://forum.freemdict.com/u/Arlin)\ 发布日期： [2020 年3 月 29 日 03:05 UTC](https://forum.freemdict.com/t/topic/1251/8 "2020-03-29T03:05:44Z")
哇塞，这也太棒了！ ---
作者： ![NYLZHF](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/n/958977/32.png) [@NYLZHF](https://forum.freemdict.com/u/NYLZHF)\ 发布日期： [2020 年3 月 29 日 03:14 UTC](https://forum.freemdict.com/t/topic/1251/9 "2020-03-29T03:14:26Z")
这个必须点赞。 ---
作者： ![HDtiger](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/h/47e85d/32.png) [@HDtiger](https://forum.freemdict.com/u/HDtiger)\ 发布日期： [2020 年3 月 29 日 03:43 UTC](https://forum.freemdict.com/t/topic/1251/10 "2020-03-29T03:43:51Z")
有安卓的就好了，这样可以在手机上编辑。 ---
作者： ![xyg](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/x/43a26b/32.png) [@xyg](https://forum.freemdict.com/u/xyg)\ 发布日期： [2020 年3 月 29 日 04:02 UTC](https://forum.freemdict.com/t/topic/1251/11 "2020-03-29T04:02:36Z")
厉害了，谢谢这么好用的工具! ---
作者： ![atauzki](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/atauzki/32/1365_2.png) [@atauzki](https://forum.freemdict.com/u/atauzki)\ 发布日期： [2020 年3 月 31 日 04:37 UTC](https://forum.freemdict.com/t/topic/1251/13 "2020-03-31T04:37:16Z")
反馈两个问题： 1.现在重复词头的查询结果只显示一个。比如collins2020全站那个mdx，查see只能查到related words 2.现在`@@@LINK`不支持自动跳转 ---
作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\ 发布日期： [2020 年3 月 31 日 07:32 UTC](https://forum.freemdict.com/t/topic/1251/14 "2020-03-31T07:32:29Z")
面向前端就要面向 web （嘻嘻，linux版本会有嘛） ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2020 年3 月 31 日 14:33 UTC](https://forum.freemdict.com/t/topic/1251/15 "2020-03-31T14:33:42Z")
是的，原因是合并词头需要拼接HTML和修改CSS，改动会很多，显示原始的HTM页面更方便词典作者自己修改，@@@LINK也是如此。感谢反馈！ ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2020 年3 月 31 日 14:36 UTC](https://forum.freemdict.com/t/topic/1251/16 "2020-03-31T14:36:52Z")
可以有，看有人需要再打包。还是WIN上的多。 ---
作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\ 发布日期： [2020 年3 月 31 日 14:52 UTC](https://forum.freemdict.com/t/topic/1251/17 "2020-03-31T14:52:03Z")
不是 linux 桌面端，是服务器端 ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2020 年3 月 31 日 14:53 UTC](https://forum.freemdict.com/t/topic/1251/18 "2020-03-31T14:53:02Z")
在做GoldenDict的替代版，欢迎到时使用。 ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2020 年3 月 31 日 14:59 UTC](https://forum.freemdict.com/t/topic/1251/19 "2020-03-31T14:59:50Z")
应该可以，API接口可以共用，可以单独部署在服务器上，但是前端不能共用，现在写的是给桌面端用的。 ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2020 年3 月 31 日 15:09 UTC](https://forum.freemdict.com/t/topic/1251/20 "2020-03-31T15:09:17Z")
Preview添加词典，用的下面的HTTP接口。桌面端出来会整理下接口，现在还在做搜索这块。 ```auto api: http://127.0.0.1:3030/api/parser method: post // application/json {"fname": "C:\\Repos\\GitHub\\mdx\\outputs\\demo.mdx"} // elasped ms 202 ``` ---
作者： ![Brice](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/brice/32/5_2.png) [@Brice](https://forum.freemdict.com/u/Brice)\ 发布日期： [2020 年4 月 1 日 12:01 UTC](https://forum.freemdict.com/t/topic/1251/21 "2020-04-01T12:01:34Z")
论坛的人才越来越多了。手动点赞。 😆 ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2020 年4 月 1 日 12:59 UTC](https://forum.freemdict.com/t/topic/1251/22 "2020-04-01T12:59:42Z")
好久没见你了。 ---
作者： ![farman](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/f/f14d63/32.png) [@farman](https://forum.freemdict.com/u/farman)\ 发布日期： [2020 年4 月 1 日 13:12 UTC](https://forum.freemdict.com/t/topic/1251/23 "2020-04-01T13:12:21Z")
这个软件必须要支持一下，修改css的利器啊！！ [下一页](https://forum.freemdict.com/t/topic/1251.md?page=2)