网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
java吧 关注：1,270,870贴子：12,777,469

富文本编辑器summernote介绍

只看楼主收藏回复

一、Summernote
Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器，基于 jQuery 和 Bootstrap 构建，支持快捷键操作，提供大量可定制的选项。二、官网 官网地址：http://summernote.org/ 官网的文档已经写得很详细了，为了让大家更直观的感受，本文将详述summernote的使用。
IP属地:北京1楼2016-11-18 22:38回复
    不好意思 没发好
    IP属地:北京2楼2016-11-18 22:39
    回复
      2025-07-24 15:31:57
      广告
      不感兴趣
      开通SVIP免广告
      一、Summernote
      Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器，基于 jQuery 和 Bootstrap 构建，支持快捷键操作，提供大量可定制的选项。
      二、官网
      官网地址：http://summernote.org/
      官网的文档已经写得很详细了，为了让大家更直观的感受，本文将通过中文方式详述summernote的使用。
      IP属地:北京3楼2016-11-18 22:41
      回复
        这是官网的一个demo
        <!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> <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>
        <div id="summernote"><p>Hello Summernote</p></div>
        <script>
        $(document).ready(function() {
        //初始化编辑器
        $('#summernote').summernote();
        });
        </script>
        </body>
        </html>
        IP属地:北京4楼2016-11-18 22:43
        回复
          排版太难了这里
          IP属地:北京5楼2016-11-18 22:43
          回复
            对java 开发感兴趣的同学可以私信我 我们正在开发问答系统，加入我们也算长点经验
            IP属地:北京6楼2016-11-18 22:44
            回复
              IP属地:北京7楼2016-11-18 22:45
              回复
                这是我们系统的提问界面
                IP属地:北京8楼2016-11-18 22:51
                回复
                  2025-07-24 15:25:57
                  广告
                  不感兴趣
                  开通SVIP免广告
                  2、下载编译后的css js文件

                  还需要下载bootstrap的css 和 js文件，当然也可以用在线的 类似demo中的路径，为了更好地学习 建议 也下载
                  这是官网地址 http://v3.bootcss.com/
                  IP属地:北京11楼2016-11-18 23:04
                  回复
                    大家也可以看我们的问答系统 http://www.begincode.net/wenda/
                    IP属地:北京12楼2016-11-18 23:04
                    回复
                      这是下载后 解压缩的一个目录结构 html的文件是我自己写的demo，在后续我会给大家进行分享
                      IP属地:北京14楼2016-11-21 19:27
                      回复
                        1、基础设置
                        $('#summernote').summernote({
                        height: 300, // 设置编辑器高度
                        minHeight: null, // 最小高度
                        maxHeight: null, // 最大高度
                        focus: true // 设置初始化后光标定位
                        });
                        2、获取文本编辑器中的html代码：
                        var markupStr = $('#summernote').summernote('code');
                        3、如果页面多个文本编辑器，根据序号获取如下，后续会介绍多个文本编辑器的加载：
                        var markupStr = $('.summernote').eq(1).summernote('code');
                        3、设置文本编辑器内容，用来初始化文本编辑器内容
                        var markupStr = 'hello world yang';
                        $('#summernote').summernote('code', markupStr);
                        IP属地:北京15楼2016-11-21 19:28
                        回复
                          语言支持
                          国际化支持，下载的文件中，有国际化的包，再lang包下，界面加载相应的js就可以使用不同的语言如下。加载语言包 下例为简体中文语言包
                          <script src="lang/summernote-zh-CN.js"></script>
                          编辑器初始化的时候，设置lang，对应语言包即可
                          $(document).ready(function() {
                          $('#summernote').summernote({
                          lang: 'zh-CN' // default: 'en-US'
                          });});
                          IP属地:北京16楼2016-11-21 19:35
                          回复
                            自定义工具条，
                            具体工具条相关按钮可以参考文档或js文件最下方有定义
                            $('#summernote').summernote({
                            toolbar: [
                            // [分组名称, [按钮列表]]
                            ['style', ['bold', 'italic', 'underline', 'clear']],
                            ['font', ['strikethrough', 'superscript', 'subscript']],
                            ['fontsize', ['fontsize']],
                            ['color', ['color']],
                            ['para', ['ul', 'ol', 'paragraph']],
                            ['height', ['height']]
                            ]
                            });
                            IP属地:北京17楼2016-11-21 19:36
                            回复
                              2025-07-24 15:19:57
                              广告
                              不感兴趣
                              开通SVIP免广告
                              先刷新一下
                              IP属地:北京来自Android客户端18楼2016-11-21 22:50
                              回复

                                扫二维码下载贴吧客户端

                                下载贴吧APP
                                看高清直播、视频！
                                发表回复
                                发贴请遵守贴吧协议及“七条底线”贴吧投诉
                                内  容:
                                  查看全部
                                发 表
                                保存至快速回贴

                                发布成功
                                去贴吧APP订阅抽奖结果通知
                                扫码进入贴吧APP
                                ···········
                                开奖后第一时间站内信通知
                                ···········
                                中奖结果全员公示