Summernote – 基于 Bootstrap 的文本编辑器

原创 2016年08月31日 13:36:54

一:引入相关JS和css

<!-- include libries(jQuery, bootstrap, fontawesome) -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>

<!--国际化 -->
<script src="lang/summernote-zh-CN.js"></script>

二:插入编辑器

<div id="summernote">Hello Summernote</div>

三:让编辑器工作

$(document).ready(function() {
  $('#summernote').summernote();
});

四:部分API

获取编辑器内容:

$('#summernote').code();

五:图片上传部件

js代码

            $(document).ready(function() {
                $('#summernote').summernote({
                    lang: 'zh-CN', // default: 'en-US'
                    height: 300,
                    onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0],editor,welEditable);
                    }
                });
            });

            function sendFile(file,editor,welEditable) {
                data = new FormData();
                data.append("file", file);
                $.ajax({
                    data: data,
                    type: "POST",
                    url: "${base}/store/album/uploadImage/${goods.albumId?c}",
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        editor.insertImage(welEditable, data.url);
                    }
                });
            }

服务器代码:

@RequestMapping(value="/album/uploadImage/{albumId}",method= RequestMethod.POST)
    @ResponseBody
    public Object uploadImage(HttpServletResponse response,HttpServletRequest request,
                            @RequestParam(value="file", required=false) MultipartFile file,@PathVariable Integer albumId){
        Map result_map = new HashMap();
        try{
            byte[] bytes = file.getBytes();
            String uploadDir = request.getSession().getServletContext().getRealPath("/upload");//request.getContextPath()+"/upload";
            File dirPath = new File(uploadDir);
            if (!dirPath.exists()) {
                dirPath.mkdirs();
            }
            String sep = System.getProperty("file.separator");
            String fileName = UUID.randomUUID().toString() + "." + getSuffix(file.getOriginalFilename());
            File uploadedFile = new File(uploadDir + sep + fileName);
            FileCopyUtils.copy(bytes, uploadedFile);

            //上传到又拍云
            String filePath = uploadDir + "/" + fileName;
            Map<String, Object> map = UpYunUtil.writeFile(fileName, filePath, true);
            String url = (String) map.get("detail");
            new File(filePath).delete();//上传到又拍云后删除

            //保存照片Url到image表
            storeService.saveImage(albumId,url);
            result_map.put("url",url);
            return result_map;
        }catch (IOException e){
            result_map.put("url","");
            return result_map;
        }
    }

下载所有文档移驾官网:http://summernote.org/

版权声明:本文为博主原创文章,未经博主允许不得转载。

summernote 赋值 以及 取值

http://www.jqcool.net/bootstrap-summernote.html 转载 这个大神,写的很详细,但是,赋值这里错了。 //取值 var...
  • a5601564
  • a5601564
  • 2016年09月26日 15:22
  • 11095

Bootstrap 可视化编辑器summernote

版权声明:本文出自沉默王二的博客,转载必须注明出处。技术交流群 120926808 目录(?)[+] Bootstrap 可视化HTML编辑器之summerno...
  • qq_37677519
  • qq_37677519
  • 2017年08月12日 12:37
  • 3710

Bootstrap 可视化HTML编辑器,summernote

Bootstrap 可视化HTML编辑器之summernote,用其官网上的介绍就是“Super Simple WYSIWYG editor”,不过在我看来,与bootstrap中文官网上提供的“bo...
  • qing_gee
  • qing_gee
  • 2016年03月31日 17:14
  • 26727

summernote文本编辑器使用(含概要内容提取)

test.jsp
  • huayushuangfei
  • huayushuangfei
  • 2017年11月15日 10:48
  • 335

bootstrap插件summernote 的使用

一、有时java工程中会用到summernote 编辑器,下面简单说一下引用 1、将summernote 相应的文件放到工程中(webapp下面) 2、建一个jsp文件,在文件中引入相应的js、c...
  • zihandan
  • zihandan
  • 2016年03月31日 11:58
  • 17746

Linux安装ftp组件

一:Linux安装ftp组件 安装步骤如下: 1、查看自己是否已经安装了vsftpd。下图我已经安装了vsftprpm -qa|grep vsftpd //或者 find / -name vsft...
  • xiaozhegaa
  • xiaozhegaa
  • 2017年08月01日 01:21
  • 835

summernote 富文本编辑器 简单实例

summernote 富文本编辑器简介 Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建。Summernote 所有主...
  • gentleyu1994
  • gentleyu1994
  • 2016年01月06日 14:18
  • 1817

summernote网页编辑器嵌入视频

summernote是一个比较好用的html网页编辑器,开源,所以我们可以用与
  • qiya2007
  • qiya2007
  • 2014年05月09日 21:15
  • 3295

summernote富文本编辑器

summernote
  • frankcheng5143
  • frankcheng5143
  • 2017年04月29日 21:53
  • 1309

summernote处理上传图片到自己的服务器

//富文本编辑器 $('#summernote').summernote({ height: 400, lang: 'zh-CN', focus...
  • zero_295813128
  • zero_295813128
  • 2016年09月26日 14:51
  • 6940
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Summernote – 基于 Bootstrap 的文本编辑器
举报原因:
原因补充:

(最多只允许输入30个字)