note_cloud--单击笔记使笔记标题和内容显示在编辑区域

UEdit 富文本编辑器--用JS开发的开源组件

---------------------------------------------------------------------------------------------------

使用步骤：

1.引入JS脚本

<!-- Ueditor编辑器JS -->
<script type="text/javascript" charset="utf-8" src="scripts/ue/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/ue/umeditor.min.js"></script>
<script type="text/javascript" src="scripts/ue/lang/zh-cn.js"></script>

2.实例化UE

//实例化Ueditor编辑器
var um = UM.getEditor('myEditor');

3.通过实例ID,确认控件位置

<script type="text/plain" id="myEditor" style="width:100%;height:400px;"></script>

4.常用的方法

（一）um.setContent(str); 将数据显示在编辑区域

（二）um.getContent(); 获取编辑区域显示的数据

---------------------------------------------------------------------------------------------------

功能：显示笔记信息

（一）发送ajax请求

发送事件：立即列表li元素的单击事件（动态绑定on）

请求参数：笔记的ID（noteId）

请求地址：/note/load.do

（二）服务器处理

Controller：LoadNoteController.execute（noteId）

Service：NoteService.loadNote（String noteId）

Dao：NoteDao.findByNoteId（String noteId）

cn_note（select操作获取title和body）

Json响应

（三）ajax回调处理

success：

1.设置笔记标题（title）

2.设置笔记内容（body）

um.setContent（str）设置显示的内容（字符串）

um.getContent（）获取内容

error：alert（"笔记信息加载失败"）

---------------------------------------------------------------------------------------------------

实体类部分代码：

public class Note implements Serializable {
	private String cn_note_id;
	private String cn_notebook_id;
	private String cn_user_id;
	private String cn_note_status_id;
	private String cn_note_type_id;
	private String cn_note_title;
	private String cn_note_body;//笔记内容
	private Long cn_note_create_time;//bigint类型
	private Long cn_note_last_modify_time;//bigint类型

---------------------------------------------------------------------------------------------------

Dao接口（映射器）

//在编辑笔记区域加载笔记信息(返回笔记的title和body即可)
	public Map<String,String> findByNoteId(String noteId);

---------------------------------------------------------------------------------------------------

映射文件：

<!-- 在编辑笔记区域加载笔记信息(返回笔记的title和body即可) -->
  <select id="findByNoteId" parameterType="string" resultType="map">
    select cn_note_title,cn_note_body from cn_note 
    where cn_note_id = #{noteId}
  </select>

---------------------------------------------------------------------------------------------------

业务层接口：

public NoteResult<Map<String,String>> loadNote(String noteId);

---------------------------------------------------------------------------------------------------

业务层实现类：

//在编辑笔记区域加载笔记信息(返回笔记的title和body即可)
	public NoteResult<Map<String, String>> loadNote(String noteId) {
		Map<String, String> map = dao.findByNoteId(noteId);
		NoteResult<Map<String, String>> result = 
				new NoteResult<Map<String, String>>();
		if(map == null || map.size()==0){
			System.out.println("未找到");
			result.setStatus(1);
			result.setMsg("未找到数据");
			return result;
		}
		result.setStatus(0);
		result.setMsg("加载笔记内容成功");
		result.setData(map);
		return result;
	}

---------------------------------------------------------------------------------------------------

控制层Controller：

@ResponseBody
	@RequestMapping("/load.do")
	//在编辑笔记区域加载笔记的title和body
	public NoteResult<Map<String,String>> executeNote(String noteId){
		NoteResult<Map<String,String>> result = service.loadNote(noteId);
		return result;
	}
	//测试：http://localhost:8080/cloud_note/note/load.do?noteId=9c612c62-7743-426d-850e-23a5eaa3454f

---------------------------------------------------------------------------------------------------

HTML部分代码：

 $(function(){
			  //加载笔记列表
			  loadUserBooks();
			  //动态绑定笔记本单击事件--此处若使用$("#book_ul li").click(function(){})没有反应
			  $("#book_ul").on("click","li",loadBookNotes);
			  //绑定单击笔记加载笔记信息功能
			  $("#note_ul").on("click","li",loadNote);
		  });

---------------------------------------------------------------------------------------------------

调用JS代码：

//编辑区域--显示笔记信息
function loadNote(){
	//清除之前选中效果
	$("#note_ul a").removeClass("checked");
	//设置选中效果
	$(this).find("a").addClass("checked");
	//获取数据 笔记ID
	var noteId = $(this).data("noteId");
	//alert(noteId);//显示笔记的ID
	//发送ajax请求
	$.ajax({
	  url:path + "/note/load.do",
	  type:"post",
	  data:{"noteId":noteId},
	  dataType:"json",
	  success:function(result){
		  if(result.status == 0){//有笔记内容
			  //获取笔记的title和body
			  var noteTitle = result.data.cn_note_title;
			  var noteBody = result.data.cn_note_body;
			  //将数据写入编辑笔记的区域
			  //设置笔记标题
			  $("#input_note_title").val(noteTitle);
			  //设置笔记内容
		  um.setContent(noteBody);
		  }
	  },
	  error:function(){alert("笔记信息加载失败");}
  });
}

---------------------------------------------------------------------------------------------------

测试结果：