欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET MVC实现layui富文本编辑器应用

程序员文章站 2022-07-01 23:16:06
基于ASP.NET MVC 实现layui富文本编辑器图片展示 ......

先看看视图层

在视图层,使用的是视图助手--htmlhelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型。通过视图助手,为我们生成id和name属性相同的textarea标签。

备注:

在asp.net mvc中,能提交表单数据的元素(各种类型的input标签,textarea等),其属性name的值于实体模型中的属性名相同时,传递到控制器中的实体模型或参数,会自动进行映射,方便前端到后台的数据传递。

 1   <div class="layui-row">
 2       <div class="layui-col-xs12">
 3            <div class="layui-form-item layui-form-text">
 4                 @html.labelfor(m=>m.introduce,new {@class="layui-form-label"})
 5                 <div class="layui-input-block">
 6                  @html.textareafor(m=>m.introduce)@*<textarea id="introduce" name="introduce"></textarea>等同*@
 7                 </div>
 8            </div>
 9       </div>
10  </div>

js调用layui的富文本编辑器:

 1 <script type="text/javascript">
 2      layui.use('layedit',
 3             function () {
 4                 var layedit=layui.layedit;
 5                  //配置图片接口
 6                 //注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。
 7                 layedit.set({
 8                     uploadimage: {
 9                         url: '/course/uploadeditimg' //接口url
10                         , type: 'post' //默认post
11                     }
12                 });
13                 //建立富文本编辑器,更多设置,看layui文档,这里只是核心要点
14                 layedit.build('introduce');//build方法参数为id所对应的值,注意,此处不能加#符号!
15             }    
16 
17 </script>    

以上是前端部分,要想实现在layui富文本编辑器中显示图片,看如下后台代码:

实体结果类.layui的接受的值不支持大写,所以属性全小写,这是根据layui,edit图片上传返回结果来编写的此结果类。

 1 using system.collections.generic;
 2 
 3 namespace layuimvc.common.result
 4 {
 5     public class editordataresult
 6     {
 7         public int code { get; set; }
 8 
 9         public string msg { get; set; }
10 
11         public dictionary<string,string> data { get; set; }
12     }
13 }

控制器如下:

要引用的命名空间没展示,只抽取了有关富文本的内容!

 1 //富文本编辑器图片上传
 2         public actionresult uploadeditimg(httppostedfilebase file)
 3         {
 4             editordataresult editorresult=new editordataresult();
 5             if (file!=null&&!string.isnullorempty(file.filename))
 6             {
 7                 string saveabsolutepath = server.mappath("~/courseimages/editorimages");
 8                 string savefilename = guid.newguid().tostring("n") + "_" + file.filename;
 9                 string filename = path.combine(saveabsolutepath, savefilename);
10                 file.saveas(filename);
11                 editorresult.code = 0;
12                 editorresult.msg = "图片上传成功!";
13                 editorresult.data=new dictionary<string, string>()
14                 {
15                     {"src","/courseimages/editorimages/"+savefilename },
16                     {"title","图片名称" }
17                 };
18             }
19             else
20             {
21                 editorresult.code = 1;
22                 editorresult.msg = "图片上传失败!";
23                 editorresult.data=new dictionary<string, string>()
24                 {
25                     {"src","" }
26                 };
27             }
28             javascriptserializer jss=new javascriptserializer();
29             string  data = jss.serialize(editorresult);//转换为json格式!
30 
31             return json(data);
32         }

展示一下结果!

ASP.NET MVC实现layui富文本编辑器应用