summernote-详细使用

最新推荐文章于 2023-04-11 10:51:17 发布
最新推荐文章于 2023-04-11 10:51:17 发布
阅读量1.6w 收藏 10
点赞数 3
分类专栏： 项目经验 文章标签： summernote 富文本编辑器

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);

});

EllisonPei
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
summernote-save-button:在表单中使用 Summenote 时添加保存按钮
05-31
summernote 保存按钮 所见即所得编辑器的插件。 向工具栏添加一个按钮，允许在将 Summernote 放置在表单中时保存编辑的内容。 包括对数据进行编码的选项（由您来解码数据服务器端）。 安装 1.包含JS 在 Summernote 之后包含以下代码： < script src =" summernote-save-button.js " > </ script > < script src =" lang/[language-COUNTRY].js " > </ script > 2. 支持的语言 支持的语言可以在lang文件夹中找到，并且应该包含在插件之后，然后在初始化 Summernote 时设置选择的语言。 3. Summernote 选项 这是页面中直接使用的 HTML： < form id =" summernote " method =" post "
summernote-master.zip
02-04
前端页面文本编辑器控件
summernote-image-attributes:用于编辑图像属性的 Summernote 插件
08-03
summernote-图像-属性 Summernote-image-attributes 进行了改造，我们重新设计了对话框布局以使其更易于使用。 新类已提交到 Summernote 主存储库，请务必获取最新的 master 并为类样式添加构建它。 所见即所得编辑器的插件。 向图像弹出窗口添加一个按钮以编辑标题、alt、类和样式属性，以及具有相关属性的链接。 安装 1.包含JS 在包含 Summernote 之后包含以下代码，要更改默认语言（en-US），您必须在插件之后添加 lang 文件。 < script src =" summernote-image-attributes.js " > </ script > < script src =" lang/[language-COUNTRY].js " > </ script > 2. 支持的语言 目前提供美国英语（默认）、西班
富文本编辑器插件summernote.js特效代码
03-20
富文本编辑器插件summernote.js是一款基于jQuery+Bootstarp实现的网页文本编辑器特效。
summernote-image-title:Summernote插件可编辑图像标题和alt属性
05-01
summernote图像标题 所见即所得编辑器的插件。 在图像弹出框上添加一个按钮，以编辑标题和alt属性。 安装 1.包含JS 该插件可在NPM或Bower上使用： npm install summernote-image-title --save bower install summernote-image-title --save 在Summernote之后添加以下代码： < script src =" summernote-image-title.js " > </ script > 2.支持的语言 当前可用于： 英语 法语 韩语（感谢和 ） 葡萄牙语（由于 ） 西班牙语（感谢Cristian） Català（感谢Cristian） 德语（由于 ） 俄语（由于 ） 荷兰语（感谢 ） 泰语（感谢 ） 日语（感谢@cmonos ） 繁体中文（感谢@ SuYi
summernote 在线编辑器
01-13
很好用的在线编辑器，类似与百度编辑器ueditor ,很好用的奥，附带例子，很全，很详细的，希望在网站开发中对你们有所帮助
summernote使用手册
qq_40572200的博客
09-23 1038
原文链接：https://bbs.csdn.net/topics/600102029
Summernote使用入门
极客神殿
10-02 2486
Create.cshtml @model SN.Models.ProductModel @{ ViewBag.Title = "产品立项"; Layout = "../Shared/_LayoutAdminLTE.cshtml"; } <head> <!--summernote--> <link href="~/Content/summernote/summernote.css" rel="stylesheet" /> <
富文本编辑器summernote的使用
zhiwenganyong的博客
04-29 8434
summernote是一款轻巧、友好、易于集成、使用方便的富文本编辑器，,基于jQuery和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。
summernote富文本编辑器的基本使用
热门推荐
小七的博客
07-20 3万+
summernote富文本编辑器的基本使用（一） 本文主要是跟官网的一些翻译，也锻炼下英语水平。原英文网址http://summernote.org/getting-started/ 基础API 初始化 summernote $('#summernote').summernote(); 初始化并配置summernote 高度和焦点设置 如果对summernote设置了focus项，在...
summernote-0.8.9 富文本插件
06-13
bootstrap 富文本插件summernote-0.8.9包，可用于bootstrap框架的富文本编辑
summernote.min.js
12-27
有需要的快下啊，我在工作中使用了该插件，有什么问题可以联系我哟。
富文本编辑器插件summernote.js.zip
07-04
富文本编辑器插件summernote.js是一款基于jQuery Bootstarp实现的网页文本编辑器特效。
富文本summernote.js 图片居中
09-26
本身不具有图片居中显示，修改js之后使得图片可以居中显示
summernote富文本编辑器基本使用
冲出仁川，走出马德里，故事还会再继续
04-08 1422
summernote富文本编辑器的基本使用一、简介二、下载：三、基本使用：1、引入js/css2、建立一个div3、用 js初始化操作4、上传图片的Controller5、过去编辑器内容的代码:6、为编辑器赋值的方法：7、效果展示：四、总结 一、简介 Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。 二、下载： 官网下载地址：https://github.com/summernote/summe
summernote的用法扩展
xu2034029667的博客
09-09 621
<script> function addFile_btn() { var file = $("#onefile")[0].files[0],size = file.size; if (file == null) {swal({ text: '还未选择任何文件', button: false, icon: 'warning', timer: 1...
Django集成富文本编辑器summernote教程
大江狗
05-26 1381
提到Django的富文本编辑器，大家一定会想到ckeditor和tinyMCE。其实还是有一个富文本编辑器同样优秀，它就是summernote，个人认为功能上不逊于ckeditor，比ti...
textarea带格式保存输入的数据
weixin_45355769的博客
04-11 541
记录一下，在textarea带格式保存输入的数据。
vue3使用summernote
最新发布
10-22
根据提供的引用内容，可以得知summernote是一个富文本编辑器，而Vue.js是一个流行的JavaScript框架。在Vue.js中使用summernote需要先安装summernote和vue-summernote插件。安装完成后，可以在Vue组件中引入summernote，并使用v-model指令将summernote的内容绑定到Vue组件的数据中。具体实现可以参考以下步骤： 1. 在Vue项目中安装summernote和vue-summernote插件。 2. 在Vue组件中引入summernote和vue-summernote插件。 3. 在Vue组件的template中添加summernote的DOM元素，并使用v-model指令将summernote的内容绑定到Vue组件的数据中。 4. 在Vue组件的script中添加summernote的初始化代码，并设置summernote的配置项。 5. 在Vue组件的style中添加summernote的样式。 下面是一个简单的示例代码： ``` <template> <div> <div id="summernote" v-model="content"></div> </div> </template> <script> import 'summernote/dist/summernote-bs4.css'; import 'summernote/dist/summernote-bs4.min.js'; import 'vue-summernote/dist/vue-summernote.css'; import VueSummernote from 'vue-summernote'; export default { components: { VueSummernote, }, data() { return { content: '', }; }, mounted() { $('#summernote').summernote({ height: 300, callbacks: { onChange: (contents) => { this.content = contents; }, }, }); }, }; </script> <style> .note-editor { border: 1px solid #ccc; } </style> --相关问题--:

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值