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. margin 负边距 的知识点

    本文介绍了css负边距在普通文档流中的作用和效果.左和右的css负边距对元素宽度的影响.css负边距对浮动元素的影响.css负边距对绝对定位元素的影响.懒人建站偶然浏览到这篇文章,感觉非常好,于是分享 ...

  2. 关于客户端连接mysql的授权问题

    mysql远程连接 Host * is not allowed to connect to this MySQL server的错误. 是因为mysql需要授权才能访问.授权方式: 授权给某一个ip: ...

  3. 二进制数组-ArrayBuffer对象

    ArrayBuffer对象:存储二进制数据的一段内存,不能写/读 ,类似数组的对象 只能通过TypedArray视图/DataView视图 读/写 va buf = new ArrayBuffer(3 ...

  4. Acwing-100-IncDec序列(差分)

    链接: https://www.acwing.com/problem/content/102/ 题意: 给定一个长度为 n 的数列 a1,a2,-,an,每次可以选择一个区间 [l,r],使下标在这个 ...

  5. buuctf@ciscn_2019_en_2

    from pwn import * context.log_level='debug' io=process('./ciscn_2019_en_2') libc=ELF('./libc.so') el ...

  6. C# AVI Image 转换

    AVI视频库 http://download.csdn.net/download/qc_id_01/9970151 Avi视频文件的编码有很多,这个库只支持部分Avi文件,有些Avi文件不支持,具体哪 ...

  7. C语言 - strcpy和strncpy的编程实现及总结

    一.字符串的strcpy与strncpy函数 1.编程实现strcpy函数(笔试很容易考到) 要求: 原型:char *stpcpy(char *strDest,char *strSrc); 头文件: ...

  8. C++常用string函数

    来自https://www.cnblogs.com/jm-Xu/p/9318705.html string(s小写)是C++标准库中的类,纯C中没有,使用时需要包含头文件#include<str ...

  9. CodeForces 1245D Shichikuji and Power Grid

    cf题面 解题思路 比赛过程中想了一个贪心--把所有城市按照自建代价排序,排在第一的城市肯定自建,之后依次判断排在后面的城市要自建还是要连接前面的.这么做WA13了(第一次忘开long longWA4 ...

  10. props 父组件给子组件传递参数

    话不多说,直接上代码 父组件: <span><humidity-component ref="soilHumidityBot" :title='title2'&g ...