参考代码
<%@ 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>
效果
