bootstrap-wysiwyg:简洁优雅的富文本编辑器

推荐指数:★★★★
使用难度:★
适用范围:评论框、编辑框、各种需要输入大段文字的地方

GitHub数据


Star数中规中矩,亮点是体积小(5kb),风格朴素但不单薄,支持键盘快捷键,可以修改使其支持移动端,再加上使用简单,完爆国内各种富文本编辑器。


一句话讲解原理:在bootstrap的基础上实现文本编辑需要的功能。


效果截图


缺点:

1、风格虽然不错,但是对于国内用户来说可能还是有点不适应。

2、鼠标移动到按钮上会出现提示,不过是英文的,如果要使用的话可能需要自行修改代码汉化。


一段代码教程

 <div data-role="editor-toolbar"
data-target="#editor">
...
</div>
<div id="editor">
</div>

$('#editor').wysiwyg();


两个div,第一个是工具条,可以自己选择需要什么按钮。第二个是文本框,注意id属性的设置。最后一句是调用库来生成整个编辑器。

用户输入的文本直接用js获取就行,并不像大部分富文本编辑器那样需要调用API。不仅风格简洁,代码也一样简洁,一共不到200行。。。

大家有觉得不错的库一定要推荐给我哦~共同进步!


bootstrap-wysiwyg地址


欢迎扫描二维码关注我的微信号“GitHub不完全装B指南”,谢谢~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容