Bootstrap 可视化HTML编辑器,summernote(2)

简介: Bootstrap 可视化HTML编辑器,summernote

####1、布局div


<div class="summernote" name="description" placeholder="请对项目进行详细的描述,使更多的人了解你的" action="${ctx}/file">${deal.description}</div>

1

相信你也看到了我为div加上的三个属性name、placeholder、action,那么我们来详细介绍一下三个属性的作用:


name,为外层form表单提供summernote数据保存时的数据模型的属性名,和input标签的name属性作用一致,稍候在form提交的时候具体介绍。

placeholder,很直白,为summernote提供初始状态的文本描述,当然还需要后续加工,div显然是不支持placeholder属性的。

action,为图片上传提供后端接收地址,稍候在介绍图片上传onImageUpload会再次用到。

另外${deal.description}其实你不需要太多关注,和textarea的赋值的用法一致,就是单纯的显示保存后的内容。


####2、summernote初始化


$('div.summernote').each(function() {
  var $this = $(this);
  var placeholder = $this.attr("placeholder") || '';
  var url = $this.attr("action") || '';
  $this.summernote({
    lang : 'zh-CN',
    placeholder : placeholder,
    minHeight : 300,
    dialogsFade : true,// Add fade effect on dialogs
    dialogsInBody : true,// Dialogs can be placed in body, not in
    // summernote.
    disableDragAndDrop : false,// default false You can disable drag
    // and drop
  });
  });


使用jquery获取到页面上的summernote,对其进行初始化,我们来详细介绍列出参数的用法(先不介绍图片上传的onImageUpload 方法)。


lang ,指定语言为中文简体

placeholder ,summernote初始化显示的内容。

minHeight,最小高度为300,注意这里没有使用height,是有原因的,这里稍作解释,就不上图了。当使用height指定高度后,假如上传比height高的图片,summernote就不会自动调整高度,并且前文中“效果图3”中标出的红色区域会不贴着图片,而溢出到summernote外部。

dialogsFade,增加summernote上弹出窗口滑进滑出的动态效果。

dialogsInBody,这个属性也很关键,默认为false,字面上的意思是summernote的弹出框是否在body中(in嘛),设置为false时,dialog的式样会继承其上一级外部(如上文中的form-horizontal)容器式样,那么显示的效果就很别扭,这里也不再上图;那么设置为true时,就不会继承上一级外部div的属性啦,从属于body嘛。

disableDragAndDrop,设置为false吧,有的时候拖拽会出点问题,你可实践。

###②、summernote从本地上传图片方法

####1、前端onImageUpload方法


假如问度娘如下的话:“onImageUpload方法怎么写?”,度娘大多会为你找到如下回答:


$(\'.summernote\').summernote({
    height:300,
    onImageUpload: function(files, editor, welEditable) {
     sendFile(files[0],editor,welEditable);
    }
   });
 });
function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    url = "http://localhost/spichlerz/uploads";
    $.ajax({
        data: data,
        type: "POST",
        url: url,
        cache: false,
        contentType: false,
        processData: false,
        success: function (url) {
            editor.insertImage(welEditable, url);
        }
    });
}
</script>

以上资源来自于stackoverflow。

但其实呢,summernote-develop版本的summernote已经不支持这种onImageUpload写法,那么如今的写法是什么样子呢?参照summernote的官网例子。


onImageUpload
Override image upload handler(default: base64 dataURL on IMG tag). You can upload image to server or AWS S3: more…
// onImageUpload callback
$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      // upload image to server and create imgNode...
      $summernote.summernote('insertNode', imgNode);
    }
  }
});
// summernote.image.upload
$('#summernote').on('summernote.image.upload', function(we, files) {
  // upload image to server and create imgNode...
  $summernote.summernote('insertNode', imgNode);
});

那么此时onImageUpload的具体写法呢?(后端为springMVC):

callbacks : {
  // onImageUpload的参数为files,summernote支持选择多张图片
  onImageUpload : function(files) {
    var $files = $(files);
    // 通过each方法遍历每一个file
    $files.each(function() {
      var file = this;
      // FormData,新的form表单封装,具体可百度,但其实用法很简单,如下
      var data = new FormData();
      // 将文件加入到file中,后端可获得到参数名为“file”
      data.append("file", file);
      // ajax上传
      $.ajax({
        data : data,
        type : "POST",
        url : url,// div上的action
        cache : false,
        contentType : false,
        processData : false,
        // 成功时调用方法,后端返回json数据
        success : function(response) {
          // 封装的eval方法,可百度
          var json = YUNM.jsonEval(response);
          // 控制台输出返回数据
          YUNM.debug(json);
          // 封装方法,主要是显示错误提示信息
          YUNM.ajaxDone(json);
          // 状态ok时
          if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
            // 文件不为空
            if (json[YUNM.keys.result]) {
              // 获取后台数据保存的图片完整路径
              var imageUrl = json[YUNM.keys.result].completeSavePath;
              // 插入到summernote
              $this.summernote('insertImage', imageUrl, function($image) {
                // todo,后续可以对image对象增加新的css式样等等,这里默认
              });
            }
          }
        },
        // ajax请求失败时处理
        error : YUNM.ajaxError
      });
    });
  }
}
相关文章
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
113 0
|
6月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
134 4
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
51 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
44 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(25)网元可视化视图组件(Network)
这篇文章介绍了Twaver-HTML5中的网元可视化视图组件(Network)的层次结构,包括view、rootCanvas和topCanvas的使用方法和示例。
47 6
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
48 1
|
2月前
|
数据可视化 小程序 JavaScript
DIYGW可视化快速生成VUE3静态html页面
DIYGW可视化快速生成VUE3静态html页面
58 0
|
2月前
|
小程序 数据可视化 开发工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
37 0
|
4月前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
108 0
|
7月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。