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("笔记信息加载失败");}
  });
}

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

测试结果:



Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐