c# mvc使用富文本编辑器数据上传回显问题，图片，附件上传解决方案
1.首先去官网下载编辑器：http://ueditor.baidu.com/website/download.html 我用的是asp.net mvc开发模式所以选的是asp
2.前端页面必须引用的两个文件，放在自己项目文件里创建个文件夹什么的然后引用
3.设置编辑器的大小
<div>
<script id="editor" type="text/plain" style="width:1024px;height:300px;"> </script>
</div>
4.如何取值和调用编辑器，取值有这四种方式是比较实用的。看你们喜欢使用哪一种，一种是纯内容，有带html格式的，有的带你编辑的格式什么的
5.引用和页面都调试好了以后是一下效果图，页面当然我用的是Layui框架
6.前端布局完了以后到了上传数据了，上传数据的时候我用的是：ajax 提交后台MVC控制器； 这里使用
ueditor编辑器提交带 <html> 标签时候提交数据会有个坑，如果数据不加密的话会提交不到后台，会报一个错说数据会带什么脚本注入攻击不能提交到后台这个是在版本MVC4以后对数据传输有的一个特性，前端提交带加密的内容就能提交到后台了
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
$(function () {
$("#btn").click(function () {
debugger;
var title = $("#tltle").val();
var Class = $("#Class").find('option:selected').val();
var ue = UE.getEditor('editor').getContent(); //获取带html标签的内容
var html = escape(ue); //给内容加密
if (title != "" && html != "") {
if (title.length < ) {
$.ajax({
url: "/Left_B/Add_Gong_gao",
type: "POST", //提交方式
dataType: 'text',
data: { title: title, Class: Class, center: html },
success: function (msg) {
if (msg > ) {
alert("发布成功");
window.location.reload();
}
else {
alert("发布失败！");
}
}
});
}
else {
layer.msg("标题不能大于50个字符");
return false;
}
}
else {
layer.msg("请输入完整信息");
return false;
}
})
});
</script>
7.我随便输入一些内容当然这是我网上随便复制的哈....并非对的
（图1）
（图2）
在图二就是点击提交后，图一的内容进行加密过的，就可以提交到后台了
8.这里是比较简单的后端代码，有了那个加密后数据就能提交到后端了，当然注释部分是必须要对传过来的数据进行解密，这样就能看到传过来是数据是什么东西了
控制器代码
public int Add_Gong_gao(string title, string center, string Class)// --添加公告
{
try
{
name = Session["Name"].ToString();
//这里给加密的数据进行解密
string Center = System.Web.HttpUtility.UrlDecode(center.ToString().Trim()); int result = bll.Add_Gong_gao(title, Center, Class, name);
return result;
}
catch (Exception ex)
{
throw ex;
}
}
这里下面就是解密后的数据带有html标签和css什么都在，在编辑器编辑内容的时候会带有所有内容的格式
9.上效果图，发布这里是标题
10.点击进去最终效果
11.当然这里在数据从数据库取出放到页面的视图的时候又有一个问题数据怎么让取出来的内容插入到页面呢？
一般的数据库传什么取得时候就是什么，字符串就是字符串“xxxxxxxxxxx”，传到页面也是这样的一串字符串，这里就不做演示了
解决方案：
ASP.NET MVC中@Html.Raw()的使用
可以自行百度，使用这个就能把原生带<html>标签的内容全部显示在页面
12.后端控制器代码从数据库拿到数据，我是放在 ViewBag.load_Wu 提交到前端，当然返回给前端有很多的方法，我只是用其中一种哈
13.前端接收，箭头部分就是内容显示区，加上这个就可以了让带标签的内容全部显示出来了，就是第10点的效果图
@item.XXX 是自己定义的model的属性
<div id="cen">
<!--内容-->
@foreach (var item in @ViewBag.Center)
{
<div class="neirong" id="article">
<h1 id="articleTitle">
@item.LB001
</h1>
<div class="laiyuan">
<span id="articleTime">
日期:@item.time
</span> <span id="articleSource">
发布人：
@item.LB004
</span> <span id="articleAuthor"> </span>
</div>
<div class="xian"></div> <div style="height:10px; width:100%;"></div>
<div style="height:10px; width:100%;"></div>
<div class="content" id="articleText">
<p>
</p>
<div class="TRS_Editor">
@Html.Raw(@item.LB002)
</div>
<p style="float:right;">（编辑：@item.LB004）</p>
</div>
<!--内容结束-->
</div>
}
</div>
我自己的定义的model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace Model
{
public partial class WULB
{
//id
public int ID { get; set; }
//标题
public string LB001 { get; set; }
//内容
public string LB002 { get; set; }
//类别
public int LB003 { get; set; }
//发起人
public string LB004 { get; set; }
//创建时间
public DateTime LB005 { get; set; }
}
}
图片，附件，视屏上传
1.找到包里的.json文件
2.打开找到图片访问路径 箭头那里，改成自己项目文件，后面的upload是编辑器自带的文件夹，上传的图片或者文件都会在里面把前缀路路径改对就行了，下面上效果图，附件同下
3.上传图片效果图
页面最终效果
总结：
以上都是我个人的总结！也是一点点摸索才写出来的，希望使用编辑器的小伙伴可以得到帮助！还有什么不明白的地方欢迎在下方留言，以上省略了一些基础代码只提供思路和部分代码。
以上都是原创，若要转载声明出处！
c# mvc使用富文本编辑器数据上传回显问题，图片，附件上传解决方案的更多相关文章
- django-应用中和amdin使用富文本编辑器kindeditor
文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...
- Django使用富文本编辑器
1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- flask项目中使用富文本编辑器
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- Django后台管理admin或者adminx中使用富文本编辑器
在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...
- vue+element-ui 使用富文本编辑器
npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...
- 使用富文本编辑器Kindeditor
今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...
- Excel催化剂开源第29波-在Winform上使用富文本编辑器控件
富文本编辑器,一般都是BS架构专利一般,好像百度有一个开源的比较出名,但无奈这些都只能用在JS上,在BS网页端开发上使用.像Winform开发的VSTO,只能羡慕的份.和一般Winform上用的Ric ...
随机推荐
- PCA 在手写数字数据集上的应用
在 skilearn 的手写数据集中,每个数据点都是 0 到 9 之间手写数字的一张 8*8 灰度图像.用 PCA 将其降维到二维,并可视化数据点,如下: 1.digits 数据演示: from sk ...
- vuex的简单总结使用
State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store对象,后期就可以使用this.$store.state直接获取状态 辅助函数的使用 1.mapState state的m ...
- 用 Splashtop Wired XDisplay HD 让 ipad做电脑扩展屏幕__亲测有效
参考: [1]https://blog.csdn.net/Tang_Chuanlin/article/details/86433152
- python 多进程数量 对爬虫程序的影响
1. 首先看一下 python 多进程的优点和缺点 多进程优点: 1.稳定性好: 多进程的优点是稳定性好,一个子进程崩溃了,不会影响主进程以及其余进程.基于这个特性,常常会用多进程来实现守护服务器的功 ...
- vs2017 curl7.6编译
nmake /f Makefile.vc mode=static VC=15 MACHINE=x86 nmake /f Makefile.vc mode=dll VC=15 MACHINE=x86 c ...
- CNN是怎样一步步工作的？
非常形象详细的博客:链接1 链接2 为了完成我们的卷积,我们不断地重复着上述过程,将feature和图中每一块进行卷积操作.最后通过每一个feature的卷积操作,我们会得到一个新的二维数组.这也可以 ...
- 关于ID命名 一个页面唯一
1.一般ID在一个区域内必须是唯一的.这样是一个规范而且在IE中使用JS通过ID获取这个对象永远只能获取第一个. 2.js无法找到重复的ID,用js获取时,只能得到第一个ID元素,但,如果不同的区域范 ...
- Comet OJ 夏季欢乐赛 分配学号
Comet OJ 夏季欢乐赛 H 分配学号 题目传送门 题目描述 今天,是JWJU给同学们分配学号的一天!为了让大家尽可能的得到自己想要的学号,鸡尾酒让大家先从 [1,10^{18}][1,1018] ...
- mysql数据库锁的机制-one
锁概念 : 当高并发访问同一个资源时,可能会导致数据不一致,需要一种机制将用户访问数据的顺序进行规范化,以保证数据库数据的一致性.锁就是其中的一种机制. 举例 :以买火车票为例,火车票可面向广大消费者 ...
- Debian 安装 yum
sudo apt-get updatesudo apt-get install build-essentialsudo apt-get install yum