参考代码
<%@ Page Title="" Language="C#" MasterPageFile="~/super/topfoot.Master" AutoEventWireup="true" CodeBehind="news_text.aspx.cs" Inherits="Tcofficial.Web.super.news_text" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" charset="utf-8" src="lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor/lang/zh-cn/zh-cn.js"></script>
<style>
.list_text_btn {
margin-top: 0px;
}
#txtContent img {
width: 100%;
}
.car-pic {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.car-pic:hover .car-pic-change {
display: block;
}
.car-pic-change {
display: none;
cursor: pointer;
position: absolute;
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
background: rgba(0,0,0,0.2);
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="page" class="main_box" v-cloak>
<div>
<h2 class="sub-header">新闻编辑</h2>
</div>
<form id="uploadForm">
<div class="row">
<input type="hidden" class="form-control" name="PID" placeholder="" v-if="PID" v-model="list_data.PID">
<div class="col-md-3">
<div class="form-group">
<label for="exampleInputName2">标题</label>
<input type="text" class="form-control" name="FTitle" placeholder="" v-model="list_data.FTitle" onkeyup="this.value=this.value.replace(/\s+/g,\'\')">
</div>
<div class="form-group">
<label for="exampleInputName2">新闻类型</label>
<select class="form-control" name="KNewsType" v-model="list_data.KNewsType">
<option v-for="(item,index) in cate_data" :value="item.PID" >{{item.FName}}</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputName2">发布人</label>
<input type="text" class="form-control" name="FAuthor" placeholder="" v-model="list_data.FAuthor">
</div>
<div class="form-group">
<label for="exampleInputName2">排序 (数值越大显示靠前，数值相同按发布时间排序)</label>
<input type="number" class="form-control" name="FSort" placeholder="" v-model="list_data.FSort">
</div>
<div class="form-group">
<label for="exampleInputName2">其他选项</label>
<div class="form-control">
<input type="checkbox" name="FIsShow" placeholder="" checked v-model="list_data.FIsShow"> 是否显示
<input type="checkbox" name="FState" placeholder="" checked v-model="list_data.FState" hidden>
</div>
</div>
<div class="form-group">
<label for="exampleInputName2">封面</label>
<div onclick="FImgInput.click()">
<div v-if="list_data.FImg==\'\'"><a href="javascript:void(0)">点击上传</a></div>
<div v-else class="car-pic">
<img id="car-img" v-bind:src="list_data.FImg" style="width:100%" />
<div class="car-pic-change">点击更换图片</div>
</div>
</div>
<input type="file" id="FImgInput" name="FImgInput" accept="image/*" v-on:change="changeImg" style="display:none;">
<input type="text" name="FImg" v-model="list_data.FImg" style="display:none;"/>
</div>
<div class="form-group">
<label for="exampleInputName2">简介</label>
<textarea class="form-control" name="FInTroduce" style="height:84px; overflow:hidden;" placeholder="不填则由系统自动截取" v-model="list_data.FInTroduce"></textarea>
</div>
<div class="list_text_btn">
<input value="保存" type="button" class="btn btn-primary btn-long" v-on:click="submit" v-bind:disabled="editorLoading"/>
<input value="返回" type="button" class="btn btn-default btn-long" v-on:click="cancel"/>
</div>
</div>
<div class="col-md-9">
<div style="position:relative;">
<div id="txtContent" style="width:90%; margin:0 auto;"></div>
<div style="width:90%; margin:10px auto 0;">* 建议单张图片≤500kb 支持格式.jpeg/.jpg/.png；统一使用字号：微软雅黑 16px 纯黑 行距1.5倍</div>
<div style="width:90%; margin:10px auto 0;">* 若编辑器加载异常，请点击返回重新进入，或Ctrl+F5强制刷新</div>
</div>
</div>
</div>
</form>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentJS" runat="server">
<script type="text/javascript">
var pageManage = new Vue({
el: "#page",
data: {
list_data: {
PID: \'\',
FImg: \'\',
FTitle: \'\',
FInTroduce: \'\',
FAuthor: \'admin\',
FIsShow: \'1\',
FSort: \'1\',
KNewsType: \'1\',
FState: \'1\'
},
cate_data: \'\',
PID: \'\',
editor: \'\',
editorLoading: true
},
mounted: function () {
var self = this;
//初始化编辑器
//初始化编辑器
var toolbar = [
[
\'source\', //源代码
\'undo\', //撤销
\'redo\', //重做
\'fontfamily\', //字体
\'fontsize\', //字号
\'blockquote\', //引用
\'link\', //超链接
\'unlink\', //取消链接
\'emotion\', //表情
\'anchor\', //锚点
\'bold\', //加粗
\'italic\', //斜体
\'underline\', //下划线
\'horizontal\', //分隔线
\'strikethrough\', //删除线
\'forecolor\', //字体颜色
\'backcolor\', //背景色
\'cleardoc\', //清空文档
\'selectall\', //全选
\'removeformat\', //清除格式
\'formatmatch\', //格式刷
\'autotypeset\', //自动排版
],
[
\'justifyleft\', //居左对齐
\'justifyright\', //居右对齐
\'justifycenter\', //居中对齐
\'justifyjustify\', //两端对齐
\'indent\', //首行缩进
\'rowspacingtop\', //段前距
\'rowspacingbottom\', //段后距
\'lineheight\', //行间距
\'customstyle\', //自定义标题
\'paragraph\', //段落格式
\'insertorderedlist\', //有序列表
\'insertunorderedlist\', //无序列表
\'imagenone\', //默认
\'imageleft\', //左浮动
\'imageright\', //右浮动
\'imagecenter\', //居中
\'simpleupload\', //单图上传
\'insertimage\', //多图上传
\'insertvideo\', //视频
]
];
//先删除之前实例的对象
UE.delEditor(\'txtContent\');
//加载编辑器
var editor = UE.getEditor(\'txtContent\', {
toolbars: toolbar,
initialFrameWidth: \'100%\',
initialFrameHeight: \'610\',
scaleEnabled: false
});
editor.addListener("ready", function () {
self.editor = editor;
//获取地址栏PID
var PID = PublicTool.getUrlParam(\'PID\');
if (PID == null) {
//添加模式
self.editorLoading = false;
} else {
//编辑模式
self.PID = PID;
//获取图文数据
var params = { "PID": PID };
var url = \'/handler/newslist/newslist_select.ashx\';
PublicTool.sendPostRequest(url, params, function (data) {
var res = JSON.parse(data);
if (res.status == 1 && res.data.length > 0) {
self.setListData(res.data[0]);
self.editorLoading = false;
} else if (res.status == 0) {
alert(res.info)
}
}, function (jqXHR, textStatus, errorThrown) {
alert(\'数据加载失败请刷新重试\');
});
}
});
//获取所有分类
var params_cate = {};
var url_cate = \'/handler/newstype/newstype_select.ashx\';
PublicTool.sendPostRequest(url_cate, params_cate, function (data) {
var res = JSON.parse(data);
if (res.status == 1) {
self.setListCateData(res.data);
} else {
alert(res.info)
}
}, function (jqXHR, textStatus, errorThrown) {
alert(\'数据加载失败请刷新重试\');
});
},
methods: {
cancel: function () {
//删除编辑器
var self = this;
try {
if (typeof (UE.getEditor("txtContent")) != \'undefined\') {
UE.getEditor("txtContent").destroy();
}
setTimeout(function () {
location.href = "news_list.aspx";
}, 100);
} catch (e) {
console.log(e)
location.href = "news_list.aspx";
}
},
checkInputs: function () {
//检查输入完整
var self = this;
if (self.list_data.FTitle.trim() == \'\') {
alert(\'请输入新闻标题\');
return false;
}
return true;
},
changeImg: function (event) {
//更换图片
var self = this;
var file = event.target.files[0];
var imgSize = file.size / 1024;
if (imgSize > 500) {
alert(\'请上传大小不要超过500KB的图片\');
} else {
var reads = new FileReader();
reads.readAsDataURL(file);
reads.onload = function (e) {
self.list_data.FImg = this.result;
};
}
},
setListData: function (data) {
//设置列表显示数据
var self = this;
self.list_data = data;
self.editor.setContent(data.FDetail);
},
setListCateData: function (data) {
//设置分类列表显示数据
var self = this;
self.cate_data = data;
},
submit: function () {
//更新图文
var self = this;
if (!self.checkInputs()) {
return;
}
if (self.editorLoading) {
alert("编辑器加载异常，请点击返回重新进入，或Ctrl+F5强制刷新");
return;
}
try {
var url = \'\';
var formData = new FormData($("#uploadForm")[0]);
var eHtml = self.editor.getContent();
var eTxt = self.editor.getContentTxt();
formData.set("FDetail", eHtml);
if (self.list_data.FInTroduce == "") {
var str = eTxt.substring(0, 46) + "...";
formData.set("FInTroduce", str);
}
if (self.PID != \'\') {
url = \'/handler/newslist/newslist_update.ashx\';
} else {
url = \'/handler/newslist/newslist_insert.ashx\';
};
PublicTool.sendFormdataPostRequest(url, formData, function (data) {
var res = JSON.parse(data)
if (res.status == "1") {
location.href = "news_list.aspx";
} else {
alert(res.info);
}
}, function () {
alert(\'数据加载失败请刷新重试\');
});
} catch (e) {
alert("提交更新异常，请重新打开编辑页")
}
}
}
})
</script>
</asp:Content>
效果
