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. ...
随机推荐
- golang对不同系统的编译
Golang 支持在一个平台下生成另一个平台可执行程序的交叉编译功能. Mac下编译 # mac编译linux执行文件 CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go ...
- vue-router 重难点总结笔记
1,使用动态路由配置的(如:‘:id’),可以在this.$router.params.id获得. 官网例子: 模式 匹配路径 $route.params /user/:username /user/ ...
- React 组件框架
- JAVA EE------XML
1.XML定义:在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息比如文章等.它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语 ...
- python3 操作配置文件
一 json文件 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用 ...
- 海思hi3516 ive运动目标检测简单实现
在做车牌识别项目,通过先对识别区域内进行目标识别,能降低CPU的占用率,在检测到有运动目标的时候,再做车牌识别. //图像差分 s32Ret = HI_MPI_IVE_Sub(&IveHand ...
- 二叉搜索树（BST）的插入和删除递归实现
思路 二叉搜索树的插入 TreeNode InsertRec(rootNode, key) = if rootNode == NULL, return new Node(key) if key > ...
- jQuery-4.动画篇---自定义动画
jQuery中动画animate(上) 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了 操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别 $(e ...
- react native onEndReached频繁多次调用问题
今天被这个问题搞得头疼,写一个分页加载,但是listview的onEndReached方法老是被频繁调用,知道加载完所有的分页数据才停止. <ListView automaticallyAdju ...
- css常用的可继承属性和不可继承属性
不可继承属性1.display2.text-decoration 添加文本样式3.list-style4.盒子模型属性(如padding系列,border系列,margin等,width,height ...