summerNote富文本编辑器

引入样式

简单使用

html代码

 <div class="form-group">
          <!--富文本编辑器 start-->
          <label for="summernote">问题正文</label>
          <textarea name="content" id="summernote"></textarea>
          <!--富文本编辑器 end-->
        </div>

js代码

<script>
  $(document).ready(function() {
    $('#summernote').summernote({
      height: 300,
      tabsize: 2,
      lang: 'zh-CN',
      placeholder: '请输入问题的详细描述...'
    });
    $('select').select2({placeholder:'请选择...'});
  });
</script>

初始化summerNote

$(document).ready(function() {
    $('#summernote').summernote({
        height: 300,
        tabsize: 2,
        lang: 'zh-CN',
        placeholder: '请输入问题的详细描述...',
        //回调方法在选择图片之后自定调用onImageUpload方法
        callbacks:{
            onImageUpload:function (files) {
                let  file = files[0];//找到选定的图片
                console.log(file);
                let form = new FormData();
                form.append("imageFile",file);
                $.ajax({
                    url:"/upload/image" ,
                    method:"POST",
                    data:form,
                    cache:false,
                    contentType:false,
                    processData:false,
                    success:function (r) {
                        if (r.code===OK){
                            //上传成功后进行加载创建img标签
                            var  img= new Image();
                            img.src=r.message;
                            //将图片添加到summernote
                            $("#summernote").summernote("insertNode",img);
                        }else{
                            alert(r.message);
                        }

                    }
                });

            }
        }
    });

});