登录
当前位置： 首页 > 工具软件 > Summernote > 使用案例 >

summernote-详细使用

程毅
2023-12-01

summernote-详细使用

官网网址： http://summernote.org/

初始化 summernote

1

CODE: $("#summernote").summernote();

 高度和焦点设置

1

2

3

4

5

6

CODE:<br>$('#summernote').summernote({

    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

    });

 编辑器销毁

1

CODE： $('#summernote').summernote('destroy');

获取和设置HTML内容

1、获取编辑器内容

1

CODE： var markupStr = $('#summernote').summernote('code')

2、如果初始化了多个编辑器，可以通过jquery的eq方法获取某个编辑器的HTML内容。eg,获取第二个编辑器的。

1

CODE： var markupStr = $('.summernote').eq(1).summernote('code');

3、给指定的编辑器设置HTML内容

1

2

3

4

5

CODE：

 

var markupStr = 'hello world';

 

$('#summernote').summernote('code', markupStr);

isEmpty

返回编辑器中内容是否为空

编辑区域获取焦点时会自动生成

即使并没有实际内容。所以summernote提供了这个方法来判断内容是否真的为空。

 

1

CODE: if ($('#summernote').summernote('isEmpty')) { alert('contents is empty'); }

disable, enable

disable使编辑器处于不可用状态。

1

CODE:　$('#summernote').summernote('disable');

调用enable可以使编辑器从不可以转换到可用状态。

1

$('#summernote').summernote('enable');

onImageUpload

重写图片上传方法

1

2

3

4

5

6

7

8

9

CODE:<br>// onImageUpload callback

$('#summernote').summernote({

  callbacks: {

    onImageUpload: function(files) {

      // upload image to server and create imgNode...

      $summernote.summernote('insertNode', imgNode);

    }

  }

});

PHP-summernote 使用

页面代码：

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

CODE:

 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Summernote</title>

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

 

//这个css和js请到官网进行下载（点击上面的summernote就可以直达官网）

  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">

  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>

 

 

</head>

<body>

<form action="{:U(upload/upload)}"  method="post">

  <div id="summernote"><p>Hello Summernote</p></div>

   <input type="submit" value="提交">

</form>

</body>

</html>

 

 

<script type="text/javascript">

    //调用富文本编辑

    $(document).ready(function() {

        var $summernote = $('#summernote').summernote({

            height: 300,

            minHeight: null,

            maxHeight: null,

            focus: true,

            //调用图片上传

            callbacks: {

                onImageUpload: function (files) {

                    sendFile($summernote, files[0]);

                }

            }

        });

 

        //ajax上传图片

        function sendFile($summernote, file) {

            var formData = new FormData();

            formData.append("file", file);

            $.ajax({

                url: "{:U('Upload/upload_img')}",//路径是你控制器中上传图片的方法，下面controller里面我会写到

                data: formData,

                cache: false,

                contentType: false,

                processData: false,

                type: 'POST',

                success: function (data) {

                    $summernote.summernote('insertImage', data, function ($image) {

                        $image.attr('src', data);

                    });

                }

            });

        }

    });

</script>

 

PHP - 文件上传处理

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

CODE：

 

public function upload_img()

    {

        if ($_FILES) {

            if (!$_FILES['file']['error']) {

                //生成的文件名（时间戳，精确到毫秒）

                list($usec, $sec) = explode(" ", microtime());

                $name = ((float)$usec + (float)$sec) * 1000;

 

                $ext = explode('.', $_FILES['file']['name']);

                $filename = $name . '.' . $ext[1];

                $folder = date("Ymd");

                $targetDir = C('UPLOAD_PICTURE_URL') . $folder;

 

                //如果上传的文件夹不存在，则创建之

                if ($targetDir) {

                    @mkdir($targetDir);

                }

 

                //文件目录

                $targetDir_url = $targetDir . '/article';

 

                //如果上传的文件夹不存在，则创建之

                if ($targetDir_url) {

                    @mkdir($targetDir_url);

                }

 

               //图片上传的具体路径就出来了

                $destination = $targetDir_url . DIRECTORY_SEPARATOR . $filename; //change this directory

                $location = $_FILES["file"]["tmp_name"];

 

                //将图片移动到指定的文件夹****核心代码

                move_uploaded_file($location, $destination);

                echo C('UPLOAD_PICTURE') . $folder . '/article' . DIRECTORY_SEPARATOR . $filename;//change this URL

            } else {

                echo $message = 'Ooops!  Your upload triggered the following error:  ' . $_FILES['file']['error'];

            }

        }

    }

 

 

summernote 编辑内容在前端显示

方法一：　　htmlspecialchars_decode

方法二：　　

1

2

3

4

5

6

7

<textarea type="text"  name="content" id="summernote"></textarea>

<input type="hidden" id="article_content" value="{$post.content}">

 

$(function(){

         var innerhtml = $("#article_content").val();

         $("#summernote").val(innerhtml);

});

 类似资料：

相关阅读

.Net Core使用MongoDB的详细教程Bootstrap table使用方法详细介绍详解使用Maven开发Web应用详细步骤我可以使JUnit更详细吗？详解Python 协程的详细用法使用和例子

相关文章

RequstMappingHandlerMapping的使用细节C++11的std::array的详细剖析Java国际化(i18n) Locale类详细示例美团 后端一面 详细版面经OpenAI 调用API如何收费，详细计算方法

相关问答

如何使用Spring Security 3检索用户详细信息？使用 AWS 弹性豆子进行部署详细信息使用struts2维护会话中的用户详细信息MySQL服务器详细日志IReport-单独打印详细带

相关文档

HAProxy 用法详解Laravel 源码详解Android Animation 动画详解Python 初级教程：入门详解GRUB2 配置文件 grub.cfg 详解 / GRUB2 实战手册
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.