asp.net core razor CKEDITOR 添加等使用详细

浪淘沙10个月前前端80

image.png

<script src="/ckeditor/ckeditor.js"></script>    
<script src="/ckeditor/config.js"></script>    
<div class="layui-panel layui-padding-3">    
<form class="layui-form" action="" id="form1" lay-filter="form1">    
<div class="layui-form-item">    
<label class="layui-form-label">分类:<font color="red">*</font></label>    
<div class="layui-input-block">    
<select name="catid" id="catid" lay-affix="clear" autocomplete="off" lay-verify="required" lay-vertype="tips" lay-filter="catid-filter">    
<option value="">请选择</option>    
<option value="3">&nbsp;&nbsp;├&nbsp;&nbsp;├测试1</option>    
</select>    
</div>    
</div>    
<div class="layui-form-item">    
<label class="layui-form-label">内容:<font color="red">*</font></label>    
<div class="layui-input-block">    
<textarea class="layui-textarea" id="article" name="article" ></textarea>    
</div>    
</div>    
<div class="layui-form-item">    
<label class="layui-form-label">创建日期:<font color="red">*</font></label>    
<div class="layui-input-block">    
<input type="text" name="cdt" id="cdt" value="2025-02-13 16:34:07" lay-affix="clear" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required" lay-vertype="tips">    
</div>    
</div>    
<div class="layui-form-item layui-layout-admin">    
<div class="layui-input-block">    
<input type="hidden" name="fst" id="fst" value="34" class="layui-input">    
<input type="hidden" name="lrr" id="lrr" value="&#x5218;&#x529F;&#x52CB;" class="layui-input">    
<input type="hidden" name="views" id="views" value="0" class="layui-input">    
<button class="layui-btn layui-btn-lg " lay-submit lay-filter="form1-submit">提交</button>    
</div>    
</div>    
</form>    
</div>
<script>    
CKEDITOR.replace('article', {    
filebrowserImageUploadUrl: '/api/UploadPic/UploadImage', // 图片上传    
// filebrowserBrowseUrl: '/api/UploadPic/UploadImage',  // 浏览文件    
filebrowserUploadUrl: '/api/UploadPic/UploadFile',  // 文件上传    
linkUploadUrl: '/api/UploadPic/UploadFile',  // 处理链接上传的 API    
extraPlugins: 'uploadimage',    
height: "350",    
imageUploadUrl: '/api/UploadPic/UploadImage',    
});    
</script>    
<script>    
layui.config({    
base: '/layui/' // 静态资源所在路径    
}).extend({    
index: 'lib/index' //主入口模块    
}).use('index', function () {    
var $ = layui.$;    
var laydate = layui.laydate;    
var form = layui.form;    
var layer = layui.layer;    
laydate.render({    
elem: '#cdt',    
type: 'datetime',    
fullPanel: true // 2.8+    
});    
//获取id值,赋值    
var tid = 3;    
var ajaxurl = "/api/article_danye/Add";    
if (Number(tid) > 0) {    
ajaxurl = "/api/article_danye/Update";    
$.ajax({    
url: "/api/article_danye/ReadByCatid/" + tid,    
type: "POST",    
contentType: 'application/json', // 设置请求头中的 Content-Type 为 application/json    
success: function (response) {    
var data = response.data;    
// console.log(data[0].article);    
if (response.statusCode == 200) {    
form.val('form1', {    
"catid": data[0].catid,    
// "article": data[0].article,    
"cdt": layui.util.toDateString(data[0].cdt, "yyyy-MM-dd HH:mm:ss"),    
"lrr": data[0].lrr,    
"views": data[0].views,    
});    
CKEDITOR.instances['article'].setData(data[0].article);    
} else {    
layer.msg("操作失败", { icon: 5 });    
}    
}    
});    
}    
// 提交事件    
form.on('submit(form1-submit)', function (data) {    
var field = data.field; // 获取表单全部字段值    
var editorData = CKEDITOR.instances['article'].getData();    
field.article = editorData;    
var catid = field["catid"];    
var fst = field["fst"];    
layer.confirm('确定提交吗?', function (index) {    
layer.close(index); // 关闭确认提示框    
// 此处可执行 Ajax 等操作    
$.ajax({    
url: ajaxurl,    
type: "POST",    
data: JSON.stringify(field),    
contentType: 'application/json', // 设置请求头中的 Content-Type 为 application/json    
success: function (response) {    
// console.log(response);    
if (response.statusCode == 200) {    
layer.alert("操作成功", { icon: 6 }, function () {    
// 获得frame索引    
var index = parent.layer.getFrameIndex(window.name);    
//关闭当前frame    
parent.layer.close(index);    
location.href = 'article_danye?fst=' + fst + '&catid=' + catid;    
});    
} else {    
layer.msg("操作失败", { icon: 5 });    
}    
}    
});    
});    
return false;    
});    
// select 事件    
form.on('select(catid-filter)', function(data){    
var elem = data.elem; // 获得 select 原始 DOM 对象    
var value = data.value; // 获得被选中的值    
location.href = 'article_danye?fst=34&catid=' + value;    
});    
});    
</script>


相关文章

layui postgresql 时间绑定格式化,去除2025-11-30T00:00:00

  "bmks":  layui.util.toDateString(data[0].bmks,"yyyy-MM-dd ...

asp.net core razor layui 分页和url参数绑定一起

@page @model xxtsoft.Web.Entry.Pages.sysadmins.rw.rw_listModel @{     La...

Layui卡片式 新完整页面

<div class="layui-fluid">     <blockquote class=&q...

js 转换返回数据为json

JSON.parse(response.data);返回内容{   "statusCode": 200,   "da...

layui 表单 label宽度

 <style>      .layui-form-label {     ...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。