最近看到 vue 的一个不错的后台。
http://herozhou.coding.me/vue-framework-wz/#/login
在上面看到一款编辑器:
这个编辑器的强大之处在于:插入图片的时候可以编辑尺寸和图片描述。这个操作在做SEO图片优化的时候就很有用啊,不需要去改代码。
我看上这个编辑器,最主要的原因是:它能够图片优化,插入的图片的时候,可以给图片添加 宽度 高度 和 alt ,而且插入的图片还可以有编辑功能,能够进行图片的旋转和裁剪。
正当我准备使用这个编辑器的时候,我放弃了。
主要原因有两个:
1、编辑器采用的是 iframe 页面框架做的。(果断抛弃,现在很多好的编辑器不会采用那个,连百度ueditor也不在用 iframe 的编辑器)。
2、图片编辑,旋转功能貌似没有用。
再次推荐一个好的编辑器:我使用最多的编辑器。好看,好用,简洁,大方。
wangEditor - 轻量级web富文本编辑器。
http://www.wangeditor.com/
这款编辑器还是比较好看的,采用的是 div 模式版,抛弃了 iframe 做富文本编辑器。
与之类似的,推荐 layui 的富文本编辑器,也比较好用。
说下缺点:
就我最开始的那个,图片上传设置图片大小和ALT属性实现不了。
解决办法:
1、修改源码,设置图片宽度,高度,ALT属性。
2、二次开发。
我选择第二种:
这个编辑器由于采用的不是 iframe 的结构,所以可以考虑使用 DOM 操作来设置图片宽度,高度,ALT属性。
思路:插入图片之后,点击图片,弹框设置图片的 宽度、高度、ALT属性。
示例:
具体示例代码:
编辑器调试