欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Summernote 的集成

程序员文章站 2022-04-21 22:23:41
...

Summernote 的集成

Summernote 链接: 网址.是相对轻量的富文本编辑器,集成简单,使用效果不错。
1.下载 地址 下载后保存本地,解压后将文件拷贝到项目资源目录;
2.在调用的页面增加引用

    <!-- 富文本编辑器 -->
    <script src="<%= BASE_URL %>static/summernote-0.8.18-dist/summernote.js"></script>
    <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>static/summernote-0.8.18-dist/summernote.css" />

3.页面 集成,如果mysql数据库包含字段 content 类型 mediumtext,集成如下:

  • 打开前
            add() {
                //let _this = this;
                this.notice = {};
                $('#content').summernote({
                    height: 200
                });
                // 先清空历史文本
                $("#content").summernote('code', '');
                $('#form-modal').modal('show');
            }
  • form-modal 页面 中
                                <div class="col-lg-12">
                                    <div id="content"></div>
                                </div>
  • 保存
                let content = $("#content").summernote("code");
                _this.notice.text = content;
  • 编辑
              $('#content').summernote({
                    height: 200
                });
                // 先清空历史文本
                $("#content").summernote('code', '');

                $("#content").summernote('code', _this.notice.content);

                $('#form-modal').modal('show');