layui 富文本编辑器的使用，及修改富文本的默认内容

约定不等于承诺〃 2023-01-16 06:20 383阅读 0赞

### html页面 ###

### 脚本需要声明模板 ###

layui.use(['form','laydate ', 'layedit'], function () {
        var form = layui.form,
    	layer = layui.layer,
    	laydate = layui.laydate,
    	layedit = layui.layedit;
    				
    	// 建立编辑器
    	var indexs = layedit.build('add_active_rich_text',{
    		height: 180, // 设置编辑器高度
    	});
    });

### 获取获取编辑器纯文本内容 ###

layedit.getText(indexs);

### 获取编辑器内容 ###

layedit.getContent(indexs)

### 编辑器赋值 ###

// indexs:创建富文本编辑器的索引  Content:赋值的内容
    layedit.setContent(indexs, Content);

### **给富文本赋值，默认活动规则内容，当选择完开始时间，结束时间时，修改默认活动规则的时间** ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>添加活动</title>
    		<meta name="renderer" content="webkit">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    	</head>
    	<body>
    		<div class="layui-form layuimini-form">
                <div class="layui-form-item">
    			    <label class="layui-form-label">活动时间：</label>
    			    <div class="layui-input-block">
    			        <input type="text" class="layInp layui-col-xs12 layui-col-sm3 layui-col-md3" name="start_time" id="startTime" placeholder="开始时间">
    			        <input type="text" class="layInp layui-col-xs12 layui-col-sm3 layui-col-md3" name="end_time" id="endTime" placeholder="结束时间">
    			    </div>
    			</div>
    
    			<div class="layui-form-item">
    				<label class="layui-form-label">活动规则：</label>
    				<div class="layui-input-block">
    					<textarea id="add_active_rich_text" name="share_rule" style="display: none;"></textarea>
    				</div>
    			</div>
    
    			<div class="layui-form-item">
    				<div class="layui-input-block">
    					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">提交</button>
    				</div>
    			</div>
    		</div>
    		<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
            <script type="text/javascript">
    			var Content = "1.本次活动时间：时间模板。\n2.本次活动新老用户皆可参与，邀请的好友需为首次微信或手机号注册的用户。\n3.活动期间内，分享好友并用微信或手机号注册，双方获得红包，奖励的红包保存在：（游戏账号 - 我的 - 钱包）。\n4.同一个手机号码、同一个设备、同一个提现账号（微信号），都视为同一个用户。\n5.想了解更多游戏相关奖励请联系客服（QQ：75339181）或关注微信公众号：05游戏。\n";
    			layui.use(['form', 'laydate','layedit'], function() {
    				var form = layui.form,
    					layer = layui.layer,
    					laydate = layui.laydate,
    					layedit = layui.layedit,
    					$ = layui.$;
    				
    				//建立编辑器
    				var indexs = layedit.build('add_active_rich_text',{
    					height: 180, //设置编辑器高度
    				});
    				// 赋值
    				layedit.setContent(indexs,Content);
                    
                    // 开始时间 结束时间
                    initlayDate('#endTime');
    				initlayDate('#startTime');
    				function initlayDate(idname) {
    				    laydate.render({
    				        elem: idname, //指定元素
    				        format: 'yyyy年MM月dd日',
    				        trigger: 'click',
    						done: function(value){
    							console.log(value,'日期生成的值');
    							var start = $('#startTime').val();
    							var end = $('#endTime').val();
    							if(start && end){
    								//  截取内容含‘时间模板’ 修改为 获取的开始和结束时间
    								set_content = Content.replace("时间模板", '（'+ start +'  —  ' + end +'）');
    								// 取值
    								layedit.setContent(indexs,set_content);
    							}							
    						}
    				    });
    				    form.render();
    				}
    
                });
    		</script>
    	</body>
    </html>

### 注：以上必须引用Layui.js以及Layui.css ###

### 未选择时间，默认活动规则 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70][]

# #

## **选择完开始时间和结束时间时，修改 ‘活动规则’ 的内容时间** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70 1][]

# #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]: /images/20221022/394e10bbfa1b404db1e0583ec7430bcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70 1]: /images/20221022/e14fb85a7ac94a728e8bed87d99f39c9.png