很多朋友在使用百度Ueditor时发现无法在手机浏览器上很好的兼容,使用起来不方便。万维景盛设计师就在这里给大家分享一款可以兼容手机版的在线编辑器,那就是基于bootstrap打造的Summernote编辑器。
Summernote是一个轻量级、灵活基于Bootstrap和jQuery的HTML文本编辑器,拥有强大的API配
置功能,多国语言支持支持Bootstrap2.x和3.0,支持视频和图片上传以及代码的高亮显示,多种
后台语言版本示例以及多主体支持,在浏览器兼容方面,支持IE9+以及现代的浏览器Chrome,
Firefox,Safari等,在移动端应该有不错的表现,还是很不错的,值得使用。
使用方法:
1.加载JS和CSS
1 | <!-- include libries(jQuery, bootstrap, fontawesome) --> |
2 | <script src= "//code.jquery.com/jquery-1.9.1.min.js" ></script> |
3 | <link href= "//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" > |
4 | <script src= "//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js" ></script> |
5 | <link href= "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" > |
6 | <!-- include summernote css/js--> |
7 | <link href= "summernote.css" /> |
8 | <script src= "summernote.min.js" ></script> |
2.编写HTML内容
1 | < div id = "summernote" >Hello Summernote</ div > |
3.初始化调用
2 | $(document).ready( function () { |
3 | $( '#summernote' ).summernote(); |
高度定义
1 | $( '#summernote' ).summernote({ |
工具条参数配置
01 | $( '#summernote' ).summernote({ |
04 | [ 'style' , [ 'bold' , 'italic' , 'underline' , 'clear' ]], |
05 | [ 'fontsize' , [ 'fontsize' ]], |
07 | [ 'para' , [ 'ul' , 'ol' , 'paragraph' ]], |
08 | [ 'height' , [ 'height' ]], |
4.获取编辑器内容
1 | var sHTML = $( '#summernote' ).code(); |