富文本编辑器01---summernote

最新推荐文章于 2024-09-13 22:00:13 发布

于光yuguang

最新推荐文章于 2024-09-13 22:00:13 发布

阅读量682

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/xixiyuguang/article/details/104791983

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、网站地址

官网地址：https://summernote.org

github地址：https://github.com/summernote/summernote

2、下载发行版本包

下载地址：https://github.com/summernote/summernote/releases

3、实际应用

3.1、目录结构

3.2、index.html中内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Summernote</title>

  <!-- jquery要放前面 ,因为bootstrap需要-->
  <script src="jquery/jquery-3.4.1.min.js"></script>

  <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>


  <link href="summernote-0.8.16-dist/summernote.min.css" rel="stylesheet">
  <script src="summernote-0.8.16-dist/summernote.min.js"></script>

  <!-- include summernote-ko-KR -->
  <script src="summernote-0.8.16-dist/lang/summernote-zh-CN.js"></script>
</head>

<body>
  <button id="edit">编辑</button>
  <button id="save">保存</button>
  <button id="reset">重置</button>

  <button id="getContent">带过来参数</button>

  <form method="post">
    <textarea id="summernote" name="editordata"><p>Hello Summernote</p></textarea>
  </form>

  <script>

    //初始化
    $('#summernote').summernote({
      lang: 'zh-CN',                 // default: 'en-US' 
      height: 300,                 // set editor height
      minHeight: null,             // set minimum height of editor
      maxHeight: null,             // set maximum height of editor
      focus: true                  // set focus to editable area after initializing summernote
    });

    //保存数据
    $("#save").click(function () {
      console.log("save");
      var markupStr = $('#summernote').summernote('code');
      console.log(markupStr);

      //ajax上传代码,我这里接口是post请求，json数据
      let params = {
        "contentDetail": markupStr,
        "sortNum": 0,
        "title": "这个是test"
      }
      $.ajax({
        type: 'post',
        url: "http://xxx", //上传文件的请求路径
        data: JSON.stringify(params),
        cache: false,
        processData: false,
        contentType: 'application/json; charset=utf-8'
      }).success(function (data) {
        console.log(data)
        if (data) {
          alert("成功: ")
        } else {
          alert("失败")
        }

      }).error(function () {
        alert("上传失败");
      });
    });

    //清空数据
    $("#reset").click(function () {
      console.log("reset");
      $('#summernote').summernote('code', "");
    });


    $("#getContent").click(function () {
      console.log("getContent");
      //这适合从后台带过来数据
      var markupStr = 'hello world';
      $('#summernote').summernote('code', markupStr);

    });


  </script>


</body>

</html>