如果你需要一个轻量级的HTML所见即所得编辑器,你或许可以考虑wysihtml5了。

wysihtml5拥有许多独特之处,比如自动生成URL链接、不使用嵌入CSS等等,同时兼容支持包括IE8在内的众多浏览器,而在IE7、IE6等极为老旧的浏览器上可以仅仅显示为普通的编辑框来实现平缓降级。

如何使用

包含脚本

包含wysihtml5所需脚本如下:





创建编辑区域

这里的编辑框就是wysihtml5的目标编辑框,wysihtml5会将它转化为一个富文本编辑区域。

创建工具栏


这一步创建编辑器所需的工具栏,以便加入一些常用的命令,比如加粗、斜体等等。

初始化wysihtml5

现在,终于可以初始化wysihtml5了:


重新定义CSS

这一步是可选的,但最好一起加上。原因是wysihtml5在将编辑框内容渲染时,没有采用内联CSS这一方式,比如给一段文字加粗时,wysihtml5并不会直接设置这段文字的CSS,而是为这段CSS加上一个预定义的class,通过class所关联的CSS来进行渲染。

因此,为了避免浏览器默认样式对此的影响,wysihtml5提供了一组CSS,可在初始化时如下配置:

stylesheets: ["css/reset.css", "css/editor.css"]

许可证

wysihtml5使用MIT协议发行。

About liuyanghejerry

富有激情的前端工程师,专注GUI开发。

Comments are closed.

Post Navigation