基于BootStrap的文本编辑器组件Summernote(基于bootstrap的毕业设计)

编辑：rootadmin

推荐整理分享基于BootStrap的文本编辑器组件Summernote(基于bootstrap的毕业设计)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:bootstrap参考手册,bootstrap的应用,基于bootstrap的网站,bootstrapcsdn,基于bootstrap的毕业设计,基于bootstrap的网站,基于bootstrap的毕业设计,基于bootstrap的毕业论文,内容如对您有帮助，希望把文章链接给更多的朋友！

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级，大小只有KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。

特点：

世界上最好的WYSIWYG在线编辑器

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

Summernote官网地址： lang:'zh-CN', //设置中文，需引入中文插件summernote-zh-CN.js placeholder: 'write here...', //占位符 dialogsInBody: true, //对话框放在编辑框还是Body dialogsFade: true ,//对话框显示效果 disableDragAndDrop: true ,//禁用拖放功能 shortcuts: false ,//禁用快捷键

还有回调函数：

回调函数里面的事件有 oninit，onenter，onfocus，onblur，onkeyup，onkeydown，onpaste,onImageUpload 等等，

这里主要介绍上传图片触发的事件 onImageUpload ：

基于BootStrap的文本编辑器组件Summernote(基于bootstrap的毕业设计)

插入图片的时候，Summernote组件默认是将图片以二进制形式展示的，如果以此方式将文本框的内容存储到数据库时，会导致数据库数据量很大

这是summernote默认方式插入图片时存储到数据库的字段：

所以这里采用另一个方法，就是将图片上传到服务器，上传成功后回传图片的访问地址到插入的图片位置，展示图片；

具体实现如下：

后台处理请求存储图片到服务器，成功则返回图片访问地址：

注意：我这里是将图片上传的真实地址和虚拟的图片访问地址在tomcat的server.xml中配置了映射关系，所以上传成功后返回给前端的是虚拟的访问地址；

建议：真实的上传根路径应写在properties配置文件中，方便日后地址的修改，同时虚拟的访问根路径也不应存储到数据库当中，只需存储相对位置就可以，将虚拟的访问根路径也写在properties文件当中。

通过上面的方法处理后，存储到数据库的字段：

获取编辑框内容的方法：

总结

以上所述是小编给大家介绍的基于BootStrap的文本编辑器组件Summernote，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！

mint-ui的search组件在键盘显示搜索按钮的实现方法代码如下所示：formaction=""target="frameFile"mt-searchv-model="value"placeholder="请输入关键字"@keyup.native.enter="search(value)"divv-infinite-scroll="loadMore()"infinite-scroll-disabled

ES6中Class类的静态方法实例小结本文实例讲述了ES6中Class类的静态方法。分享给大家供大家参考，具体如下：以前看过的es6的东西，又忘了，再总结下：类相当于实例的原型，所有在类

JavaScript代码执行的先后顺序问题一、js---单线程严格意义上来说，javascript没有多线程的概念，所有的程序都是单线程依次执行的。1、什么是单线程？通俗点说，就是代码在执行过程中

标签: 基于bootstrap的毕业设计

本文链接地址:https://www.jiuchutong.com/biancheng/368463.html 转载请保留说明！

上一篇：JS获取数组中出现次数最多及第二多元素的方法(js获取数组元素个数)

下一篇：ES6中Class类的静态方法实例小结(es6class类用法)