当前位置: 首页 > 编程日记 > 正文

关于百度编辑器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" οnblur="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" οnblur="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文件,然后按照下图添加代码;

转载于:https://www.cnblogs.com/Microscope/p/4114613.html

相关文章:

微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 先上效果图&#xff0c;再附上完整源码&#xff1a; 1.多张图片循环渲染后预览、保存、识别带参数二维码 <view wx:for"{{imgalist}}" class"previewimg">…

vba编程教程视频教程_我已经完成了编程教程。 怎么办?

vba编程教程视频教程by Preethi Kasireddy通过Preethi Kasireddy 我已经完成了编程教程。 怎么办&#xff1f; (I’ve done programming tutorials. Now what?) This week’s question for my Ask Preethi series is about how to go from simply doing tutorials to the act…

【官方文档】Nginx负载均衡学习笔记(二)负载均衡基本概念介绍

简介 负载均衡&#xff08;Server Load Balancer&#xff09;是将访问流量根据转发策略分发到后端多台 ECS 的流量分发控制服务。负载均衡可以通过流量分发扩展应用系统对外的服务能力&#xff0c;通过消除单点故障提升应用系统的可用性。 负载均衡主要有如下几个功能点&#x…

微信小程序本地缓存

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 关于微信小程序本地缓存&#xff0c;做一下笔记&#xff0c;希望能够帮助到看到这篇分享的人 //index.js 这里是保存 var a 1 wx.setStorageSync(a, a) //logo.js 这里是取保存的…

css 形状_在CSS形状之外思考

css 形状CSS is based off a box model. If you have an image that is a circle that you want to wrap text around, it will wrap around the images’ bounding box.CSS基于盒模型。 如果您要环绕的图像是一个圆&#xff0c;则它将环绕图像的边界框。 外型 (Shape-outside…

js-ES6学习笔记-module(4)

1、<script>标签打开defer或async属性&#xff0c;脚本就会异步加载。渲染引擎遇到这一行命令&#xff0c;就会开始下载外部脚本&#xff0c;但不会等它下载和执行&#xff0c;而是直接执行后面的命令。 defer与async的区别是&#xff1a;前者要等到整个页面正常渲染结束…

图像边缘检测--OpenCV之cvCanny函数

图像边缘检测--OpenCV之cvCanny函数 分类&#xff1a; C/C void cvCanny( const CvArr* image, CvArr* edges, double threshold1, double threshold2, int aperture_size3 ); image单通道输入图像.edges单通道存储边缘的输出图像threshold1第一个阈值threshold2第二个阈值aper…

微信小程序 封装网络请求并调用

微信小程序开发交流qq群 526474645 正文&#xff1a; util.js // 网络请求 const request function(url, method, data, msg, succ, fail, com) {// 小程序顶部显示Loadingwx.showNavigationBarLoading();if (msg ! "") {wx.showLoading({title: msg})}wx.requ…

什么是导师负责制_为什么一个导师是不够的

什么是导师负责制by Rick West由里克韦斯特(Rick West) 为什么一个导师是不够的 (Why one mentor just isn’t enough) A mentor can give career guidance and help with learning. They can teach you how to solve problems, network, and the list goes on.导师可以提供职…

CodeForces 114B 【STL应用】

思路&#xff1a; 原来string类能sort 和 swap....太强了.... 注意&#xff1a;字典序最小输出&#xff0c;因为某个地方写挫了&#xff0c;sort了n发&#xff0c;代码挫。 #include <bits/stdc.h> using namespace std; typedef long long LL;int tol; map<string,in…

微信小程序订单页面下拉刷新上拉分页加载

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 效果图&#xff1a; 代码&#xff1a; json代码&#xff1a; {"enablePullDownRefresh": true,"backgroundColor": "#19ad19" } js代码&#xff1a…

从网络上获取一张图片简单的

告诉ScrollView缩放的视图&#xff0c;要设置scrollView的代理。 转载于:https://www.cnblogs.com/x1024598115/p/4182674.html

es6 generator_让我们探索一下ES6 Generators

es6 generatorby Tiago Lopes Ferreira由Tiago Lopes Ferreira 让我们探索一下ES6 Generators (Let’s explore ES6 Generators) Generators are an implementation of iterables.生成器是可迭代对象的实现 。 The big deal about generators is that they are functions tha…

没听说过这些,就不要说你懂并发了,three。

引言 很久没有跟大家再聊聊并发了&#xff0c;今天LZ闲来无事&#xff0c;跟大家再聊聊并发。由于时间过去的有点久&#xff0c;因此LZ就不按照常理出牌了&#xff0c;只是把自己的理解记录在此&#xff0c;如果各位猿友觉得有所收获&#xff0c;就点个推荐或者留言激励下LZ&am…

设计模式之代理模式(Proxy Pattern)

定义&#xff1a;为其他对象提供一种代理以控制这个对象的访问&#xff0c;也叫做委托模式。 咱们比作游戏&#xff0c;通俗讲代理模式就是&#xff0c;一个主题虚基类派生出两个子类&#xff0c;一个玩家类&#xff0c;实现相关操作&#xff0c;一个是代练类&#xff0c;代替执…

[微信小程序]给data的对象的属性赋值

有问题可以扫码加我微信&#xff0c;有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 &#xff1b; 正文&#xff1a; <view wx:for"{{leixing}}"><button class"leixing_btn {{user_infor.lx_btnitem.divingtype…

无家可归的iPhone

by Fabrice Dubois通过Fabrice Dubois 无家可归的iPhone (Homeless iPhone) So, apparently the next iPhone won’t have a physical Home button. There’s been much speculation already about what that means for the user. The bottom area of the device, for some, w…

Spring 自动化装配Bean

声明一张cd的接口&#xff1a; public interface CompactDisc {public abstract void play(); } 实现cd接口&#xff1a; Component("SgtPeppers") public class SgtPeppers implements CompactDisc {private String title "Sgt.Peppers Lonely Hearts Club Ba…

js中函数,方法,事件对比区分,什么是方法,什么是函数

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 简单的理解&#xff1a;函数是运行在本地的&#xff0c;方法是公用的。 事件是开关&#xff0c;通过某某事件触发某个函数 通常命名规范 函数的命名使用小写字母和下划线&#xff…

笔记 JVM调优流程

待续 转载于:https://www.cnblogs.com/leeeee/p/7276287.html

创建新的apple id_Google是新的Apple吗?

创建新的apple idby Sumit Gupta由Sumit Gupta Google是新的Apple吗&#xff1f; (Is Google the new Apple?) 随着众多设备的推出&#xff0c;谷歌试图击败苹果。 “由Google制造”会使Google更像Apple吗&#xff1f; (With the launch of numerous devices, Google is tryi…

yeomen/bower/grunt

yeomen: npm install yo angular-in-action project npm install -g generator-angular npm install -g genrator-webapp yo angular learnangular new angular project yo webapp grunt-by-yeomen package.json npm install (执行package.json所指定的依赖包) bower: npm ins…

Window Server 2008 R2 安装 Share Point 2013

原文地址&#xff1a;http://www.cnblogs.com/jianyus/p/3631905.html转载于:https://www.cnblogs.com/gaobing/p/4191060.html

esp freertos_如何开始使用FreeRTOS和ESP8266

esp freertosby Denis Nuțiu丹尼斯努尤(Denis Nuțiu) 如何开始使用FreeRTOS和ESP8266 (How to get started with FreeRTOS and ESP8266) Recently, I purchased a NodeMCU from AliExpress for about $4. The reason I did this was to find out what all the fuss is about…

[SCOI2007]修车

题目描述 同一时刻有N位车主带着他们的爱车来到了汽车维修中心。维修中心共有M位技术人员&#xff0c;不同的技术人员对不同的车进行维修所用的时间是不同的。现在需要安排这M位技术人员所维修的车及顺序&#xff0c;使得顾客平均等待的时间最小。 说明&#xff1a;顾客的等待时…

[微信小程序]时间戳转日期

有问题可以扫码加我微信&#xff0c;有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 &#xff1b; 正文&#xff1a; // util.js //时间戳转换成日期时间 function js_date_time(unixtime) {var dateTime new Date(parseInt(unixtime) …

React模式:集中式PropTypes

通过集中化PropType避免重复自己 (Avoid repeating yourself by centralizing PropTypes) There are three popular ways to handle types in React: PropTypes, TypeScript and Flow. This post is about PropTypes, which are currently the most popular.在React中有三种流行…

Java Class SecurityManager

# 前言 简单了解 SecurityManager。具体查阅 API。 # What 它是 Java 沙盒模型控制安全的重要一个环节。它是 Java 的一个类。下面一段话源于SecurityManager API&#xff1a; The security manager is a class that allows applications to implement a security policy. It a…

微信小程序,对象转换成数组

有问题可以扫码加我微信&#xff0c;有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 &#xff1b; 正文&#xff1a; 对象转数组: var jiu res.data.k4.f3var nArr [];for (var i in jiu){nArr.push(jiu[i]);}console.log(jiu);consol…

sql 事务使用

BEGIN TRAN Tran_Money --开始事务DECLARE tran_error int; SET tran_error 0;BEGIN TRY UPDATE tb_Money SET MyMoney MyMoney - 30 WHERE Name 刘备;SET tran_error tran_error ERROR;--测试出错代码&#xff0c;看看刘备的钱减少&#xff0c;关羽的钱是否会增加--SE…