羽毛编辑器

首发于羽毛工作室官方博客——和有趣的人做尽有趣的事!

版本:1.0

日常工作中经常需要进行微信排版,在使用135编辑器的时候,发现有些功能总需要重复操作,例如:更改字号、间距、行距、等等。特开发此编辑器,用于辅助操作135编辑器,高效完成日常排版工作。

使用帮助

简单3步,即可完成一篇出色的排版。

1、文章框架录入

image-20210411143738867

在蓝框内输入框架代码后,按【框架渲染】按钮,即可输出源码和预览。

1
2
3
4
5
6
7
【头尾】
【】
【图】
【】
【文字】
【】
【历史文章】

根据文章框架,用中文方括号【】包裹样式名的方式,详情参考样式库 ,注意:每行写入一个样式

2、修改填充内容

方法一:直接修改源码(需要html基础)

image-20210411151943181

如果你掌握最基础的HTML知识,即可通过源码的方式直接修改内容,按【更新预览】按钮,即可刷新预览内容。

或者你也可以直接复制源码内容,粘贴至【135编辑器】中的HTML编辑模式,然后在【135编辑器的】视觉化界面操作。

image-20210411152442879

Ps:使用此方法,请千万确保【135编辑器】中 HTMl模式下无内容(如果有内容,请先删除原内容再粘贴)

方法二:修改预览区(所见即所得)

image-20210411152817545

预览区支持直接编辑,只是修改的时候要小心,避免出现格式错乱的情况

image-20210411154343048

ps:修改预览区后,记得点一下更新源码,就可以同步更改内容至源码中了

方法三:添加新样式至现有源码

如果领导突然说,要调整最初设定好的框架,例如增加一个【历史文章】样式,这种烦人的情况。那么此功能便会排上用场。

image-20210411155201506

按上述步骤操作需要一定HTML知识才知道该往源码中的哪里复制,千万不要点【框架渲染】否则之前的修改会消失。建议操作前请先备份源码,以防丢失。

建议小白不要使用此功能,直接将源码粘贴至【135编辑器】中的HTML编辑模式,然后在【135编辑器的】视觉化界面操作,从而添加新样式。

3、复制到微信公众号

image-20210411160058803

这一步就非常简单了,点击按钮,然后在微信公众号后台,使用 Ctrl+V 粘贴即可。或者也可以粘贴到【135编辑器】的视觉化编辑界面,效果相同。

样式库

【文字】

image-20210411144024231

【图】

image-20210411144106557

【】

image-20210411144144602

ps:空行效果

【线1】

image-20210411150707458

【线2】

image-20210411150734073

【格子】

image-20210411150818860

【标1】

image-20210411150856829

【标2】

image-20210411150916483

【小标1】

image-20210411151001765

【头尾】

image-20210411151054146

【历史文章】

image-20210411151133071

【导语】

image-20210411151152591

【发言】

image-20210411151223474

【多图竖滚】

image-20210412132116085

【引用】

image-20210412132905966

【6图】

image-20210412133331752

【4图】

image-20210412134235886

【总结】

image-20210412135330114

写在最后的话

整个小应用的逻辑非常简单,但是对于工作中的帮助很大,使用一段时间后,我会逐渐更新样式库,以及新的实用功能。