富文本summernote

Summernote

前言

爱各种知识的博主对富文本挺感兴趣的，就对富文本编辑器都看了下，学习了下，不咋样，可以用吧，hhh，现将学习的第一个富文本编辑器summernote献上！

贴代码

<!DOCTYPE html>
<html lang="en">
      <head>
            <meta charset="UTF-8">
            <title>Summernote</title>
            <!--引入需要的css文件-->
            <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
            <link rel="stylesheet" type="text/css" href="css/summernote.css"/>
            <!--引入需要的js文件-->
            <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/summernote.js" type="text/javascript" charset="utf-8"></script>
            <script src="lang/summernote-zh-CN.js" type="text/javascript" charset="utf-8"></script>
      </head>
      <body>
            <!--预备富文本1-->
            <div id="summernote"></div>
            <!--预备富文本2-->
            <div id="reply"></div>
            <!--各种点击事件的按钮-->
            <button id="save">获取</button>
            <button id="addContent">添加内容/编辑</button>
            <button id="showRichtext">点击显示富文本框</button>
            <button id="dialog_fide">编辑</button>
            <!--预备被动态显示内容的块儿-->
            <div id="content"></div>
            <script type="text/javascript">
                  /***对富文本中的内容提取过滤并操作 */
                  $("#reply").summernote({
                        width : 500 ,  //宽度
                        height: 100,  //高度
                        toolbar: false,  //工具栏不显示
                        placeholder: '可以@人...' , //无内容输入时显示的文本
                        minHeight : 100 ,  //可拉伸最小高度
                        maxHeight : 100,  //可拉伸最大高度
                        hint: {  //输入内容时的监听
                              mentions: ['jayden', 'sam', 'alvin', 'david'],  //验证的词库
                              match: /\B@(\w*)$/,  //匹配的目标
                              search: function(keyword, callback) { //目标被匹配到了时的回调
                                    callback($.grep(this.mentions, function(item) {
                                          return item.indexOf(keyword) == 0;
                                    }));
                              },
                              content: function(item) {  //返回的内容
                                    return '@' + item;
                              }
                        }
                  });
                  /*** 得到富文本当中的内容*/
                  $("#save").click(function() {
                        var markupStr = $('#summernote').summernote('code');
                        alert("获取富文本中的内容：" + markupStr);
                        /*在下方div=content当中显示输入的内容*/
                        $("#content").html(markupStr);
                  });
                  /*** 向富文本当中添加内容 * */
                  $("#addContent").click(function() {
                        var markupStr = '向富文本中添加内容';
                        $('#summernote').summernote('code', markupStr);
                  });
                  /***点击显示富文本框，需要 将上面富文本初始化代码注释掉*/
                  $("#showRichtext").click(function() {
                        $('#summernote').summernote({
                              dialogsInBody: true ,
                              minHeight : 100 ,
                              maxHeight : 200,
                              lang :'zh-CN' ,  //指定工具栏的语言包
                              placeholder : 'placeholder'  //无输入时显示的内容
                        });
                  });
                  /***点击显示富文本框，需要 将上面富文本初始化代码注释掉*/
                  $("#dialog_fide").click(function() {
                        $('#summernote').summernote({
                              dialogsFade: true // Add fade effect on dialogs
                        });
                        var markupStr = '初始化富文本就向文本中写入内容';
                        $('#summernote').summernote('code', markupStr);
                  });
                   /***销毁指定的富文本*/
                   $('#summernote').summernote('destroy');
            </script>
      </body>
</html>

效果展示

http://github.ifdream.xin/demo/summernote/summernoteDemo.html

资源文件链接

http://github.ifdream.xin/css/bootstrap/bootstrap.css
http://github.ifdream.xin/css/summernote/summernote.css
http://github.ifdream.xin/js/jquery.min.js
http://github.ifdream.xin/js/bootstrap/bootstrap.js
http://github.ifdream.xin/js/summernote/summernote.js
http://github.ifdream.xin/js/summernote/summernote-zh-CN.js