UEditor富文本简单使用
简单使用编辑器UEditor（录入）步骤：
1，下载Ueditor插件（文中使用1.4.3版本），添加js引用。
<script src="../js/ueditor/ueditor.config.js" type="text/javascript"></script>
<script src="../js/ueditor/ueditor.all.min.js" type="text/javascript"></script>
<script src="../js/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
2，实例化
$(function () {
var editor = UE.getEditor('editor', { wordCount: false, elementPathEnabled: false });
editor.ready(function () {
editor.setContent($('#hdncontent').val()); //赋值给UEditor
});
});
前台页面：
<%@ Page Language="C#" AutoEventWireup="true" validateRequest="false" CodeBehind="ttnewsadd.aspx.cs" Inherits="web.system.ttnewsadd" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="/css/default.css" rel="stylesheet" type="text/css" />
<link href="/css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="/js/jquery.ui.position.js"></script>
<script type="text/javascript" src="/js/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="/js/jquery.ui.button.js"></script>
<script type="text/javascript" src="/js/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/js/common.js?r=20140613"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script src="/js/scroll.js" type="text/javascript"></script>
<script src="../js/ueditor/ueditor.config.js" type="text/javascript"></script>
<script src="../js/ueditor/ueditor.all.min.js" type="text/javascript"></script>
<script src="../js/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
<style type="text/css">
.tdClass
{
line-height: 15px !important;
}
.tdClass2
{
line-height: 22px !important;
}
.tdClass3
{
line-height: 15px !important;
width: 106px;
word-break: break-all;
}
.tdClass4
{
line-height: 15px !important;
width: 128px;
word-break: break-all;
}
.swiper_wrap
{
position: relative;
width: 100%;
height: 30px;
margin: 0 auto;
overflow: hidden;
}
ul
{
position: relative;
top: 0;
left: 0;
width: 100%;
float: right;
color: #444;
font-size: 14px;
margin-top: 1px;
}
ul li
{
line-height: 30px;
padding-left: 24px;
} .swiper_wrap .font_inner a
{
color: red;
}
.swiper_wrap a:hover
{
color: red;
text-decoration: underline;
}
.style1
{
height: 30px;
}
</style>
</head>
<body>
<form id="form1" runat="server" action="" method="post">
<input type="hidden" name="pkid" id="pkid" runat="server"/>
<input type="hidden" name="actiontype" id="actiontype" value="look" runat="server"/>
<asp:HiddenField ID="hdtype" runat="server" />
<div class="title">
<span>【公告编辑】<label style="color: purple;"></label></span>
</div>
<div class="dbox">
<table cellpadding="0" cellspacing="0" class="oderAdmin">
<tr>
<th>
公告类型：
</th>
<td>
<asp:DropDownList runat="server" ID="ddltype">
<asp:ListItem Text="" Value=""></asp:ListItem>
<asp:ListItem Text="系统公告" Value="1"></asp:ListItem>
<asp:ListItem Text="其他公告" Value="2"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<th>
公告标题：
</th>
<td>
<asp:TextBox ID="txtTitle" runat="server" Width="740px"></asp:TextBox>
</td>
</tr>
<tr>
<th>
公告内容：
</th>
<td>
<script id="editor" type="text/plain" style="width: 740px; height: 300px;"></script>
</td>
</tr>
<tr>
<th>
发布时间：
</th>
<td>
<asp:TextBox ID="txtpublishtime" runat="server" rel="datetime"></asp:TextBox>
</td>
</tr>
<tr>
<th class="style1">
发布状态：
</th>
<td class="style1">
<asp:DropDownList runat="server" ID="dllstate">
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="0" Selected="True">未发布</asp:ListItem>
<asp:ListItem Value="1">已发布</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="button" id="btnSubmit" class="button button-primary" value="保存" onclick="onsubmitform('save');" />
</td>
</tr>
</table>
</div>
<input type="hidden" id="hdncontent" name="hdncontent" value='<%=_content %>' />
</form>
</body>
</html>
<script type="text/javascript">
function GetEditor() {
var editor = UE.getEditor('editor', { wordCount: false, elementPathEnabled: false });
if (editor == null || editor == undefined) {
editor = UE.getEditor('editor', { wordCount: false, elementPathEnabled: false });
}
return editor;
} function onsubmitform(type) {
$("#actiontype").val(type);
$("#hdncontent").val(GetEditor().getContent());
$("#form1").submit();
} $(function () {
var editor = UE.getEditor('editor', { wordCount: false, elementPathEnabled: false });
editor.ready(function () {
editor.setContent($('#hdncontent').val()); //赋值给UEditor
});
});
</script>
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
using web.code;
using webframework.model.b2b;
using webframework.model;
using webframework.bll; namespace web.system
{
public partial class ttnewsadd : code.BasePage
{
protected string _content;
protected string _typestr = "look";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
hdtype.Value = Request.QueryString["type"];
if (string.IsNullOrEmpty(hdtype.Value))
{
base.Alert("请选择对应操作");
return;
}
BingData();
}
if (!string.IsNullOrEmpty(Request.Form["actiontype"]))
{
if (Request.Form["actiontype"] == "save")
Save();
}
} private void BingData()
{
string id = Request.QueryString["id"];
if (!string.IsNullOrEmpty(id))
{
string sql = "select * from t_system_news where id={0}";
DataTable _dt = code.SqlHelper.ExecuteDataTable(code.SqlHelper.ConnectionString, CommandType.Text, string.Format(sql, id));
if (_dt != null && _dt.Rows.Count > )
{
txtTitle.Text = _dt.Rows[]["title"].ToString();
dllstate.SelectedValue = _dt.Rows[]["isenable"].ToString();
ddltype.SelectedValue = _dt.Rows[]["newstype"].ToString();
_content = _dt.Rows[]["contents"].ToString();
pkid.Value = _dt.Rows[]["id"].ToString();
if (!string.IsNullOrEmpty(_dt.Rows[]["publishtime"].ToString()))
txtpublishtime.Text = _dt.Rows[]["publishtime"].ToString();
}
}
} private void Save()
{
if (string.IsNullOrEmpty(txtTitle.Text.Trim()))
{
Alert("公告标题不能为空");
txtTitle.Focus();
return;
}
string contents = Request.Form["hdncontent"].Trim();
if (string.IsNullOrEmpty(contents))
{
Alert("公告内容不能为空");
return;
}
if (string.IsNullOrEmpty(dllstate.SelectedValue))
{
Alert("发布状态不能为空");
dllstate.Focus();
return;
}
if (string.IsNullOrEmpty(ddltype.SelectedValue))
{
Alert("公告类型不能为空");
ddltype.Focus();
return;
}
string type = hdtype.Value;
bllsystemnews bll = new bllsystemnews();
DateTime dtnow = DateTime.Now;
t_system_news demo = new t_system_news();
if (type == "edit")
demo = bll.GetModel(int.Parse(pkid.Value)); demo.title = txtTitle.Text.Trim();
demo.contents = contents;
demo.isenable = dllstate.SelectedValue;
demo.newstype = int.Parse(ddltype.SelectedValue);
demo.publishtime = dtnow;
if (!string.IsNullOrEmpty(txtpublishtime.Text))
demo.publishtime = Convert.ToDateTime(txtpublishtime.Text);
demo.title = txtTitle.Text;
demo.updateid = UserOnline.Current.UserID.ToString();
demo.updatename = UserOnline.Current.UserName;
demo.updatetime = dtnow;
if (type == "add")
{
demo.createid = UserOnline.Current.UserID.ToString();
demo.createname = UserOnline.Current.UserName;
demo.createtime = dtnow;
if (bll.Add(demo))
{
code.CacheCollection.DelCacheByKeypre("GetSystemNews");
ScriptHelper.PopMessageRunScript("添加成功", "DialogCloseAndReload();");
}
else
Alert("添加失败");
}
else if (type == "edit")
{
if (bll.Update(demo))
{
code.CacheCollection.DelCacheByKeypre("GetSystemNews");
ScriptHelper.PopMessageRunScript("编辑成功", "DialogCloseAndReload();");
}
else
Alert("编辑失败");
}
else
{
Alert("数据丢失，请重新尝试");
}
} protected void btnadd_Click(object sender, EventArgs e)
{ }
}
}
===================================
简单使用编辑器UEditor（展示）步骤：
1，引用js
<script src="../js/ueditor/ueditor.parse.js" type="text/javascript"></script>
2，初始化js
<script type="text/javascript">
$(function () {
uParse('#content', {
rootPath: '../js/ueditor/'
})
});
</script>
前台页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ttnewsdetail.aspx.cs" Inherits="web.system.ttnewsdetail" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="/css/default.css" rel="stylesheet" type="text/css" />
<link href="/css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="/js/jquery.ui.position.js"></script>
<script type="text/javascript" src="/js/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="/js/jquery.ui.button.js"></script>
<script type="text/javascript" src="/js/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/js/common.js?r=20140613"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script src="/js/scroll.js" type="text/javascript"></script>
<script src="../js/ueditor/ueditor.parse.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" action="" method="post">
<input type="hidden" name="pkid" id="pkid" runat="server" />
<input type="hidden" name="actiontype" id="actiontype" value="look" runat="server" />
<asp:HiddenField ID="hdtype" runat="server" />
<div class="title">
<span>【公告查看】<label style="color: purple;"></label></span>
</div>
<div class="dbox">
<% if (_dtsystemnews != null)
{ %>
<table cellpadding="" cellspacing="" class="oderAdmin" border="">
<tr>
<th>
公告类型：
</th>
<td>
<div style="font-size: 15px;">
<%=_dtsystemnews.Rows[]["newstypedesc"]%></div>
</td>
</tr>
<tr>
<th>
公告标题：
</th>
<td>
<div style="width: 740px; color: red; font-size: 20px;">
<%=_dtsystemnews.Rows[]["title"]%></div>
</td>
</tr>
<tr>
<th>
公告内容：
</th>
<td>
<div id="content" style="width: 740px; height: 300px;">
<%=_dtsystemnews.Rows[]["contents"]%></div>
</td>
</tr>
<tr>
<th>
发布时间：
</th>
<td>
<%=_dtsystemnews.Rows[]["publishtime"]%>
</td>
</tr>
<tr>
<th>
编辑人员：
</th>
<td>
<%=_dtsystemnews.Rows[]["updatename"]%>
</td>
</tr>
<tr>
<th>
编辑时间：
</th>
<td>
<%=_dtsystemnews.Rows[]["updatetime"]%>
</td>
</tr>
</table>
<%
} %>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
uParse('#content', {
rootPath: '../js/ueditor/'
})
});
</script>
后台页面：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
using web.code;
using webframework.model.b2b;
using webframework.model;
using webframework.bll;
namespace web.system
{
public partial class ttnewsdetail : code.BasePage
{
protected DataTable _dtsystemnews = null;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
hdtype.Value = Request.QueryString["type"];
if (string.IsNullOrEmpty(hdtype.Value))
{
base.Alert("请选择对应操作");
return;
}
BingData();
}
} private void BingData()
{
string id = Request.QueryString["id"];
if (!string.IsNullOrEmpty(id))
{
string sql = "select * from t_system_news where id={0}";
DataTable dtnews = code.SqlHelper.ExecuteDataTable(code.SqlHelper.ConnectionString, CommandType.Text, string.Format(sql, id));
//DataTable dtnews = code.CacheCollection.GetSystemNews("1");
if (dtnews != null && dtnews.Rows.Count > )
{
if (!dtnews.Columns.Contains("newstypedesc"))
dtnews.Columns.Add("newstypedesc", typeof(string)); DataRow[] rows = dtnews.Select("id=" + id);
if (rows != null && rows.Length > )
{
_dtsystemnews = dtnews.Clone();
foreach (DataRow item in rows)
{
item["newstypedesc"] = item["newstype"].ToString() == "" ? "系统公告" : "其他公告";
_dtsystemnews.ImportRow(item);
}
// _dtsystemnews.DefaultView.Sort = "publishtime desc";
}
} }
}
}
}
参考资料：http://fex.baidu.com/ueditor/#start-start
UEditor富文本简单使用的更多相关文章
- UEditor富文本编辑器简单使用
UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...
- 前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
- Thinkphp下嵌套UEditor富文本WEB编辑器
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 本文实际操作于ThinkPHP框架下,现 ...
- 百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...
- ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
- ueditor富文本上传图片的时候报错"未找上传数据"
最近因为需求所以在ssh项目中使用了Ueditor富文本插件,但是在上传图片的时候总是提示“未找到上传数据”,之后百度了好久终于弄明白了.因为Ueditor在上传图片的时候会访问controller. ...
随机推荐
- C语言关键字分类整理
C语言总览: 强类型,面向过程 简洁.灵活:32个关键字(C99标准新增5个,C11新增7个),9种控制语句,34种运算符 数据类型丰富,运算符丰富 结构化(控制语句).模块化(函数) 灵魂.特色:指 ...
- python笔记——随手记
1.max与min函数的使用min(0)返回该矩阵中每一列的最小值 min(1)返回该矩阵中每一行的最小值 max(0)返回该矩阵中每一列的最大值 max(1)返回该矩阵中每一行的最大值2.argso ...
- Windows 7 改造
1.界面改造 1.1 软件 Wallpaper Engine 收费(18￥) 动态桌面,通过steam安装,使用steam中的创意工坊下载内容 最好使用集成显卡运行,单显卡方案容易桌面异常刷新 Clo ...
- SearchView监听关闭正确方案
SearchView往往需要在关闭的时候清除筛选的数据后加载全部数据,但是oncloseListener在高版本的andorid是不起作用的 ,正确的做法应该是取得searchview中那个close ...
- css解决多行溢出显示省略号
多行溢出 仅作为记录方便查找 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: number; /*n行溢 ...
- 访问mysql出现Access denied for user 'root'@'的解决方法
1.关闭mysql的服务 方法一:我的电脑右键-管理-服务和应用程序-服务,找到mysql,右键关闭 方法二:cmd进入命令提示符,service mysqld stop(这个是网上的方法,我试了一下 ...
- 第二章 函数编程&常用标准库
函数编程&常用标准库 ...
- 大学生对vivo手机的看法
- HTML标记语言
一.html的文档结构 html含义为超文本标记语言,html文档重要由4个标签来组成就是<html> <head> <title> <body> ...
- D2 有关写博客新的体会以及面向对象
之前几篇博客一大堆废话,着实浪费时间也没啥实际作用.除了总结一些java的知识点外,再用一些比喻或者形象化的语言来表述这些知识点,无可厚非.但是,现在看来,应当减少这种堆满偏理论式偏方法性的内容的博客 ...