ueditor文本编辑器的使用
1,头部引用
<link href="ueditor/themes/default/css/ueditor.css" rel="stylesheet" type="text/css" />
<script src="ueditor/ueditor.config.js" type="text/javascript"></script>
<script src="ueditor/ueditor.all.js" type="text/javascript"></script>
2,页面设个textarea和一个input hidden(隐藏域保存txtarea的数据,用于获取C#服务端获取)
<textarea id="txtTContent" tip="内容" ></textarea>
<input id="hidTContent" name="hidTContent" type="hidden" />
3,书写脚本
<script type="text/javascript">
function GetTextValue() {
try {
var count = $("#txtTTopic").val().length;
if (count == 0) {
alert('标题不能为空');
return false;
}
var oTxt = editor.getContent();
if (oTxt.length <= 0) {
alert('内容不能为空');
return false;
}
$("#hidTContent").val(htmlEncode(oTxt));
return true;
}
catch (err) {
alert(err);
return false;
}
}
function htmlEncode(value) {
if (value) {
return jQuery('<div />').text(value).html();
} else {
return '';
}
}
</script>
<script language="javascript" type="text/javascript"> // UEditor
var option = {
initialContent: '', //初始化编辑器的内容
initialFrameWidth: 602,
initialFrameHeight: 312, //设置高度
textarea: 'editorValue' //设置提交时编辑器内容的名字,之前我们用的名字是默认的editorValue
};
var editor = new baidu.editor.ui.Editor(option); //将设置初始化(之前的配置采用的是默认的,所以没有传参数)
editor.render("txtTContent");
</script>
4,后台获取
string str = Server.HtmlDecode(Request.Form["hidTContent"]);
5,其它特性
BBS回复引用
<a href="javascript:scroll(0,5000)" onclick="Reply('<%# Container.ItemIndex + CurPageItemIndex +1 %>','<%#Eval("Col_ReplyUser")%>','<%# FilterHtml.CutStrBySeparate(Eval("RContent").ToString(), 80)%>')">回复</a>
<script type="text/javascript">
function Reply(layer, user, content) {
//editor.setContent('');
var html = '<h4 style="font-size:12px; font-weight:normal; width:758px; line-height:22px; padding: 0 5px; color:#aaa; border:1px solid #ccc; overflow:hidden;"> 引用 ';
html += user + '(' + layer + '楼) ';
html += content;
html += '<h4></h4><h4></h4>';
html += '<br/>';
editor.setContent(html,false);
editor.focus();
}
</script>
ueditor文本编辑器的使用的更多相关文章
- Ueditor文本编辑器(新浪SAE平台版本) - 下载频道 - CSDN.NET
Ueditor文本编辑器(新浪SAE平台版本) - 下载频道 - CSDN.NET Ueditor文本编辑器(新浪SAE平台版本)
- UEditor文本编辑器
Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质 外,还采用了分层理念,使开 ...
- ASP.MVC 项目中使用 UEditor 文本编辑器
1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ued ...
- JForum论坛添加UEditor文本编辑器
在使用JForum论坛中发现论坛自带的文本编辑器不好用,不能上传图片,样式编辑也很麻烦,就想着把这个文本编辑器替换掉,我这里选用的是百度的开源富文本编辑器UEditor 替换后的效果图 替换方法如下 ...
- 个人纪录(初)----Ueditor文本编辑器的引用
源码下载地址:http://ueditor.baidu.com/website/ 打开源码参考.html 把ueditor引入自己的web项目下. 在需要引入文本的地方写个div,设置样式等. 并且在 ...
- ueditor 文本编辑器
百度编辑器 压缩包在文件里 百度UEditor编辑器使用教程与使用方法 发布时间:2014-08-23 14:23:34.0 作者:青岛做网站 我们在做网站的时候,网站后台系统一般都会用到 ...
- 日常问题181101: ueditor文本编辑器
下载地址: https://ueditor.baidu.com/website/download.html#ueditor 把下载好的文件整个复制到根目录(或是,想要存放的目录) 引入css: < ...
- 2016/05/16 UEditor 文本编辑器 使用教程与使用方法
第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://uedito ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
随机推荐
- android doGet和doPost
doGet和doPost的差别 get和post是http协议的两种方法,另外还有head, delete等 这两种方法有本质的差别,get仅仅有一个流,參数附加在url后.大小个数有严格限制且仅仅 ...
- 2015年十大热门Android开源新项目
2015年十大热门Android开源新项目 2015 即将结束,又到了大家喜闻乐见的年终盘点时刻啦,今天给大家盘点一下 2015 年 Android 开发领域新出现的 10 大热门开源项目.数据来自于 ...
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- JavaFX 简单3D演示样例
从Java8開始,在JavaFX中便添加了3D部分的内容,包含Camera,Material,Light,Shape3D等基础内容. 当然,JavaFX 3D应该是OpenJFX里眼下正在补充和完好的 ...
- 给公司部门设计的SOA架构(转)
新来老大年前开会说:各位同学,公司业务越来越重,未来几年要成倍增长......,我们要梳理出一套新架构,才能更好的支持N万用户.....,以后升职加薪当上....打败..... 想想还有点小激动呢,于 ...
- 苹果iOS手机系统诊断功能是后门吗?
7月20日,美国知名苹果iOS手机系统侦破专家扎德尔斯基在2014年世界黑客大会(HOPE/X)用幻灯片讲演揭露了苹果手机存在系统级"后门". 为此,7月23日.苹果公司马上做出回 ...
- NYOJ 12 喷水装置(二)
pid=12">喷水装置(二) 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描写叙述 有一块草坪,横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n( ...
- cocos2d-x ios游戏开发初认识(五) CCsprite精灵类
这次写一下精灵创建的几种类型: 一.通过文件创建: 在原有的基础上加入例如以下代码: //一.通过文件创建精灵 CCSprite *bg =CCSprite::create("map.png ...
- __iomem解析
以下是在学习电池驱动中遇到的知识点之_iomem A new I/O memory access mechanism Most reasonably current cards for the PCI ...
- Rational Rose的四种视图介绍
Rose模型中有四种视图:Use Case View(用例视图),Logical View(逻辑视图),Component View(组建视图)和Deployment View(配置视图). 用例视图 ...