summernote 简洁的富文本编辑器 初体验

参考：

非常好用的bootstrap富文本编辑器---常用api

summernote 富文本编辑器 数据回显

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

官网下载：

http://summernote.org/

导入文件：

引入js

    <!-- summernote -->
    <link rel="stylesheet" href="..css/summernote/summernote.css" type='text/css' />
    <script src="../js/summernote/summernote.js"></script>

初始化HTML

<!-- 富文本编辑器 summernote -->
<div class="form-group">
    <label for="content" class="col-sm-2 control-label">富文本内容</label>
    <div class="col-sm-8">
        <div class="summernote" id="summernote"></div>
    </div>
</div>

<!-- 隐藏的文本域 -->
<input name="content" id="content" hidden />

（1）初始化方法，其中callback就是用作上传图片然后回调url地址用的

（2）sendFile就是你自己写的一个向后台具体上传的方法

（3）save就是整个表单的提交（因为富文本编辑器只是表单的一部分内容）

    <script>
        /**
         * 富文本编辑器初始化
         * */
        $('#summernote').summernote({
            height: 400,
            lang: 'zh-CN',
            focus:true,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['picture']]
            ],
            callbacks: {
                onImageUpload: function(files, editor, $editable) {
                    sendFile(files);
                }
            }
        });

        function sendFile(files, editor, $editable) {
            var formdata = new FormData();
            formdata.append("file", $('.note-image-input')[0].files[0]);
            $.ajax({
                data : formdata,
                type : "POST",
                url : "/xxx/upload", //图片上传出来的url，返回的是图片上传后的路径，http格式
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                success: function(data) {
                    console.info("插入的图片：" + data.data);
                    //data是返回的hash,key之类的值，key是定义的文件名
                    $('#summernote').summernote('insertImage', data.data);
                },
                error:function(){
                    alert("上传失败");
                }
            });
        }


        /**
         * 保存
         */
        $('#btnSave').on('click', function () {

            //获取文本的内容，并赋值给隐藏的input中
            var content = $('.summernote').summernote('code');
            $('#content').val(content);

            $.ajax({
                url: "/xxx/add",
                type: "POST",
                data: new FormData($("#form")[0]),
                processData: false,//因为data值是FormData对象，不需要对数据做处理。
                contentType: false,//表单已经设置了multipart
                cache: false,
                success: function (data) {
                    if (data.code == "1") {
                        window.location.href="/xxx/home";
                    }else if(data.code == -1){
                        alert(data.msg);
                    }
                },
                error: function (e) {
                    alert("保存失败");
                    window.location.href="/xxx/home";
                },
                complete: function () {
                }
            });
        });
    </script>

--------------------------------------回显-------------------------------------

引入js

    <!-- summernote -->
    <link rel="stylesheet" href="..css/summernote/summernote.css" type='text/css' />
    <script src="../js/summernote/summernote.js"></script>

HTML

<!-- 富文本编辑器 summernote -->
<div class="form-group">
    <label for="content" class="col-sm-2 control-label">富文本内容</label>
    <div class="col-sm-8">
        <div class="summernote" id="summernote"></div>
    </div>
</div>

<!-- 隐藏的文本域 -->
<input name="content" id="content" hidden  th:value="${data.content}" />

js：

先从隐藏的标签中拿到content的数据，然后交给富文本编辑器

因为我的内容中有各种标签<p><img>等等，所以用pasteHTML回显数据内容，你是纯文本的话，可以用insertText

<script th:inline="javascript">

        //富文本编辑器内容回显
        var content = $('#content').val();
        $('#summernote').summernote('pasteHTML', content);
//        $('#summernote').summernote('insertText', content);

        /**
         * 富文本编辑器
         * */
        $('#summernote').summernote({
            height: 400,
            lang: 'zh-CN',
            focus:true,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['picture']]
            ],
            callbacks: {
                onImageUpload: function(files, editor, $editable) {
                    sendFile(files);
                }
            }
        });

        function sendFile(files, editor, $editable) {
            var formdata = new FormData();
            formdata.append("file", $('.note-image-input')[0].files[0]);
            $.ajax({
                data : formdata,
                type : "POST",
                url : "/xxx/upload", //图片上传出来的url，返回的是图片上传后的路径，http格式
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                success: function(data) {
                    console.info("插入的图片：" + data.data);
                    //data是返回的hash,key之类的值，key是定义的文件名
                    $('#summernote').summernote('insertImage', data.data);
                },
                error:function(){
                    alert("上传失败");
                }
            });
        }

        /**
         * 保存
         */
        $('#btnSave').on('click', function () {

            //获取文本的内容，并赋值给隐藏的input中
            var content = $('.summernote').summernote('code');
            $('#content').val(content);

            $.ajax({
                url: "/xxx/update",
                type: "POST",
                data: new FormData($("#form")[0]),
                processData: false,//因为data值是FormData对象，不需要对数据做处理。
                contentType: false,//表单已经设置了multipart
                cache: false,
                success: function (data) {
                    if (data.code == "1") {
                        window.location.href="/xxx/home";
                    }else if(data.code == -1){
                        alert(data.msg);
                    }
                },
                error: function (e) {
                    alert("保存失败");
                    window.location.href="/xxx/home";
                },
                complete: function () {
                }
            });
        });
    </script>