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. 4.（基础）tornado应用安全与认证

    这一节我们介绍应用安全与认证,其实中间省略了一个数据库.对于tornado来说,读取数据库的数据,性能的瓶颈还是在数据库上面.关于数据库,我在<>中介绍了sqlalchemy,这是一个工业 ...

  2. NFS原理

    1.什么是NFS? 全称 network file system 网络文件系统 通过网络存储和组织文件的一种方法或机制. 什么是文件系统? 2.为什么要用共享存储? 前端所有的应用服务器接收到用户上传 ...

  3. 【hiho1035】自驾旅行III

    题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,树边有两个权值,分别为走路的代价和开车的代价.有一个旅行者开车要从根节点出发,必须遍历给定点集,可以在任何位置停止旅行,有车时可以选择开车或 ...

  4. GitHub : Hello World

    这个写的太好啦,让我也没啥可以写的啦:http://www.open-open.com/lib/view/open1454507333214.html

  5. 安装nodejs与使用

    nodejs 官方下载地址:https://nodejs.org/en/ 下载完成后,双击打开安装程序 然后: 然后点击install,等待安装 安装完成后的目录如下: 检测是否真的安装成功.打开cm ...

  6. C++内存泄漏的几种情况

    1. 在类的构造函数和析构函数中没有匹配的调用new和delete函数 两种情况下会出现这种内存泄露:一是在堆里创建了对象占用了内存,但是没有显示地释放对象占用的内存:二是在类的构造函数中动态的分配了 ...

  7. jquery enabled选择器 语法

    jquery enabled选择器 语法 作用::enabled 选择器选取所有启用的表单元素.大理石平台精度等级 语法:$(":enabled") jquery enabled选 ...

  8. ASE高级软件工程 第一周博客作业

    1.自我介绍 我叫姚顺,是来自哈尔滨工业大学计算机学院的一名大四本科生,专业方向计算机科学,目前在KC组实习.平时的业余时间主要用来打篮球,听音乐,跑步,当然还有游戏(划掉).之前的大学三年主要用来做 ...

  9. 51nod 1402 最大值（贪心）

    原题链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1402 思路:借鉴了这篇博文http://blog.csdn.n ...

  10. wx.setStorage、wx.getStorage和wx.getStorageSync

    Page({ data: { testnum:""//设置测试参数 }, test:function(){ var Num = this.data.testnum; wx.setS ...