龙珠课堂

本博客所记录的文章,主要是从网络收集的,有一些因为经过多次转载,所以出处已经不知,若是侵权,请通知我,我及时修改。本博客主要是用来记录我在实际工作中遇到的技术收集,若有错误,请大家指点,相互学习!...

Summernote – 基于 Bootstrap 的文本编辑器

一:引入相关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/

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hdchenyue/article/details/52384107
个人分类: 富文本
想对作者说点什么? 我来说一句

summernote.min.js

2017年12月27日 256KB 下载

jquery文本编辑器插件Summernote

2014年07月28日 287KB 下载

没有更多推荐了,返回首页

不良信息举报

Summernote – 基于 Bootstrap 的文本编辑器

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭