Summernote⽂本编辑器⼊门
1、summernote是⼀个界⾯⽐较简洁美观的富⽂本编辑器。
下载回来的⽂件夹是这样的：
插件的核⼼⽂件放在 dist 这个⽂件夹⾥⾯，⽂件夹内有三个起着重要作⽤的⽂件
font⽂件夹：将它放在你项⽬的css ⽂件的⽂件夹内否则会加载不出富⽂本编辑器上⾯的功能图标
另外还有⼀个语⾔的⽂件需要我们导⼊⼀下：
这个⽂件夹⾥⾯有18个国家的语⾔⽂件其中 zh-CN 就是中⽂的语⾔⽂件
总结下来我们需要的⽂件是：（注意⼀点font⽂件夹，将它放在你项⽬的css ⽂件的⽂件夹内否则会加载不出富⽂本编辑器上⾯的功能图标）
3、前端代码实例(使⽤Summernote富⽂本编辑器需要创建⼀个summernote实例)：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Summernote</title>
jquery下载文件插件
6<link rel="stylesheet" href="css/bootstrap.css"  rel="stylesheet">
7<script src="js/jquery.min.js"></script>
8<script src="js/bootstrap.js"></script>
9<link href="css/summernote.css" rel="stylesheet">
10<script src="js/summernote.js"></script>
11<script type="text/javascript" src="js/summernote-zh-CN.js"></script>
12</head>
13<body>
14<div >
15<div id="summernote"></div>
16</div>
17<br /><br /><br /><br /><br /><br /><br /><br /><br />
18<div >
19<button id="btn1">显⽰书写的内容</button><br /><br />
20<div id="html" ></div>
21</div>
22<script>
23    $(document).ready(function() {
24//jquery创建⼀个summernote实例
25        $('#summernote').summernote({
26//功能图标改为中⽂
27              lang: 'zh-CN',
28//预设内容
29              placeholder: '请在此输⼊内容...',
30              height: 300,
31              width:800,
32//回调函数
33              callbacks: {
34//初始化
35                  onInit: function() {
36//init
37                  },
38//焦点
39                  onFocus: function() {
40//focus
41                  },
42//图⽚⽂件上传
43                  onImageUpload: function(files, editor, $editable) {
44                      data = new FormData();
45                      data.append("file", files[0]);
46                    $.ajax({
47                        data : data,
48                        type : "POST",
49                        url : "",
50                        cache : false,
51                        contentType : false,
52                        processData : false,
53                        dataType : "json",
54                        success: function(data) {
word视图分为哪几种
55//[服务器所在⽂件所在⽬录位置]⼀般为"119.23.216.181/RoboBlogs/Upload_File/default_show.png"
python数据科学手册56                            $('#summernote').summernote('insertImage', "[服务器所在⽂件所在⽬录位置]");
57                        },
net网站免费源码
58                        error:function(){
min width59                            alert("上传失败");
60                        }
61                    });
62                  }
63                }
64
65        });
66        $("button#btn1").click(function(){
67var tt=$("#summernote").summernote("code");
68              $("div#html").html(tt);
69              alert(tt);
70        });
71
72    });
73</script>
74</body>
组态王sqlselect语句75</html>
summernote
效果：
4、summernote常⽤属性获取
获取内容：
$("#user-work-content").summernote("code");
通过 summernote 编辑器的元素调⽤summernote 的⽅法，传⼊ code 参数就能获取summernote 的值了。
插⼊内容：
$("#user-work-content").summernote("code",content);
和第⼀个⽅法⼀样，只不过这次调⽤时传⼊了第⼆个参数，这个参数是你要插⼊的数据，可以是字符串或者是从后台获取的数据
判断内容是否为空：
var isEmpty = $("#user-work-content").summernote('isEmpty');
还是调⽤ summernote 的⽅法，不过这次的参数是 'isEmpty' 这个字符串的参数，调⽤时会返回⼀个布尔值，通过这个布尔值可以判断编辑器内容是否为空，true表⽰空，false表⽰⾮空。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。