富文本

1、富文本编辑器的使用

1.1 作用

在我们开发项目的过程中经常涉及到一些有格式的内容。我们可能希望给内容增加一些颜色、图片或者是设置一下字体大小，如我们的新闻内容，这个时候普通的文本编辑就满足不了我们的需求了，我们就需要使用富文本编辑器进行编辑，将编辑好的html格式的文本存到数据库中，下次再加载的时候，只需要进行html解析即可得到对应的内容。
当前市面上有很多富文本编辑器，比如ueditor、summernote等等，这里ueditor是一个比较老牌的富文本编辑器了，使用起来相对比较麻烦，这里我们选择summernot作为这个项目的富文本编辑器。
https://summernote.org/

1.2 使用 这里以实际项目开发中的应用举例

1. 下载到项目中

summernote-0.8.18-dist.zip

2. 引入相应的js和css（add/edit/和添加的富文本界面）

这里依赖jquery和bootstrap

   <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${ctx}/resources/lib/summernote/summernote.min.css">
    <script src="${ctx}/resources/lib/summernote/summernote.min.js"></script>
注意不要写错路径 根据实际 这里我的路径是
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/lib/summernote-0.8.18-dist/summernote.css}">
    <script th:src="@{/lib/summernote-0.8.18-dist/summernote.js}"></script>

3. html页面初始化

 <div id="summernote"></div>

<!--实际应用-->
     <div class="layui-form-item">
                    <label  class="layui-form-label">备注</label>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                        </div>
                      <!--add界面不用-->
                        <div id="summernote"  th:text="${对象.属性}" ></div>
                    </div>
                </div>

   $(function () {
        $('#summernote').summernote({
            height: 220,
            callbacks: {
                // 当触发了图片上传操作
                onImageUpload: function(files) {
                    var node = document.createElement('img');
                    node.src = 'https://img2.baidu.com/it/u=3228549874,2173006364&fm=26&fmt=auto&gp=0.jpg';
                    // 执行上传的代码，得到图片地址
                    $('#summernote').summernote('insertNode', node);
                }
            }
        });
    })

    var ctx=[[${#httpServletRequest.getContextPath()}]];

4. 获取输入的内容

$('#summernote').summernote('code')

实际应用
   //监听提交
 form.on('submit(edit)',
      function (data) {
             console.log(data);
 var basePath = [[${#httpServletRequest.getContextPath()}]];
重要！获取输入的内容（添加在ajax请求上面）
 data.field.note=$('#summernote').summernote('code');

5.在controller界面中设置一个跳转链接 调到新的备注页面

    @GetMapping("/note")
    public String note(String id,ModelMap modelMap){
        Custom custom= customService.selectOne(id);
        modelMap.addAttribute("custom",custom);
        return "custom/note";
    }

note备注页面接收数据跟edit界面相同 但是除了要修改的数据 比如文本框 .
其他的都设置hidden=”hidden”隐藏即可
注意 ajax请求地址发送到edit界面即可实现局部更新
url: ctx+”/*/edit”,

6.对list界面的td接收值写法的修改举例

 <td th:text="*{departmentId}"></td>
 <td th:text="*{departmentName}"></td>

<!-- 设置跳转文本框界面-->
<td>
    <a th:text="部门职责（备注）" style="color: #2D93CA" th:onclick="|xadmin.open('部门职责','@{/department/note(id=*{departmentId})}',800,600)|" href="javascript:;"></a>
</td>

对于编辑/修改按钮

 <a title="编辑" th:onclick="|xadmin.open('编辑','@{/department/edit(id=${department.departmentId})}',600,400)|" href="javascript:;">

<a title="删除" th:data-id="*{departmentId}" th:onclick="|member_del(this,this.dataset.id)|" href="javascript:;">
 <i class="layui-icon">&#xe640;</i></a>

浮动条

<style>
    body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */
</style>

方法2 不完善，没有最后的链接跳

富文本案例

依赖，webapp/resource/lib下

Add.jsp中

使用一共3步

Add.html/jsp中

ajax提交时加个属性

这种方式可以选择几张图片

富文本链接实现

富文本最新实现