Summernote 的集成

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');