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的.效 ...
随机推荐
- docker 私有仓库查询
docker:/etc/init.d# docker ps -a | grep reg c7d5592a3658 registry "docker-registry" 11 min ...
- EF中的事务处理的初步理解
http://yanwushu.byethost7.com/?p=87 1. EF对事务进行了封装:context的saveChange()是有事务性的. 2. 依赖多个不同的Context的操作(即 ...
- hdu4513(manacher)
传送门:吉哥系列故事——完美队形II 题意:求最长回文队伍且队伍由中间向两边递减. 分析:manach算法小应用,在判断回文子串向两边递减时加点限制使回文是由中间向两边递减的. #pragma com ...
- c#操作.mpp文件
原文地址:http://mjm13.iteye.com/blog/532404 所需设置 在工程中增加引用Microsoft Project 11.0 Object Library,该引用在co ...
- poj 1659 Frogs' Neighborhood (度序列)
Frogs' Neighborhood Time Limit: 5000MS Memory Limit: 10000K Total Submissions: 7295 Accepted: 31 ...
- SVN Error: “' 'x' isn't in the same repository as 'y' ” during merge (并不在同一个版本库中)
在使用svn merge命令报错 英文版本:SVN Error: “' 'x' isn't in the same repository as 'y' ” during merge 中文版本报错:并不 ...
- apache cxf之 一个简单的JAX-WS服务程序
推荐一本apache cxf的书籍: apache cxf的配置,这边就不做介绍了.请参照我关于它配置的博文. 开发步骤: 1.新建Java project,build path引入cxf runti ...
- 从零開始学android<ImageSwitcher图片切换组件.二十六.>
ImageSwitcher组件的主要功能是完毕图片的切换显示,比如用户在进行图片浏览的时候.能够通过button点击一张张的切换显示的图片,并且使用ImageSwitcher组件在每次切换的时候也能够 ...
- linux提取锁和信号灯经常使用
1.信号( 这两个过程之间的同步) struct semaphore power_sem; sema_init(&pdata->power_sem,1); down(&pdata ...
- 从零开始学Xamarin.Forms(二) 环境搭建、创建项目
原文:从零开始学Xamarin.Forms(二) 环境搭建.创建项目 一.环境搭建 Windows下环境搭建: 1.下载并安装jdk.Android SDK和NDK,当然还需要 VS2013 ...