summernote/summernote.html at master · J-JunChen/summernote · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote富文本的图片在服务器上传和删除、emojis的使用</title>

  <!-- 通过cdn添加css和js  -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- 添加jq.js，注意，所有的js必须在jquery.js的后面，因为所有的js都是基于jq -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

  <!-- 添加bootstrap框架的js -->
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

  <!-- 添加summernote的css和js -->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

  <!-- 添加中文包js -->
  <script type="text/javascript" src="./lang/summernote-zh-CN.js"></script>


  <style type="text/css">
    body{
      padding: 100px;

    }
  </style>

</head>
<body>
<h1 style="color: blue;text-align: center;">summernote富文本编辑器</h1>
    <div id="summernote"></div>
    <button id="submit" class="btn btn-info" >提交</button>

</body>

<script type="text/javascript">
    //调用富文本编辑
    $(document).ready(function() {

      var $summernote = $('#summernote').summernote({
        height: 300,
        minHeight: null,
        maxHeight: null,
        focus: true,
        lang: 'zh-CN', //必须先加入summernote-zh-CN.js才能使用
        placeholder: "1、在此输入文字；2、插入图片可保存到服务器；3、通过键盘清除键可删除服务器的图片；4、可添加emojis",


        //调用图片上传
        callbacks: {

            onImageUpload: function (files) {
                sendFile($summernote, files[0]);
            },
          }
    });

    //ajax上传图片
    function sendFile($summernote, file) {

        var formData = new FormData();
        formData.append("file", file);

        $.ajax({
            url: "server.php",//
            data: formData,
            type: 'POST',

            //如果提交data是FormData类型，那么下面三句一定需要加上
            cache: false,
            contentType: false,
            processData: false,


            success: function (data) {
              $('#summernote').summernote('insertImage', data);  //直接插入路径就行，filename可选
              console.log(data);
            },

            error:function(){
              alert("上传图片失败！");
            }
        });
    }

            // Firefox和Chrome早期版本中带有前缀
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

    //下面代码必须在var $summernote = $('#summernote').summernote()构造完才有class = note-editable，否则直接使用会报错
    //
    // 选择目标节点
    var target = document.querySelector('.note-editable');
    // 创建观察者对象
    var observer = new MutationObserver(function(mutations){ //观察对象的回调函数

      console.log(mutations);

      mutations.forEach(function(mutation) //forEach：遍历所有MutationRecord
      {
        console.log(mutation);
        console.log(mutation.type);  //MutationRecord.type
        console.log(mutation.oldValue);  // 注意mutation.type是childList,则不能使用oldValue来获取值
        if(mutation.addedNodes[0]!=null){
          console.log(mutation.addedNodes);
           console.log(mutation.addedNodes[0]);
           console.log(mutation.addedNodes[0].src);
          if(mutation.addedNodes[0].tagName ==  "IMG")
            console.log("成功添加一张img");
       }

         if(mutation.removedNodes[0]!=null)
        {

           console.log(mutation.removedNodes);

           if(mutation.removedNodes[0].tagName ==  "IMG")
           {

              var href = location.href; //当前路径
              console.log(href);

              href = href.substring(0,href.lastIndexOf("/")+1);
              console.log(href);

              var imgSrc =mutation.removedNodes[0].src;
              imgSrc = imgSrc.replace(href,''); //一种分离相对路径很笨的办法

              $.ajax({
                 type: "POST",
                 url: "delete.php",  //同目录下的php文件
                 data:{imgSrc:imgSrc},
                 success: function(msg){ alert(msg); } //请求成功后的回调函数
               });
            }
        }

      });

    });

    // 配置观察选项:
    var config = { attributes: true, childList: true, characterData: true ,subtree:true};

    // 传入目标节点和观察选项
    observer.observe(target, config);


    });


    $("#submit").click(function () {
        var content = $('#summernote').summernote('code');


         $.ajax({
            url: "submit.php",
            data: {content:content},
            type: 'POST',
            success: function (data) {

              alert('写入txt文件成功！');
              //alert(data);
            },

            error:function(){
              alert("提交失败！");
            }
        });

    })


</script>

</html>