关于百度编辑器UEditor在asp.net中的使用方法!

为了完成自己想要的功能效果,在项目中使用到了百度编辑器,为了搞明白,苦心学习查资料搞了整整一天,总结一下。

在asp.net 的项目中目前我觉得有两种情况,一种是没有使用模板页的,一种是使用了模板页的(我用的时候就是使用了模板页,我在网上查了很多,但是在模板页写的很少)

不废话了,开始步骤:

1.首先,下载编辑器,可以到百度官网上下载完整的,也可以自己定制需要的功能,再下载附上网址:http://ueditor.baidu.com/website/

2.下载后解压,在你需要的项目中新建文件夹ueditor,把解压好的文件夹中的所有文件复制到新建的文件夹中

3.添加引用,在项目中添加引用(选择浏览,在复制文件夹ueditor的net的bin目录下找到dll文件,添加引用)

如图:

4.修改config文件,这里修改的是文件夹ueditor下的config文件,打开之后修改如下:如下图

5.这样的话外部的配置基本就完了,现在在aspx页面加上百度编辑器代码如下:

这里面有两种情况(1)就是没有使用模板的情况下

代码如下:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title>编辑器实例</title>//下面的几个js和css引用顺序不要变。变得话可能导致编辑器显示不出来
 5     <script type="text/javascript" src="editor/ueditor.config.js"></script>
 6     <script type="text/javascript" src="editor/ueditor.all.js"></script>
 7     <link rel="stylesheet" href="editor/themes/default/dialogbase.css" />
 8     <style type="text/css">
 9         #myEditor
10         {
11             width: 700px;
12
13         }
14     </style>
15 </head>
16 <body>
17     <div>
18         <form id="form1" runat="server">
19
20                 <textarea id="myEditor" name="myEditor" runat="server" onblur="setUeditor()"></textarea>
21                 <script type="text/javascript">
22                     var editor = new baidu.editor.ui.Editor();
23                     editor.render("myEditor");
24                 </script>
25                 <div id="myButton" runat="server">
26                     <asp:Button ID="Button" runat="server" Text="获取数据" OnClick="btnTest_click" />
27
28                 </div>
29
30         </form>
31     </div>
32     <script type="text/javascript">
33         function setUeditor() {
34             var myEditor = document.getElementById("myEditor");
35             myEditor.value = editor.getContent();
36         }
37     </script>
38 </body>
39 </html>

(2)就是使用模板的情况下

代码如下:

//在content1中添加对js的引用,还是那个顺序不要乱了。这边的引用也可以直接写在模板中,这样的话用的时候就可以直接用了,
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <script  src="../ueditor/ueditor.config.js" type="text/javascript"></script>
     <script  src="../ueditor/ueditor.all.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script>
</asp:Content>
//在你需要编辑器的地方加上如下代码,
//就是在content2中一个合适的位置
<div>内容:</br>
            <script id="myEditor" type="text/plain"></script>
            <textarea id="myEditor" name="myEditor" runat="server" onblur="setUeditor()" style="width: 1030px;
                height: 250px;"></textarea>
            <%-- 上面这个style这里是实例化的时候给实例化的这个容器设置宽和高,不设置的话,或默认为auto可能会造成部分显示的情况--%>
            //实例化一个编辑器
            <script type="text/javascript">
                var editor = new baidu.editor.ui.Editor();

                editor.render("<%=myEditor.ClientID%>");
            </script>
        </div>
<script type="text/javascript">
        function setUeditor() {
            var myEditor = document.getElementById("myEditor");
            myEditor.value = editor.getContent();//把得到的值给textarea
        }
    </script>

6.这样剩下的只有在cs界面的获取值了,简单点写吧首先定义给一个button的点击事件

代码如下

1  protected void btnTest_click(object sender, EventArgs e)
2         {
3             string edi = Server.HtmlDecode(myEditor.InnerHtml);
4            this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert(‘"+edi+"‘);</script>");//这样的话会弹出编辑器中你输入的文本或者其他(带格式的,就是包含样式)
5
6         }

最后:你在实现了以上所有的时候基本上你的编辑器就可以用啦,但是有的情况下会有如下的出错提醒:

System.Web.HttpRequestValidationException: 从客户端(editorValue="<p>企鹅全文</p>")中检测到有潜在危险的 Request.Form 值

解决的办法就是,找到你项目的web.config文件,然后按照下图添加代码;

时间: 2024-11-07 17:08:07

关于百度编辑器UEditor在asp.net中的使用方法!的相关文章

百度编辑器ueditor前台代码高亮无法自动换行解决方法

这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题 问题描述: 在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换行,直接超出了内容页的边界,极不美观,虽然复制是可以完整的. 解决办法: 找到高亮代码显示的css文件  /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css 具体的路径根据你的ueditor做改动 找到 代

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

====================================================================== [百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明] ----by 夏春涛 2014-02-20 ====================================================================== 运行环境: ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,

百度编辑器ueditor 在vs2008中的使用方法

个人觉得百度编辑器ueditor还是不错的,虽然出生的时间比较短,但某些方面相比其它富文本编辑器更优秀,免费.可定制等等. 由于在官方下载的ueditor包是在vs2012下开发的,可以在vs2010中使用,但在vs2008中就会报错.折腾了一翻,现将解决方法分享给需要的朋友,其实就是把里面包含.net4.0的元素换成.net3.5的 1.下载.net framework 3.5版的Newtonsoft.Json.dll替换原来的 2.删除config.cs里的 using System.Dyn

FLASH图片上传功能—从百度编辑器UEditor里面提取出来

为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样显示进度条问题,以及上传前图片预览,也试过各种办法,直到有一天看到百度编辑器中的图片上传功能.花了点功夫把他单独提取出来. 最终效果图如下: 这个功能可以提供多个图片文件选择,预览,然后对上传的图片在上传队列中删除,以及旋转和,上传中进度条显示,以及上传相册的选择. 源代码下载路径为: http:/

关于百度编辑器UEditor的一点说明

大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径          2.首先要把这个路径配置好了.才能正常的显示,并使用editor的功能 关于百度编辑器UEditor中的上传图片控件(多图片上传)的提取 本人才疏学浅,用IE一点点来调试.才完成这个功能,结果没有一个清楚的文章分享给大家实在惭愧. 文字不好说明,如果朋友们有需要,请加我的QQ,问题我们一起来讨论

dedecms整合百度编辑器(Ueditor)之上传图片加水印的办法

Ueditor抓取远程图片加水印方法 打开getRemoteImage.php, 找到://远程抓取图片配置 在上面添加: require_once('../../../dede/config.php');//dede为你的后台目录 require_once(DEDEADMIN."/inc/inc_archives_functions.php"); 继续修改getRemoteImage.php, 找到: fwrite( $fp2 , $img ); 在下面添加: @WaterImg($

百度编辑器 Ueditor 如何增加字体 ?

在百度编辑器 Ueditor 如何增加字体 ? 要修改两个文件: 第一个文件:editor-config.js: ,'fontfamily':[             { label:'',name:'songti',val:'宋体,SimSun'},             { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},             { label:'',name:'yahei',val:'微软雅黑,Microsoft Y

百度编辑器 Ueditor 如何增加模板 ?

简介: Ueditor 是百度出的开源富文本编辑器,非常符合国人习惯!模板功能很好用,但不能直接自定义, 下面就告诉大家如何增加模板. 查找模板在源代码中的位置: 已经知道其它模板的关键字,比如有:键入文档标题 grep '键入文档标题' -r  dir/ueditor/ 结果: [[email protected] ueditor]#  grep '键入文档标题' -r * dialogs/template/config.js:        "html":'<h1 class

【百度编辑器ueditor】工具,如何去掉百度编辑器 ueditor 元素路径、字数统计等

去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,elementPathEnabled : false //是否启用元素路径,默认是true显示 ,wordCount:false //是否开启字数统计 ,autoHeightEnabled:false // 编辑器内容,是否自动长高,默认true ,fullscreen : false //是否开启初始化