最近接触到的bootstrap真的是很酷炫,对于我这种不会前端的人来说,就是。好,今天我们来学习一下summernote。
直接放出代码大家看下,如何在网页中创建出summernote编辑器。1、在线引用summernote的css和js。2、网页中定义div显示编辑器。3、初始化编辑器。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>//html5的定义,如果不这么定义编辑器格式会有问题
<html>
<head>
<span style="color:#3366FF;"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.bootcss.com/summernote/0.5.1/summernote.css" />
<script src="http://cdn.bootcss.com/summernote/0.5.1/summernote.min.js"></script></span>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<span style="color:#CC6600;"><div class="container">
<div id="summernote">Hello summernote</div>
</div>
<script></span>
<span style="color:#990000;">$(document).ready(function() {
$('#summernote').summernote({
height:300,
focus:true,
maxHeight:null,
minHeight:null,
});
});</span>
</script>
</body>
</html>
效果如图:
为大家转一篇文章:http://blog.geekcome.com/bootstrap-online-text-editor-based-on-the-jquery-plugin-summernote-rpm,里面有更加详细的summernote教程和一些基本方法。