TMDBug

Code Change The World And Make It Better!

TMD.Bug

Bootstrap编辑器之summernote

想给一个bootstrap的网站换个编辑器,于是就找到了这个开源编辑器——summernote

编辑器的集成:

1.首先引入bootstrap样式和js以及jquery。可以 引入 官方CDN。(先引入jquery.js 再引入bootstrap.js)
2.然后 引入 下载好的summernote的样式和js[官方下载],也可以 引入 官方的提供的CDN链。
3.此时需要写一个summernote的布局加载及其配置的js。[官方配置说明]
4.然后这时候在网页中创建一个div或textarea,自定义一个和预加载js同样的id,刷新网页就可以看到编辑器布局了。
5.由于编辑器上传图片是将二进制数据写入到文本了,所以需要重写上传图片方法

代码及注视说明:

获取编辑器中的内容:

设置内容时可以放在两个<textarea><?php echo $content; ?></textarea>之间,也可以用官方提供的方法:

预览地址http://sta.tmdbug.com/demo/summernote.html

5 + 6 =

回到顶部