最近开始写关于公众号编辑器Chrome插件
以前试过
-
写过WordPress编辑器插件,给TinyMce功能增强(使用php)
-
写过网页编辑器,选用TinyMce或者Quill(使用javaScript)
-
写过客户端编辑器,使用Electron(NodeJs)
客户端和网页编辑器相对好用但是脱离平台,需要多一步复制等操作,如果图片不依赖图床,复制起来相对繁琐
WordPress编辑器插件由于从经典编辑器切换到古腾堡编辑器
原来的代码高亮和HTML片段可以直接通过编辑HTML的方式,无需通过TinyMce,所以以前写的作用不大了
写Chrome插件的第一个原因是:
它可以直接操作DOM,对公众号编辑器在当前页面直接进行功能增强
并且直接对公众号使用的Ueditor编辑器v1.2.6实例进行变量引用和操作,复用其API
其他的原因是
-
无需部署服务器,离线可用,需要的资源和网页直接放在Chrome插件当中
-
可以使用Chrome的API,对JS操作不了的地方进行功能补充,但是v3版本比v2版本限制多了太多,很多以前可以的API,现在都被禁止了
因为是偏向技术类文章,时不时会放一些代码
公众号编辑器自身提供的代码块样式不怎么好看,需要加一个代码高亮
一键设置图片圆角和阴影,设置字体大小和颜色和间距,省去很多操作时间
设置自定义标题,如本文的红色标题模版,一键插入,适配移动端和PC端样式
公众号编辑器可以使用SVG,但是同时又过滤了太多属性
设置图片阴影的时候,发现CSS3 filter:drop-shadow被过滤,但是box-shadow可以使用
设置SVG点击动画的时候,发现id属性和position属性会被过滤(就是点击保存后,这些属性就没了)
id是SVG用来做点击动画,用于指定作用于那个SVG元素,没有id就无法控制动画的元素,只能作用于当前被点击的SVG
position是关于页面定位的,没有这个属性,一些类似覆盖,相对定位的布局就无法实现,基本就只能是一行一行的图文布局
官方并没有明确在论坛回复过滤了那些元素和属性,也没有回复为什么过滤这些属性
总而言之,一些好的交互效果限制了实现,只能实现一些基础的效果,并且是通过一些奇奇怪怪的布局方式来实现
公众号的svg动效目前还没有适配博客,后期抽空适配
END
