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
      });
    });
  }
}
相关文章
|
2月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
84 1
|
2月前
|
移动开发 JSON JavaScript
全网最详细教写可视化面板(js、css3、html5)
全网最详细教写可视化面板(js、css3、html5)
27 0
|
2月前
|
JSON 前端开发 数据可视化
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
708 0
|
2月前
|
资源调度 前端开发 数据可视化
R语言参数自抽样法Bootstrap:估计MSE、经验功效、杰克刀Jackknife、非参数自抽样法可视化自测题
R语言参数自抽样法Bootstrap:估计MSE、经验功效、杰克刀Jackknife、非参数自抽样法可视化自测题
|
2月前
|
资源调度 前端开发 数据可视化
R语言GARCH模型对股市sp500收益率bootstrap、滚动估计预测VaR、拟合诊断和蒙特卡罗模拟可视化
R语言GARCH模型对股市sp500收益率bootstrap、滚动估计预测VaR、拟合诊断和蒙特卡罗模拟可视化
|
2月前
|
数据可视化 前端开发 数据挖掘
R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享(上)
R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享
|
27天前
|
移动开发 监控 前端开发
基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
|
2月前
|
前端开发 数据可视化
R语言广义线性混合模型(GLMM)bootstrap预测置信区间可视化
R语言广义线性混合模型(GLMM)bootstrap预测置信区间可视化
|
2月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
|
2月前
|
前端开发 数据可视化 算法
r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享