https://futures.yunsonbai.top/?hmsr=yunsonbai.top
贵金属行情

富文本实践

发表于 | 分类于
在html页实现富文本

转载请标注出处: https://yunsonbai.top, 并发送转载通知到yunsonbai@163.com

https://futures.yunsonbai.top/?hmsr=yunsonbai.top

引言

1
前段时间趁着项目不忙自己玩了一下富文本，在html页实现富文本。

使用的js包

1
summernote

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
   <html>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <head>
   <link href="../bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
   <link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet">
   <link href="summernote/dist/summernote.css" rel="stylesheet">
   <script src="../jquery-2.1.4.js"></script>
   <script src="../bootstrap-3.3.5/js/bootstrap.js"></script>
   <script src="summernote/dist/summernote.js"></script>
   <script src="mysummer.js"></script>
   <script src="mysummer.css"></script>
   </head>
   <body>
     <div id="summernote">Hello Summernote</div>
     <span onclick='getContext(this)'>预览</span>
   
     <div id="context"></div>
    
   </body>
   </html>

mysummer.js代码

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
$(document).ready(function() {
  $('#summernote').summernote({
        toolbar: [
            ['style', ['style','fontname', 'bold', 'italic', 'underline','fontsize','color']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link', 'picture', 'table', 'hr']],
            ['height', ['height']],
            ['misc', ['redo','undo','help', 'fullscreen']],
            // ['view', ['codeview']],
      ]
  });
});


function getContext(obj){
     $(document).ready(function(){
          var code = $('#summernote').summernote('code');
          var context = document.getElementById('context');
          context.innerHTML=code;

          var data = {"code":$('#summernote').summernote('code')};
        $.ajax({
            url: '/whatdo/test',
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function(data,status){
                 alert(data.status)
            },
        });

     })
}

mysummer.css代码

1
2
3
4
5
6
$('#summernote').summernote({
 /*  height: 700,*/
   minHeight: null,
   maxHeight: null,
   focus: true
      });

效果图

yunsonbai wechat
公众号:技术and生活