<style lang="less">
@import (reference) "../../theme/index.less";
.billContent {
height: 100%;
overflow: none;
}
.create-lunbotu-content{
display: flex;
justify-content: space-between;
}
.rowAsideLeft{
width: 48%;
height: 700px;
/* padding: 20px 80px 20px 40px; */
overflow: none;
/* border: 1px solid #dee2e6; */
}
.rowAsideRight{
width: 45%;
height: 700px;
overflow: auto;
}
.empty{
width: 100%;
height: 100%;
position: relative;
}
.empty-content{
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -54px;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.hasPics{
width: 100%;
height: 100%;
}
// .upload-cover{
// width: 100px;
// height:100px;
// display:flex;
// justify-content: center;
// align-items: center;
// }
.demo-upload-list{
display: inline-block;
width: 45%;
height: 150px;
text-align: center;
line-height: 100px;
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
}
.demo-upload-list-cover-img{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.img:hover .demo-upload-list-cover-img{
display: block;
}
.demo-upload-list-cover-img i{
position: absolute;
top:5px;
right:5px;
color: #fff;
font-size: 10px;
cursor: pointer;
margin: 0 4px;
}
.pic-list{
display:flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}
.pic-item{
width: 48%;
overflow: hidden;
margin: 10px 0;
}
.pic-item .img{
position: relative;
width: 100%;
overflow: hidden;
border-radius: 5px;
margin-bottom: 2px;
height: 200px;
display: flex;
background: #f6f6f6;
align-items: center;
}
.pic-item .img img{
display: block;
width: 100%;
}
.articleEditor-root-panel{
height: 100%;
overflow: none;
/* margin-left:2px;margin-right:2px; */
background-color: #F8F8F8;
position: relative;
}
.articleEditor-left-panel{
position: absolute;
left: 0px;
width:calc(~"100% - 218px");
background-color:transparent;
height:100%;
padding-top:12px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 12px;
text-align: center;
// border: solid 1px red;
}
.articleEditor-left-panel-sub{
width:100%;
height:100%;
max-width:1200px;
margin:0 auto; //确保水平居中
background-color:white;
border: 1px solid #E8E8E8;
overflow: auto;
}
.articleEditor-left-panel-sub::-webkit-scrollbar{ //去掉滚动条
display:none;
}
.articleEditor-left-panel-sub-title{
height:44px;
// background-color:blue;
font-size:14px;
font-family:PingFangSC;
font-weight:400;
color:rgba(34,34,34,1);
margin-left:15px;
margin-right:15px;
line-height: 44px;
}
.articleEditor-left-panel-sub-title-left{
float: left;
width: 50%;
height: 100%;
}
.seperator-v{
border: none;
width: 3px;
background-color: #419C9C;
height: 16px;
float: left;
margin-right:6px;
margin-top: 13px;
}
.seperator-h{
border: none;
width: 100%;
background-color: #E8E8E8;
height: 1px;
}
.articleEditor-left-panel-sub-title-right{
float:right;
}
.articleEditor-left-panel-sub-content{
height: calc(~"100% - 45px");
}
.articleEditor-left-panel-sub-content-baseInfo{
width: 100%;
// background-color: red;
padding-top: 12px;
padding-bottom: 13px;
display:inline-block
}
.articleEditor-left-panel-sub-content-baseInfo-left{
float: left;
width: calc(~"100% - 304px");
// background-color: yellow;
}
.articleEditor-left-panel-sub-content-baseInfo-right{
float: right;
width: 304px;
padding-left: 20px;
padding-right: 32px;
// background-color: blue;
}
.articleEditor-cover{
width:252px;
height:164px;
.upload-cover{
width: 100% !important;
height: 100% !important;
border: 1px solid #409C9C !important;
border-radius: 0px !important;
}
}
.articleEditor-right-panel{
position: absolute;
left:calc(~"100% - 218px");
right: 0px;
width:218px;
background-color: #FCFCFC;
border-left: 1px solid #E8E8E8;
height:100%;
bottom: 0px;
.ivu-tabs{
height: 100%;
}
.ivu-tabs-content{
height: calc(~"100% - 33px");
}
.ivu-tabs-bar{
margin-bottom: 0px;
}
}
.articleEditor-material-item{
// padding-left: 5px;
// padding-right: 5px;
padding: 5px;
border-bottom: 1px dashed #ddd;
display: block;
text-align: center;
cursor: pointer;
}
.articleEditor-material-item:hover{
background-color: fade(@primary-color, 30%);
}
.articleEditor-material-item-img{
max-width: 100%;
padding: 10px 0;
vertical-align: middle;
text-align: center;
}
</style>
<template>
<div class="articleEditor-root-panel">
<div class="articleEditor-left-panel">
<div ref="leftPanelSub" class="articleEditor-left-panel-sub" @scroll="doLeftPanelSubScroll">
<div class="articleEditor-left-panel-sub-title">
<div class="articleEditor-left-panel-sub-title-left">
<div class="seperator-v"></div>
<span style="float:left;">基本信息</span>
</div>
<div class="articleEditor-left-panel-sub-title-right">
<Button type="text" @click="showBaseInfo=!showBaseInfo"></Button>
</div>
<div style='clear:both'></div>
</div>
<div class="seperator-h"></div>
<div class="articleEditor-left-panel-sub-content">
<div v-show="showBaseInfo" class="articleEditor-left-panel-sub-content-baseInfo">
<div class="articleEditor-left-panel-sub-content-baseInfo-left" :style="needCover?'width: calc(100% - 304px);':'width: calc(100% - 104px);'">
<Form :model="article" label-position="right" ref="form" :rules="ruleValidate" :label-width="90">
<Form-item v-for="field in fieldListNoCover" :key="field.name" :label="field.title?field.title:getLabel(field.name)" :prop="field.name" style="text-align: left;">
<Input v-if="field.type === 'text'" v-model="article[field.name]" :placeholder="field.placeholder" />
<Checkbox v-else-if="field.type === 'check'" label="" v-model="article[field.name]"></Checkbox>
<DatePicker v-else-if="field.type === 'date'" transfer type="date" v-model="article[field.name]" placeholder="选择生效时间" ></DatePicker>
<div v-else-if="field.type === 'valid'" >
<DatePicker style="width:146px" type="date" v-model="article['validFrom']" placeholder="选择生效时间" ></DatePicker>
<div style="
width: 60px;
top: 0px;
left: 162px;
position: absolute;">有效期到</div>
<DatePicker style="
width: 146px;
top: 0px;
left: 220px;
position: absolute;"
type="date" v-model="article['validTo']" placeholder="选择失效时间" ></DatePicker>
</div>
</Form-item>
</Form>
</div>
<div class="articleEditor-left-panel-sub-content-baseInfo-right" v-if="needCover">
<div class="articleEditor-cover">
<!-- <CoverUpload v-if="needCover" :action="actionURL" :news="article" ref="coverUpload"></CoverUpload> -->
</div>
</div>
<div style='clear:both'></div>
</div>
<div>
<BUEditor ref="uEditor" :ueditorConfig="editorConfig" @ready="editorReady" style="height:700px"></BUEditor>
</div>
</div>
</div>
</div>
<div class="articleEditor-right-panel">
<Tabs size="small">
<TabPane label="样式" name="style">
<div style="height:100%;width:100%;overflow:auto">
<div v-for="(name, index) in articleMaterials" :key="index" class="articleEditor-material-item" @click="insertEditorHtml(name)">
<img :src="getMaterialStyle(name)" class="articleEditor-material-item-img"/>
</div>
</div>
</TabPane>
</Tabs>
</div>
</div>
</template>
<script>
import BUEditor from '../../commons/ueditor/ueditor.vue'
//富文本编辑器
//import systemConfig from '../../config/config'
//import CoverUpload from '../cover/cover-upload.vue'
const defaultNames = {
title:"标题:",
linkUrl:"链接地址:",
creator:"创建人:",
useLink:"使用链接:",
}
const defaultFields = [
{
name:'title',
type:'text'
},
{
name:'useLink',
type:"check"
},
{
name:'linkUrl',
type:'text'
}
];
export default {
props:{
article:{
type:Object,
required:true,
default:function(){
return {
creator:{name:""},
}
}
},
labelMap:{
type:Object,
required:false,
default:function(){
return{
}
}
},
visibleMap:{
type:Object,
required:false,
default:function(){
return{
}
}
},
fieldList:{
type:Array,
required:false,
default:function(){
return defaultFields;
}
},
topic:{
type:String
},
isSimple:{
type:Boolean,
required:false,
default:false
},
//vision:''
},
data(){
let that = this;
let urlCheck =new RegExp("(|https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]");
const linkUrlValidator=function(rule, value, callback){
if(that.article.useLink){
if(value&&value!=""&&urlCheck.test(value)){
callback();
}else{
callback(new Error("请输入正确的链接地址,如 http://a.bc"));
}
}else{
callback();
}
}
let _editorConfig = {
autoHeightEnabled:true,
initialFrameHeight:"400",
initialFrameWidth:'100%',
elementPathEnabled: false,
wordCount: false,
serverUrl: window.osConfig.baseUrl + "/ue",
// cookie_keys_tenant_id: SEDU.Util.tenant_key,
// cookie_keys_x_auth_token: nros.getToken()
};
return{
editorConfig: _editorConfig,
editorInstance:{},
showBaseInfo:true,
logoUrl:'',
//actionURL: SEDU.Util.getServerUrl(systemConfig) + "/basis/attachments/files",
ruleValidate:{
title:[
{required: true, message: '不能为空,最多28个字', trigger: 'blur', max: 28},
],
linkUrl:[
{required: false,type:'url',validator:linkUrlValidator, message: '请输入正确的链接地址,如 http://a.bc', trigger: 'blur'},
],
homeUrl:[
{required: false,type:'url', message: '请输入正确的链接地址,如 http://a.bc', trigger: 'blur'},
]
},
articleMaterials: ['material0001.gif', 'material0002.png', 'material0003.png', 'material0004.gif', 'material0005.png', 'material0006.gif', 'material0007.gif', 'material0008.gif', 'material0009.gif', 'material0010.gif', 'material0011.jpg', 'material0012.gif', 'material0013.png', 'material0014.png', 'material0015.gif']
}
},
methods:{
getLabel(name){
var labelMap = this.labelMap;
if(labelMap&&labelMap[name]&&labelMap[name]!=""){
return labelMap[name];
}
return defaultNames[name];
},
checkVif(name){
var visibleMap = this.visibleMap;
if(visibleMap &&visibleMap[name]){
return !(visibleMap[name] != null &&( visibleMap[name] == false|| visibleMap[name] == ""));
}
return true;
},
resetFields() {
this.$refs["form"].resetFields();
},
editorReady (editorInstance) {
this.editorInstance = editorInstance;
if(this.article&&this.article.content){
this.editorInstance.setContent(this.article.content);
}else{
this.editorInstance.setContent("");
}
},
linkQuestion(select){
},
validate(callback) {
var that = this;
this.$refs["form"].validate(valid => {
var content=this.editorInstance.getContent();
var params = {};
callback(valid,content,params);
});
},
doLeftPanelSubScroll(){
let leftPanelSubDom = this.$refs['leftPanelSub'];//.$el;
let uEditorDom = this.$refs['uEditor'].$el;
if(uEditorDom.offsetTop <= leftPanelSubDom.scrollTop + 12){
this.$refs['uEditor'].fixToolbar(true, leftPanelSubDom);
}else{
this.$refs['uEditor'].fixToolbar(false);
}
},
getMaterialStyle(name){
return require("../../assets/article/" + name);
},
insertEditorHtml(imgName){
//let imgUrl = window.location.origin + this.getMaterialStyle(imgName);
let imgUrl = this.getMaterialStyle(imgName);
this.$refs['uEditor'].execCommand('focus');
this.$refs['uEditor'].execCommand('insertimage', {
src: imgUrl,
});
}
},
created() {
},
computed:{
fieldListNoCover:function(){
if(this.fieldList){
return this.fieldList.filter((field, index, array)=>{
if(field.type === 'cover'){
return false;
}else{
return true;
}
});
}
return [];
},
needCover:function(){
let hasCover = false;
if(this.fieldList){this.fieldList.map((field, index)=>{
if(field.type === 'cover'){
hasCover = true;
return false;
}else{
return true;
}
})}
return hasCover;
}
},
mounted() {
},
components:{
BUEditor
//CoverUpload,FileUpload
},
watch:{
"article":function(article){
if(!this.editorInstance||!this.editorInstance.setContent){
return;
}
if(article&&article.content){
this.editorInstance.setContent(article.content);
}else{
this.editorInstance.setContent("");
}
}
},
}
</script>