1、summernote是一个界面比较简洁美观的富文本编辑器。

2、文件导入（官方下载地址：http://summernote.org/）

下载回来的文件夹是这样的：

插件的核心文件放在 dist 这个文件夹里面，文件夹内有三个起着重要作用的文件

font文件夹： 将它放在你项目的css 文件的文件夹内否则会加载不出富文本编辑器上面的功能图标

另外还有一个语言的文件需要我们导入一下：

这个文件夹里面有18个国家的语言文件 其中 zh-CN 就是中文的语言文件

总结下来我们需要的文件是：（注意一点font文件夹，将它放在你项目的css 文件的文件夹内否则会加载不出富文本编辑器上面的功能图标）

3、 前端代码实例(使用Summernote富文本编辑器需要创建一个summernote实例)：

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Summernote</title>

   <link rel="stylesheet" href="css/bootstrap.css"  rel="stylesheet">

   <script src="js/jquery.min.js"></script>

   <script src="js/bootstrap.js"></script>

   <link href="css/summernote.css" rel="stylesheet">

   <script src="js/summernote.js"></script>

   <script type="text/javascript" src="js/summernote-zh-CN.js" ></script>

 </head>

 <body>

     <div style="margin-left: 20%;width: 500px;height: 200px;">

        <div id="summernote"></div>

     </div>

     <br /><br /><br /><br /><br /><br /><br /><br /><br />

     <div style="margin-left: 20%;width: 800px;height: 400px;">

        <button id="btn1">显示书写的内容</button><br /><br />

        <div id="html" style="width: 800px;height: 300px;background-color: lavender;border: 1px solid;"></div>

     </div>

   <script>

     $(document).ready(function() {

         //jquery创建一个summernote实例

         $('#summernote').summernote({

              //功能图标改为中文

              lang: 'zh-CN',

              //预设内容

              placeholder: '请在此输入内容...',

              height: 300,

              width:800,

              //回调函数

              callbacks: {

                    //初始化

                   onInit: function() {

                       //init

                   },

                   //焦点

                   onFocus: function() {

                       //focus

                   },

                   //图片文件上传

                   onImageUpload: function(files, editor, $editable) {

                       data = new FormData();

                       data.append("file", files[0]);

                     $.ajax({

                         data : data,

                         type : "POST",

                         url : "",

                         cache : false,

                         contentType : false,

                         processData : false,

                         dataType : "json",

                         success: function(data) {

                             //[服务器所在文件所在目录位置]一般为"http://119.23.216.181/RoboBlogs/Upload_File/default_show.png"

                             $('#summernote').summernote('insertImage', "[服务器所在文件所在目录位置]");

                         },

                         error:function(){

                             alert("上传失败");

                         }

                     });

                   }

                 }

         });

         $("button#btn1").click(function(){

              var tt=$("#summernote").summernote("code");

              $("div#html").html(tt);

              alert(tt);

         });

     });

   </script>

 </body>

 </html>

summernote

效果：

4、summernote常用属性获取

获取内容：

$("#user-work-content").summernote("code");

通过 summernote 编辑器的元素调用summernote 的方法，传入 code 参数就能获取summernote 的值了。

插入内容：

$("#user-work-content").summernote("code",content);

和第一个方法一样，只不过这次调用时传入了第二个参数，这个参数是你要插入的数据，可以是字符串或者是从后台获取的数据

判断内容是否为空：

var isEmpty = $("#user-work-content").summernote('isEmpty');

还是调用 summernote 的方法，不过这次的参数是 'isEmpty' 这个字符串的参数，调用时会返回一个布尔值，通过这个布尔值可以判断编辑器内容是否为空，true表示空，false表示非空。

Summernote文本编辑器入门的更多相关文章

  1. summernote 文本编辑器使用时,选择上传图片、链接、录像时,弹出的对话框被遮挡住

    更多内容推荐微信公众号,欢迎关注: 即问题如下链接内的情况: http://bbs.csdn.net/topics/392004332 这个一般属于CSS中样式出现了问题,可以在点开的时候,F12查看 ...

  2. Linux下的Vim文本编辑器(入门)

    引言 vim filename:打开名为filename的文件,如果不存在就会创建一个filename文件 Vim的三种使用模式 1. 命令模式 启动Vim时,就进入了命令模式 在该模式下: i:切换 ...

  3. 超好用的富文本编辑器Summernote的使用

    官网地址 中文文档 源码下载地址 Summernote依赖于jquery和bootstrap3/4   所以用时记得引入这俩依赖 奉上引入方法(官网说的很清楚,api也很详细): <!-- in ...

  4. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  5. Summernote – 基于 Bootstrap 的文本编辑器

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 AP ...

  6. 无废话ExtJs 入门教程十四[文本编辑器：Editor]

    无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...

  7. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  8. SummerNote 富文本编辑器 - Rails 集成

    使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...

  9. summernote富文本编辑器

    下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...

随机推荐

  1. 第十篇.5、python并发编程之协程

    一 引子 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去 ...

  2. awk处理实记

    经grep日志后得到的数据格式如下: } . [debug][-- ::] SendDataStyled:{ , "innings" : "6189269620_0007 ...

  3. Liunx 用户权限之目录

    总结一下: 今天又对liunx权限的认知多了一点,就是关于目录的权限的作用 可以打个比方来形容就是:相当于一个大门 只有目录权限都有的情况下,才能够对目录中的文件进行目录权限操作 例如:drwxrwx ...

  4. pytest重复执行

    安装 pip install pytest-repeat 命令: pytest --count=10 test_file.py

  5. Mongodb索引和执行计划 hint 慢查询

    查询索引 索引存放在system.indexes集合中 > show tables address data person system.indexes 默认会为所有的ID建上索引 而且无法删除 ...

  6. docker查看容器IP地址

    docker inspect 容器名称或 id 命令:docker inspect redismaster 结果:

  7. package+explorer不显示项目的问题

    昨天遇到了这个问题,百度了一下,怎么搞的都有,但是感觉都不理想,晚上的时候才在网上又发现这个方法,今天试了一下,效果还不错,分享一下. 点击 Window ---> Close All Pers ...

  8. nginx防止跳转到内网解决

    proxy_redirect http://test.abc.com:9080/ /;

  9. 乱花渐入迷人眼------从解决jqueryEasyUI上传插件提交ajax请求谈网页调试

    由于要给格斗男神写搏击俱乐部ERP系统,就要用到jquery Easyui插件规范数据和表单的录入,其中一项功能就是上传商品图片, 而且是在datagrid-detailview中使用filebox完 ...

  10. 后端返回图片的url,将其转成base64,再次进行上传

      //将图片变成base64再上传(主要是转化来自客户端的图片)  getUrlBase64=(url, ext)=> {     var canvas = document.createEl ...