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. ...
随机推荐
- [Hive]新增字段(column)后，旧分区无法更新数据问题
问题描述: 实际应用中,常常存在修改数据表结构的需求,比如:增加一个新字段. 如果使用如下语句新增列,可以成功添加列col1.但如果数据表tb已经有旧的分区(例如:dt=20190101),则该旧分区 ...
- js 冒泡排序与快速排序
刚好今晚看了js的冒泡排序跟快速排序,趁着还没忘记先记下来. 1. 冒泡排序:遍历数组,每个元素都与后一个元素比较,如果大于下一个元素,则两个元素位置调换.否则的话当前元素再与下下个元素比较,一直到 ...
- VUE处理 组件赋值 watch 监听不到赋值问题
开发中,遇到了一个BUG,做的页面类似于 导航切换效果.两个组件传值. 上方导航组件 (主动) 左侧导航组件 (被动) 点击上方导航,左侧导航实现变换对应的栏目. 实现过程中,遇到了点问题.左 ...
- servlet之servlet容器（一）
1.servlet容器 ·servlet容器为javaweb应用提供运行时环境,负责管理servlet和jsp的生命周期以及管理它们的共享数据 ·servlet容器中的文件目录结构 ·tomcat是一 ...
- ---————for循环打印爱心
//打印爱心public class Xin{ public static void main (String [] args){ for(int i=1;i<=4;i++){ for(int ...
- awk统计文本里某一列重复出现的次数
比如这样的场景:现在有一个文本,里面是这样的内容: NOTICE: 12-14 15:11:13: parser. * 6685 url=[http://club.pchome.net/threa ...
- Js/如何修改easyui修饰的input的val值
1.关于js对input值的修改介绍:一般js改变input的val值,我一直使用的方法是: $('#id').val('test');这样的方式来进行修改.但是我使 用了class="ea ...
- C#action和func的使用
以前我都是通过定义一个delegate来写委托的,但是最近看一些外国人写的源码都是用action和func方式来写,当时感觉对这很陌生所以看起源码也觉得陌生,所以我就花费时间来学习下这两种方式,然后发 ...
- govendor 无法添加.h文件
例如:github.com\ethereum\go-ethereum\crypto\secp256k1 是一个CGO项目 通过govendor add +external只能引入secp256k1下的 ...
- [ 随手记 5 ] C/C++ 继承
个人理解: 继承:(意译)继续承接: A继承B,则A是派生类/子类,B为基类/父类: B有的成员变量/性质,A全部都有,而A有的B不一定有,在数学集合上可以说:B是A的子集: A继承B,可以说是A在B ...