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/

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

相关文章推荐

bootstrap插件summernote 的使用

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

summernote富文本编辑器的基本使用

基础API 初始化 summernote $('#summernote').summernote(); 初始化并配置summernote 高度和焦点设置 如果对summernote设置了focus项,...
  • babyxue
  • babyxue
  • 2017年07月20日 10:44
  • 1097

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

//富文本编辑器 $('#summernote').summernote({ height: 400, lang: 'zh-CN', focus...

超漂亮的Bootstrap 富文本编辑器summernote

项目里需要做个富文本编辑器,跟QQ日志差不多。现在前端做的并没有带插入图片的功能。于是网上找了很多方案,有N多坑。最后终于在以下这个地址找到了 http://blog.csdn.net/mr_oran...

django模板中插入summernote工具(bootstraphtml编辑器)

图片上传参考链接:出处 1.可按照summernote官方的github地址下载--开发版. 2.我们需要使用的文件在dist文件夹内,将该文件夹内的文件复制到路径:/myproject/app/...

Summernote实现图片上传功能

Summernote实现图片上传功能 还是接着之前说过的最近在写一个BootStrap网页....然后要用富文本编辑器,随便搜了下就选了这货 然后发现了很尴尬的问题...图片上传功能无效......

一个不报错的summernote 上传图片案例

一个比较完整的summernote上传图片的案例,没有后台(上传图片网上案例太多),只有前端js.修正了网上提供的,但是有bug的代码。 这个例子,js保证不报错。亲测可用     pageEn...

修改Summernote文本编辑器支持上传图片到服务器

官网:http://summernote.org/ Summernote是基于Bootstrap的文本编辑器 Summernote默认上传图片是保存二进制图片数据,这样会造成数据库庞大, ...
  • lg_lin
  • lg_lin
  • 2016年05月25日 11:49
  • 11358

基于jquery的bootstrap在线文本编辑器插件Summernote

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox、Op...

jquery文本编辑器插件Summernote

  • 2014年07月28日 23:25
  • 287KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Summernote – 基于 Bootstrap 的文本编辑器
举报原因:
原因补充:

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