超漂亮的Bootstrap 富文本编辑器summernote
|
Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键，有一个功能强大的 API，它提供了大量的自定义选项的设计（宽，高，有效的项目等等）和功能。对于主要的脚本语言或框架（PHP，Ruby，Django，NodeJS），该项目有提供了集成示例。 Bootstrap summernote，用其官网上的介绍就是“Super Simple WYSIWYG editor”，不过在我看来，与bootstrap中文官网上提供的“bootstrap-wysiwyg”要更simple，更漂亮，更好用！ 虽然我之前尝试过使用bootstrap-wysiwyg，可参照Bootstrap wysiwyg富文本数据如何保存到mysql，但事后诸葛亮的经验告诉我，summernote绝对是更佳的富文本编辑器，这里对其工作team点三十二个赞！！！！！ 经过一天时间的探索，对summernote有所掌握，那么为了更广大前端爱好者提供便利，我将费劲一番心血来介绍一下summernote，超级福利啊。 一、官方API和源码下载 工欲善其事必先利其器，首先把summernote的源码拿到以及对应官方API告诉大家是首个任务！ 官网（demo和api） github源码下载，注意下载开发版 二、效果图 效果图1
效果图2
效果图3
三、开讲内容 大的方向为以下三个内容： summernote的页面布局（资源引入、初始参数） summernote从本地上传图片方法（前端onImageUpload方法、后端springMVC文件保存） summernote所在form表单的数据提交 ①、summernote的页面布局以上资源来自于stackoverflow。 但其实呢，summernote-develop版本的summernote已经不支持这种onImageUpload写法，那么如今的写法是什么样子呢？参照summernote的官网例子。 onImageUpload那么此时onImageUpload的具体写法呢？（后端为springMVC）： 注释当中加的很详细，这里把其他关联的代码一并贴出，仅供参照。 " + xhr.responseText + " ");
} else {
$.showErr("Http status: " + xhr.status + " " + xhr.statusText + " " + "ajaxOptions: " + ajaxOptions + " "
+ "thrownError: " + thrownError + " ");
}
},ajaxDone : function(json) {
if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
if (json[YUNM.keys.message]) {
YUNM.debug(json[YUNM.keys.message]);
$.showErr(json[YUNM.keys.message]);
}
} else if (json[YUNM.keys.statusCode] == YUNM.statusCode.timeout) {
YUNM.debug(json[YUNM.keys.message]);
$.showErr(json[YUNM.keys.message] || YUNM.msg("sessionTimout"),YUNM.loadLogin);
}
},
2、后端springMVC文件保存2.1、为springMVC增加文件的配置这里就不做过多介绍了，可参照我之前写的SpringMVC之context-dispatcher.xml，了解基本的控制器 2.2、FileController.java2.3、FileService.java fileMap = multipartRequest.getFileMap();
Iterator
2.4、UploadFile.java后端文件保存方法也非常简单，懂java的同学都可以看得懂，那么对于后端不使用springmvc的同学，你可以再找找方法。 辛苦的介绍完前两节后，我们来一个动态图看一下效果吧！
③. summernote所在form表单的数据提交这里，我们再回顾一下summernote所在的form表单，其中还包含了一个普通file的input标签，也就是说，该form还需要上传一张项目封面。 先看一下form的属性： enctype：”multipart/form-data”，表明为文件类型的form保存 iframeCallback方法，稍候详细介绍，主要是对有文件上传的form表单进行封装。 1、iframeCallback"; $form.append(editor); } else { $.showErr("请填写项目详情"); return false; } }); if ($iframe.size() == 0) { $iframe = $("").appendTo("body"); } if (!form.ajax) { $form.append(''); } form.target = "callbackframe"; _iframeResponse($iframe[0],callback || YUNM.ajaxDone); } function _iframeResponse(iframe,callback) { var $iframe = $(iframe),$document = $(document); $document.trigger("ajaxStart"); $iframe.bind("load",function(event) { $iframe.unbind("load"); $document.trigger("ajaxStop"); if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For // Safari iframe.src == "javascript:'';") { // For FF,IE return; } var doc = iframe.contentDocument || iframe.document; // fixing Opera 9.26,10.00 if (doc.readyState && doc.readyState != 'complete') return; // fixing Opera 9.64 if (doc.body && doc.body.innerHTML == "false") return; var response; if (doc.XMLDocument) { // response is a xml document Internet Explorer property response = doc.XMLDocument; } else if (doc.body) { try { response = $iframe.contents().find("body").text(); response = jQuery.parseJSON(response); } catch (e) { // response is html document or plain text response = doc.body.innerHTML; } } else { // response is a xml document response = doc; } callback(response); }); }贴上全部代码以供参考，但是这里我们只讲以下部分： "; $form.append(editor); } else { $.showErr("请填写项目详情"); return false; } });通过form获取到summernote对象$this 后，通过!$this.summernote('isEmpty')来判断用户是否对富文本编辑器有内容上的填写，保证不为空，为空时，就弹出提示信息。 $this.summernote('code')可获得summernote编辑器的html内容，将其封装到input对象中，name为前文中div提供的name，供后端使用。 这里其他地方就不做多解释了，详细可参照Bootstrap wysiwyg富文本数据如何保存到mysql。 保存到数据库中是什么样子呢？
你好，有兴趣可以加入到沉默王二的群啊 页面效果为：
好了，好了，终于写完了，没想到写的这么累，如果你有什么新鲜的玩意，也可以联系我啊，欢迎你的指导！ 关于Bootstrap 富文本编辑器summernote小编就给大家介绍到这里，希望对大家有所帮助！有不同见解欢迎提出宝贵意见，共同学习进步！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
