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>&nbsp;&nbsp;&nbsp;<span id="articleSource">

                        发布人：

                        @item.LB004

                    </span>&nbsp;&nbsp;&nbsp;<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使用富文本编辑器数据上传回显问题，图片，附件上传解决方案的更多相关文章

  1. django-应用中和amdin使用富文本编辑器kindeditor

    文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

  2. Django使用富文本编辑器

    1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...

  3. Django实现的博客系统中使用富文本编辑器ckeditor

    操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

  4. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  5. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  6. Django后台管理admin或者adminx中使用富文本编辑器

    在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...

  7. vue+element-ui 使用富文本编辑器

    npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...

  8. 使用富文本编辑器Kindeditor

    今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...

  9. Excel催化剂开源第29波-在Winform上使用富文本编辑器控件

    富文本编辑器,一般都是BS架构专利一般,好像百度有一个开源的比较出名,但无奈这些都只能用在JS上,在BS网页端开发上使用.像Winform开发的VSTO,只能羡慕的份.和一般Winform上用的Ric ...

随机推荐

  1. <h1>~<h6> 标题标签

    <h1>~</h6>标题系列标签 解释:h1到h6 中h1标签最大,h6标签最小,逐一递增. 例如: <h1>标签</h1> <h2>标签& ...

  2. 通过async与await实现高效并发

    withTimeoutOrNull: 在上一次https://www.cnblogs.com/webor2006/p/12010388.html中对于协程的超时机制进行了一个学习,上次用的是withT ...

  3. Codeforces Round #579 (Div. 3)

    Codeforces Round #579 (Div. 3) 传送门 A. Circle of Students 这题我是直接把正序.逆序的两种放在数组里面直接判断. Code #include &l ...

  4. python测试开发django-73.django视图 CBV 和 FBV

    前言 FBV(function base views) 就是在视图里使用函数处理请求,这一般是学django入门的时候开始使用的方式. CBV(class base views) 就是在视图里使用类处 ...

  5. Win7下安装openssl

    安装环境: 操作系统:window7(64位) C++编译器:VS2012 -------------------------------------------------------------- ...

  6. 一个小问题 关于 com.mysql.jdbc.PacketTooBigException: Packet for query is too large

    这个错本身就是应为传输的数据大于mysql的max_allowed_packet参数默认值造成的: 之前遇到这个问题,一直是改max_allowed_packet的值 ,做项目遇到这个错误改了好几次, ...

  7. python基础_格式化输出（%用法和format用法）(转载)

    python基础_格式化输出(%用法和format用法) 目录 %用法 format用法 %用法 1.整数的输出 %o -- oct 八进制%d -- dec 十进制%x -- hex 十六进制 &g ...

  8. Eclipse对spring-boot，spring-boot-mybatis的搭建

    1.准备工作 1.1.如果没有sts(spring tool suite)插件,  则需要下载. 1.1.1.eclipse下载的话,一定要注意版本,因为eclipse会直接下载最新版本,如果ts版本 ...

  9. Makefile文件基本格式

    以下是Makefile的基本模板 #指定编译器CC = g++#指定编译参数CFLAGS = -std=c++11 #指定头文件路径,此处用于指定非标准库的头文件路径INC = -I./ -I /us ...

  10. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...