LayUI富文本编辑器的使用--数据加载与编辑器创建的先后顺序

     Layui 首个版本发布于2016年秋，官网说明兼容人类正在使用的全部浏览器（IE6/7除外），可作为后台系统与前台界面的速成开发方案。 刚接触该框架是公司想做一套通用的业务系统出来，我们希望包含用户、部门、角色管理和日志等基础功能，然后同时又能方便地扩展。

  

跟那些过往的编辑器一样，需要放置一个标签（一般为textarea文本域）作为编辑器的目标元素，然后调用 layedit.build('id') 即可，如下所示：

codelayui.code
 
 
<textarea id="demo" style="display: none;"></textarea>
<script>
layui.use('layedit', function(){
 var layedit = layui.layedit;
 layedit.build('demo'); //建立编辑器
});
</script>
 

然后会看到一个如下模样（部分工具Bar未配置出来），它跟Layui的所有存在体一样，兼容IE6/7以外的全部浏览器。

   最初使用是通过编辑器添加向数据库中添加文本内容，数据库字段类型选择text（使用longtext更为合适）。

     mysql中的text对应oracle中的clob 
    又分为TINYTEXT, TEXT, MEDIUMTEXT,LONGTEXT, 都是表示数据长度类型的一种。
    语法：[ UNSIGNED ] mediumtext
    TINYTEXT: 256 bytes
    TEXT: 65,535 bytes => ~64kb
    MEDIUMTEXT: 16,777,215 bytes => ~16M
    LONGTEXT: 4,294,967,295 bytes => ~4GB
    
    对添加的内容执行修改操作时需要从数据库中取出文本内容再回显至编辑器中，可是layedit中获取数据必须早于构建编辑器，否则无法在编辑器中显示出来。代码如下：
<script type="text/javascript">
var pages;
var groups;
var totalRows;

var layer;
var jQuery;
var form;
var laypage;
var text;
var layedit;
var index;
/**获取数据放在layui.use之前**/
$(document).ready(function(){
	var $content = $("#emergencyPlan");
	var url = location.search;
	var paramStr = url.substr(url.indexOf("?")+1);
	if(paramStr.indexOf("emergencyId")>0){
		var param = paramStr.substr(paramStr.indexOf("emergencyId"));
		var emergencyId = param.substr(param.indexOf("=")+1);
		$.post(
			"${ctx}/emergency/getEmergencyById.ht",
			{id:emergencyId},
			function(result){
				//alert(JSON.stringify(result));
				if(result.status == "0"){
					var vo = result.vo;
					returnValue = vo.emergencyPlan;
					$("#emergencyId").val(vo.id);
					$("#emergencyPlanTitle").val(vo.emergencyPlanTitle);
					$("#emergencyLevel").val(vo.emergencyLevel);
					$content.val(vo.emergencyPlan);
					//$("#TrueEmergencyPlan").val(vo.emergencyPlan); 
					$("#remark").val(vo.remark);
				}else{
					layer.msg(result.msg);
				}
			},
			"json"
		);
	}
	
	/*layui.use start */
	layui.use(['jquery','form','laypage','layer','laydate','layedit'],function(){
		form = layui.form();
		laypage = layui.laypage;
		layer = layui.layer;
		laydate =layui.laydate;	
		jQuery = layui.jquery;
		layedit = layui.layedit;
		
		//建立预案编辑器
		//index = layedit.build("emergencyPlan"); 
		/* layedit.build('emergencyPlan', {
		    tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
		    ,height: 300
		}); */
		
		index = layedit.build('emergencyPlan', {
		    tool: [
		    	 'strong'
		    	  ,'italic'
		    	  ,'underline' 
		    	  ,'del' 
		    	  
		    	  ,'|' 
		    	  
		    	  ,'left' 
		    	  ,'center' 
		    	  ,'right' 
		    	  ,'link' 
		    	  ,'unlink'
		    	]
		    ,height: 200
		});	
		//Form尺寸自适应
		$(window).resize(function() {
			var toolBarHeight = $(".toolBar").outerHeight();
		    $("#emergencyForm")
		    	.height( $(this).height() - toolBarHeight - 30 )
		}).resize();	
	});
	/*layui.use end */
});