超漂亮的Bootstrap 富文本編輯器summernote
更新時(shí)間：2016年04月05日 11:07:20 作者：沉默王二
Summernote 是一個(gè)簡(jiǎn)單，靈活，所見即所得（WYSIWYG）的編輯器，基于 jQuery 和 Bootstrap 構(gòu)建。對(duì)bootstrap 文本編輯器相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
Summernote 是一個(gè)簡(jiǎn)單，靈活，所見即所得（WYSIWYG）的編輯器，基于 jQuery 和 Bootstrap 構(gòu)建。Summernote 所有主要的操作都支持快捷鍵，有一個(gè)功能強(qiáng)大的 API，它提供了大量的自定義選項(xiàng)的設(shè)計(jì)（寬，高，有效的項(xiàng)目等等）和功能。對(duì)于主要的腳本語(yǔ)言或框架（PHP，Ruby，Django，NodeJS），該項(xiàng)目有提供了集成示例。
Bootstrap summernote，用其官網(wǎng)上的介紹就是“Super Simple WYSIWYG editor”，不過在我看來(lái)，與bootstrap中文官網(wǎng)上提供的“bootstrap-wysiwyg”要更simple，更漂亮，更好用！
雖然我之前嘗試過使用bootstrap-wysiwyg，可參照Bootstrap wysiwyg富文本數(shù)據(jù)如何保存到mysql，但事后諸葛亮的經(jīng)驗(yàn)告訴我，summernote絕對(duì)是更佳的富文本編輯器，這里對(duì)其工作team點(diǎn)三十二個(gè)贊?。。。?！
經(jīng)過一天時(shí)間的探索，對(duì)summernote有所掌握，那么為了更廣大前端愛好者提供便利，我將費(fèi)勁一番心血來(lái)介紹一下summernote，超級(jí)福利啊。
一、官方API和源碼下載
工欲善其事必先利其器，首先把summernote的源碼拿到以及對(duì)應(yīng)官方API告訴大家是首個(gè)任務(wù)！
官網(wǎng)（demo和api）
github源碼下載，注意下載開發(fā)版
二、效果圖
效果圖1
效果圖2
效果圖3
三、開講內(nèi)容
大的方向?yàn)橐韵氯齻€(gè)內(nèi)容：
summernote的頁(yè)面布局（資源引入、初始參數(shù)）
summernote從本地上傳圖片方法（前端onImageUpload方法、后端springMVC文件保存）
summernote所在form表單的數(shù)據(jù)提交
①、summernote的頁(yè)面布局
<!DOCTYPE html>
<html lang="zh-CN">
<%@ include file="/components/common/taglib.jsp"%>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>summernote - bs3fa4</title>
<!-- include jquery -->
<script type="text/javascript" src="${ctx}/components/jquery/jquery.js"></script>
<!-- include libs stylesheets -->
<link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="${ctx}/components/bootstrap/js/bootstrap.min.js"></script>
<!-- include summernote -->
<link type="text/css" rel="stylesheet" href="${ctx}/components/summernote/summernote.css" />
<script type="text/javascript" src="${ctx}/components/summernote/summernote.js"></script>
<script type="text/javascript" src="${ctx}/components/summernote/lang/summernote-zh-CN.js"></script>
<script type="text/javascript">
$('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
callbacks : {
onImageUpload : function(files) {
var $files = $(files);
$files.each(function() {
var file = this;
var data = new FormData();
data.append("file", file);
$.ajax({
data : data,
type : "POST",
url : url,
cache : false,
contentType : false,
processData : false,
success : function(response) {
var json = YUNM.jsonEval(response);
YUNM.debug(json);
YUNM.ajaxDone(json);
if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
// 文件不為空
if (json[YUNM.keys.result]) {
var imageUrl = json[YUNM.keys.result].completeSavePath;
$this.summernote('insertImage', imageUrl, function($image) {
});
}
}
},
error : YUNM.ajaxError
});
});
}
}
});
});
</script>
</head>
<body>
<div class="container">
<form class="form-horizontal required-validate" action="#" enctype="multipart/form-data" method="post" onsubmit="return iframeCallback(this, pageAjaxDone)">
<div class="form-group">
<label for="" class="col-md-2 control-label">項(xiàng)目封面</label>
<div class="col-md-8 tl th">
<input type="file" name="image" class="projectfile" value="${deal.image}"/>
<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超過2.0M</p>
</div>
</div>
<div class="form-group">
<label for="" class="col-md-2 control-label">項(xiàng)目詳情</label>
<div class="col-md-8">
<div class="summernote" name="description" placeholder="請(qǐng)對(duì)項(xiàng)目進(jìn)行詳細(xì)的描述，使更多的人了解你的" action="${ctx}/file">${deal.description}</div>
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>html5的標(biāo)記是必須的，注意千萬(wàn)不能是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這種doctype，否則summernote的組件顯示怪怪的，按鈕的大小布局不一致，這里就不再上圖了，但是千萬(wàn)注意！
bootstrap 的版本號(hào)最好為v3.3.5
1、布局div
<div class="summernote" name="description" placeholder="請(qǐng)對(duì)項(xiàng)目進(jìn)行詳細(xì)的描述，使更多的人了解你的" action="${ctx}/file">${deal.description}</div>
相信你也看到了我為div加上的三個(gè)屬性name、placeholder、action，那么我們來(lái)詳細(xì)介紹一下三個(gè)屬性的作用：
name，為外層form表單提供summernote數(shù)據(jù)保存時(shí)的數(shù)據(jù)模型的屬性名，和input標(biāo)簽的name屬性作用一致，稍候在form提交的時(shí)候具體介紹。
placeholder，很直白，為summernote提供初始狀態(tài)的文本描述，當(dāng)然還需要后續(xù)加工，div顯然是不支持placeholder屬性的。
action，為圖片上傳提供后端接收地址，稍候在介紹圖片上傳onImageUpload會(huì)再次用到。
另外${deal.description}其實(shí)你不需要太多關(guān)注，和textarea的賦值的用法一致，就是單純的顯示保存后的內(nèi)容。
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獲取到頁(yè)面上的summernote，對(duì)其進(jìn)行初始化，我們來(lái)詳細(xì)介紹列出參數(shù)的用法（先不介紹圖片上傳的onImageUpload 方法）。
lang ，指定語(yǔ)言為中文簡(jiǎn)體
placeholder ，summernote初始化顯示的內(nèi)容。
minHeight，最小高度為300，注意這里沒有使用height，是有原因的，這里稍作解釋，就不上圖了。當(dāng)使用height指定高度后，假如上傳比height高的圖片，summernote就不會(huì)自動(dòng)調(diào)整高度，并且前文中“效果圖3”中標(biāo)出的紅色區(qū)域會(huì)不貼著圖片，而溢出到summernote外部。
dialogsFade，增加summernote上彈出窗口滑進(jìn)滑出的動(dòng)態(tài)效果。
dialogsInBody，這個(gè)屬性也很關(guān)鍵，默認(rèn)為false，字面上的意思是summernote的彈出框是否在body中（in嘛），設(shè)置為false時(shí)，dialog的式樣會(huì)繼承其上一級(jí)外部（如上文中的form-horizontal）容器式樣，那么顯示的效果就很別扭，這里也不再上圖；那么設(shè)置為true時(shí)，就不會(huì)繼承上一級(jí)外部div的屬性啦，從屬于body嘛。
disableDragAndDrop，設(shè)置為false吧，有的時(shí)候拖拽會(huì)出點(diǎn)問題，你可實(shí)踐。
②、summernote從本地上傳圖片方法
1、前端onImageUpload方法
假如問度娘如下的話：“onImageUpload方法怎么寫？”，度娘大多會(huì)為你找到如下回答：
$(\'.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>
以上資源來(lái)自于stackoverflow。
但其實(shí)呢，summernote-develop版本的summernote已經(jīng)不支持這種onImageUpload寫法，那么如今的寫法是什么樣子呢？參照summernote的官網(wǎng)例子。
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);
});
那么此時(shí)onImageUpload的具體寫法呢？（后端為springMVC）：
callbacks : {
// onImageUpload的參數(shù)為files，summernote支持選擇多張圖片
onImageUpload : function(files) {
var $files = $(files);
// 通過each方法遍歷每一個(gè)file
$files.each(function() {
var file = this;
// FormData，新的form表單封裝，具體可百度，但其實(shí)用法很簡(jiǎn)單，如下
var data = new FormData();
// 將文件加入到file中，后端可獲得到參數(shù)名為“file”
data.append("file", file);
// ajax上傳
$.ajax({
data : data,
type : "POST",
url : url,// div上的action
cache : false,
contentType : false,
processData : false,
// 成功時(shí)調(diào)用方法，后端返回json數(shù)據(jù)
success : function(response) {
// 封裝的eval方法，可百度
var json = YUNM.jsonEval(response);
// 控制臺(tái)輸出返回?cái)?shù)據(jù)
YUNM.debug(json);
// 封裝方法，主要是顯示錯(cuò)誤提示信息
YUNM.ajaxDone(json);
// 狀態(tài)ok時(shí)
if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
// 文件不為空
if (json[YUNM.keys.result]) {
// 獲取后臺(tái)數(shù)據(jù)保存的圖片完整路徑
var imageUrl = json[YUNM.keys.result].completeSavePath;
// 插入到summernote
$this.summernote('insertImage', imageUrl, function($image) {
// todo，后續(xù)可以對(duì)image對(duì)象增加新的css式樣等等，這里默認(rèn)
});
}
}
},
// ajax請(qǐng)求失敗時(shí)處理
error : YUNM.ajaxError
});
});
}
}
注釋當(dāng)中加的很詳細(xì)，這里把其他關(guān)聯(lián)的代碼一并貼出，僅供參照。
debug : function(msg) {
if (this._set.debug) {
if (typeof (console) != "undefined")
console.log(msg);
else
alert(msg);
}
},
jsonEval : function(data) {
try {
if ($.type(data) == 'string')
return eval('(' + data + ')');
else
return data;
} catch (e) {
return {};
}
},
ajaxError : function(xhr, ajaxOptions, thrownError) {
if (xhr.responseText) {
$.showErr("<div>" + xhr.responseText + "</div>");
} else {
$.showErr("<div>Http status: " + xhr.status + " " + xhr.statusText + "</div>" + "<div>ajaxOptions: " + ajaxOptions + "</div>"
+ "<div>thrownError: " + thrownError + "</div>");
}
},
ajaxDone : function(json) {
if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
if (json[YUNM.keys.message]) {
YUNM.debug(json[YUNM.keys.message]);
$.showErr(json[YUNM.keys.message]);
}
} else if (json[YUNM.keys.statusCode] == YUNM.statusCode.timeout) {
YUNM.debug(json[YUNM.keys.message]);
$.showErr(json[YUNM.keys.message] || YUNM.msg("sessionTimout"), YUNM.loadLogin);
}
},
2、后端springMVC文件保存
2.1、為springMVC增加文件的配置
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="UTF-8"> <property name="maxUploadSize" value="1024000000"></property> </bean> <mvc:annotation-driven conversion-service="conversionService" /> <bean id="conversionService" class="org.springframework.format.support.FormattingConversionServiceFactoryBean"> <property name="converters"> <list> <!-- 這里使用string to date可以將dao在jsp到controller轉(zhuǎn)換的時(shí)候直接將string格式的日期轉(zhuǎn)換為date類型 --> <bean class="com.honzh.common.plugin.StringToDateConverter" /> <!-- 為type為file類型的數(shù)據(jù)模型增加轉(zhuǎn)換器 --> <bean class="com.honzh.common.plugin.CommonsMultipartFileToString" /> </list> </property> </bean>
這里就不做過多介紹了，可參照我之前寫的SpringMVC之context-dispatcher.xml，了解基本的控制器
2.2、FileController.java
package com.honzh.spring.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.honzh.common.base.UploadFile;
import com.honzh.spring.service.FileService;
@Controller
@RequestMapping(value = "/file")
public class FileController extends BaseController {
private static Logger logger = Logger.getLogger(FileController.class);
@Autowired
private FileService fileService;
@RequestMapping("")
public void index(HttpServletRequest request, HttpServletResponse response) {
logger.debug("獲取上傳文件...");
try {
UploadFile uploadFiles = fileService.saveFile(request);
renderJsonDone(response, uploadFiles);
} catch (Exception e) {
logger.error(e.getMessage());
logger.error(e.getMessage(), e);
renderJsonError(response, "文件上傳失敗");
}
}
}
2.3、FileService.java
package com.honzh.spring.service;
import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FileUtils;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import com.honzh.common.Variables;
import com.honzh.common.base.UploadFile;
import com.honzh.common.util.DateUtil;
@Service
public class FileService {
private static Logger logger = Logger.getLogger(FileService.class);
public UploadFile saveFile(HttpServletRequest request) throws IOException {
logger.debug("獲取上傳文件...");
// 轉(zhuǎn)換為文件類型的request
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 獲取對(duì)應(yīng)file對(duì)象
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
Iterator<String> fileIterator = multipartRequest.getFileNames();
// 獲取項(xiàng)目的相對(duì)路徑（http://localhost:8080/file）
String requestURL = request.getRequestURL().toString();
String prePath = requestURL.substring(0, requestURL.indexOf(Variables.ctx));
while (fileIterator.hasNext()) {
String fileKey = fileIterator.next();
logger.debug("文件名為：" + fileKey);
// 獲取對(duì)應(yīng)文件
MultipartFile multipartFile = fileMap.get(fileKey);
if (multipartFile.getSize() != 0L) {
validateImage(multipartFile);
// 調(diào)用saveImage方法保存
UploadFile file = saveImage(multipartFile);
file.setPrePath(prePath);
return file;
}
}
return null;
}
private UploadFile saveImage(MultipartFile image) throws IOException {
String originalFilename = image.getOriginalFilename();
logger.debug("文件原始名稱為:" + originalFilename);
String contentType = image.getContentType();
String type = contentType.substring(contentType.indexOf("/") + 1);
String fileName = DateUtil.getCurrentMillStr() + new Random().nextInt(100) + "." + type;
// 封裝了一個(gè)簡(jiǎn)單的file對(duì)象，增加了幾個(gè)屬性
UploadFile file = new UploadFile(Variables.save_directory, fileName);
file.setContentType(contentType);
logger.debug("文件保存路徑：" + file.getSaveDirectory());
// 通過org.apache.commons.io.FileUtils的writeByteArrayToFile對(duì)圖片進(jìn)行保存
FileUtils.writeByteArrayToFile(file.getFile(), image.getBytes());
return file;
}
private void validateImage(MultipartFile image) {
}
}
2.4、UploadFile.java
package com.honzh.common.base;
import java.io.File;
import com.honzh.common.Variables;
public class UploadFile {
private String saveDirectory;
private String fileName;
private String contentType;
private String prePath;
private String completeSavePath;
private String relativeSavePath;
public UploadFile(String saveDirectory, String filesystemName) {
this.saveDirectory = saveDirectory;
this.fileName = filesystemName;
}
public String getFileName() {
return fileName;
}
public String getSaveDirectory() {
return saveDirectory;
}
public String getContentType() {
return contentType;
}
public void setContentType(String contentType) {
this.contentType = contentType;
}
public String getPrePath() {
if (prePath == null) {
return "";
}
return prePath;
}
public void setPrePath(String prePath) {
this.prePath = prePath;
setCompleteSavePath(prePath + getRelativeSavePath());
}
public String getCompleteSavePath() {
return completeSavePath;
}
public void setCompleteSavePath(String completeSavePath) {
this.completeSavePath = completeSavePath;
}
public String getRelativeSavePath() {
return relativeSavePath;
}
public void setRelativeSavePath(String relativeSavePath) {
this.relativeSavePath = relativeSavePath;
}
public void setSaveDirectory(String saveDirectory) {
this.saveDirectory = saveDirectory;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public File getFile() {
if (getSaveDirectory() == null || getFileName() == null) {
return null;
} else {
setRelativeSavePath(Variables.ctx + "/" + Variables.upload + "/" + getFileName());
return new File(getSaveDirectory() + "/" + getFileName());
}
}
}
后端文件保存方法也非常簡(jiǎn)單，懂java的同學(xué)都可以看得懂，那么對(duì)于后端不使用springmvc的同學(xué)，你可以再找找方法。
辛苦的介紹完前兩節(jié)后，我們來(lái)一個(gè)動(dòng)態(tài)圖看一下效果吧！
③. summernote所在form表單的數(shù)據(jù)提交
這里，我們?cè)倩仡櫼幌聅ummernote所在的form表單，其中還包含了一個(gè)普通file的input標(biāo)簽，也就是說(shuō)，該form還需要上傳一張項(xiàng)目封面。
<form class="form-horizontal required-validate" action="#" enctype="multipart/form-data" method="post" onsubmit="return iframeCallback(this, pageAjaxDone)">
先看一下form的屬性：
enctype：”multipart/form-data”，表明為文件類型的form保存
iframeCallback方法，稍候詳細(xì)介紹，主要是對(duì)有文件上傳的form表單進(jìn)行封裝。
1、iframeCallback
function iframeCallback(form, callback) {
YUNM.debug("帶文件上傳處理");
var $form = $(form), $iframe = $("#callbackframe");
var data = $form.data('bootstrapValidator');
if (data) {
if (!data.isValid()) {
return false;
}
}
// 富文本編輯器
$("div.summernote", $form).each(function() {
var $this = $(this);
if (!$this.summernote('isEmpty')) {
var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='" + $this.summernote('code') + "' />";
$form.append(editor);
} else {
$.showErr("請(qǐng)?zhí)顚戫?xiàng)目詳情");
return false;
}
});
if ($iframe.size() == 0) {
$iframe = $("<iframe id='callbackframe' name='callbackframe' src='about:blank' style='display:none'></iframe>").appendTo("body");
}
if (!form.ajax) {
$form.append('<input type="hidden" name="ajax" value="1" />');
}
form.target = "callbackframe";
_iframeResponse($iframe[0], callback || YUNM.ajaxDone);
}
function _iframeResponse(iframe, callback) {
var $iframe = $(iframe), $document = $(document);
$document.trigger("ajaxStart");
$iframe.bind("load", function(event) {
$iframe.unbind("load");
$document.trigger("ajaxStop");
if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For
// Safari
iframe.src == "javascript:'<html></html>';") { // For FF, IE
return;
}
var doc = iframe.contentDocument || iframe.document;
// fixing Opera 9.26,10.00
if (doc.readyState && doc.readyState != 'complete')
return;
// fixing Opera 9.64
if (doc.body && doc.body.innerHTML == "false")
return;
var response;
if (doc.XMLDocument) {
// response is a xml document Internet Explorer property
response = doc.XMLDocument;
} else if (doc.body) {
try {
response = $iframe.contents().find("body").text();
response = jQuery.parseJSON(response);
} catch (e) { // response is html document or plain text
response = doc.body.innerHTML;
}
} else {
// response is a xml document
response = doc;
}
callback(response);
});
}
貼上全部代碼以供參考，但是這里我們只講以下部分：
// 富文本編輯器
$("div.summernote", $form).each(function() {
var $this = $(this);
if (!$this.summernote('isEmpty')) {
var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='" + $this.summernote('code') + "' />";
$form.append(editor);
} else {
$.showErr("請(qǐng)?zhí)顚戫?xiàng)目詳情");
return false;
}
});
通過form獲取到summernote對(duì)象$this 后，通過!$this.summernote('isEmpty')來(lái)判斷用戶是否對(duì)富文本編輯器有內(nèi)容上的填寫，保證不為空，為空時(shí)，就彈出提示信息。
$this.summernote('code')可獲得summernote編輯器的html內(nèi)容，將其封裝到input對(duì)象中，name為前文中div提供的name，供后端使用。
這里其他地方就不做多解釋了，詳細(xì)可參照Bootstrap wysiwyg富文本數(shù)據(jù)如何保存到mysql。
保存到數(shù)據(jù)庫(kù)中是什么樣子呢？
<p><img src="http://localhost:8080/ymeng/upload/2016033117093076.jpeg" style=""></p><p><br></p><p>你好，有興趣可以加入到沉默王二的群啊<br></p>
頁(yè)面效果為：
好了，好了，終于寫完了，沒想到寫的這么累，如果你有什么新鮮的玩意，也可以聯(lián)系我啊，歡迎你的指導(dǎo)！
關(guān)于Bootstrap 富文本編輯器summernote小編就給大家介紹到這里，希望對(duì)大家有所幫助！有不同見解歡迎提出寶貴意見，共同學(xué)習(xí)進(jìn)步！
相關(guān)文章
下面小編就為大家?guī)?lái)一篇JavaScript 函數(shù)的執(zhí)行過程。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-05
JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置
這篇文章主要介紹了JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
如何利用ES6進(jìn)行Promise封裝總結(jié)
這篇文章主要介紹了如何利用ES6進(jìn)行Promise封裝總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了新手快速上手webpack4打包工具的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-01-01
純javascript前端實(shí)現(xiàn)base64圖片下載(兼容IE10+)
這篇文章主要介紹了純javascript前端實(shí)現(xiàn)base64圖片下載(兼容IE10+)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2023-02-02
點(diǎn)擊頁(yè)面任何位置隱藏div的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇點(diǎn)擊頁(yè)面任何位置隱藏div的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-09-09
這篇文章主要介紹了ES6中l(wèi)et 和 const 的新特性，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
既然說(shuō)到了JavaScript,那么就會(huì)繞不過去執(zhí)行上下文,只有理解了執(zhí)行上下文才能更好的理解JavaScript本身,不過本部分不是專門講解?JavaScript的,主要從JavaScript的執(zhí)行順序開始介紹一下JavaScript是怎樣運(yùn)行的2023-09-09
這篇文章主要介紹了原生Js實(shí)現(xiàn)的畫廊功能，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-05-05