summernote之用法

一.前言

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器，基于 jQuery 和 Bootstrap 构建，支持快捷键操作，提供大量可定制的选项。

官方文档: https://summernote.org/getting-started/

二.相关API

1.初始化Summernote

$('#summernote').summernote();

2.高度和聚焦

$('#summernote').summernote({height: 300,                 // set editor heightminHeight: null,             // set minimum height of editormaxHeight: null,             // set maximum height of editorfocus: true                  // set focus to editable area after initializing summernote
});

3.销毁Summernote

$('#summernote').summernote('destroy');

4.语言支持

引入js

<script src="static/js/summernote/summernote.js"></script>
<script src="static/js/summernote/summernote-zh-CN.js"></script>

设置语言

$(document).ready(function() {$('#summernote').summernote({lang: 'zh-CN' // default: 'en-US'});
});

5.赋值、取值、置空

赋值

$(".summernote").code(content)

取值

 var content=$(".summernote").code()

置空

$(".summernote").code('')

三.实例

1.示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Summernote</title><link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script><script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script><link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
<div style="width: 60%;margin:20px auto" ><div id="summernote"></div>
</div>
<script>$(document).ready(function() {$('#summernote').summernote({height : '200px',placeholder: 'Hello hello hello ...',lang : 'zh-CN',callbacks: {onImageUpload: function(files, editor, $editable) {sendFile(files);}}});});/*** 编辑器新增的ajax上传图片函数* @param files* @param editor* @param $editable* @returns {boolean}*/function sendFile(files, editor, $editable) {var size = files[0].size;if((size / 1024 / 1024) > 2) {alert("图片大小不能超过2M...");return false;}console.log("size="+size);var formData = new FormData();formData.append("file", files[0]);$.ajax({data : formData,type : "POST",url : "/uploadImg",    // 图片上传出来的url，返回的是图片上传后的路径，http格式cache : false,contentType : false,processData : false,dataType : "json",success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名$('.summernote').summernote('insertImage',"/pic/"+data.stringData);$('#addModal').modal('handleUpdate');},error:function(){alert("上传失败");}});}</script>
</body>
</html>

2.效果图

summernote之用法相关推荐

基于bootstrap的富文本编辑器summernote的用法
初次用到这个工具,在取值这步就掉坑里了,很多文章写的取值是 var content = $('#summernote').summernote('code');我只能说我是半天取不了值,还以为是取到的 ...
基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程基于jQuery的富文本编辑器summernote插件的使用教程一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
summernote富文本中上传图片并保存到Oracle数据库的问题解决
文章目录 Summernote 问题一:Uncaught TypeError: $(...).summernote is not a function 问题二 :GET http://***/summ ...
summernote 字体显示中文
@toc 一.步骤 1.引入summernote-zh-CN.js: <script src="/summernote/lang/summernote-zh-CN.js"&g ...
summernote富文本编辑器
一.文档二.使用四.他山之石一.文档官网地址 https://summernote.org/ github https://github.com/summernote/summernote 选 ...
前端 summernote富文本编辑器点击文章预览的功能实现
一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是: <div class="form-group" ...
Bootstrap 可视化HTML编辑器，summernote
Bootstrap 可视化HTML编辑器之summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",不过在我看来,与bootstrap中 ...
c语言中external，static关键字用法
static用法: 在C中,static主要定义全局静态变量.定义局部静态变量.定义静态函数. 1.定义全局静态变量:在全局变量前面加上关键字static,该全局变量变成了全局静态变量.全局静态变量有 ...
Pandas_transform的用法
先来看一个实例问题. 如下销售数据中展现了三笔订单,每笔订单买了多种商品,求每种商品销售额占该笔订单总金额的比例.例如第一条数据的最终结果为:235.83 / (235.83+232.32+107.9 ...

summernote之用法

一.前言

二.相关API

1.初始化Summernote

2.高度和聚焦

3.销毁Summernote

4.语言支持

5.赋值、取值、置空

三.实例

1.示例代码

2.效果图

summernote之用法相关推荐

最新文章

热门文章