vue2-editor使用

 

<template>

<div class="wrapper wrapper-content" id="notes" v-cloak>

<div class="row">

<div class="col-sm-12 animated fadeInRight">

<div class="mail-box-header">

<h2 langCode="Notification" params="通知发布">通知发布</h2>

</div>

<div class="mail-box">

<div class="mail-body">

<form class="form-horizontal" method="get">

<div class="form-group" style=" margin-bottom: 15px">

<label class="col-sm-1 control-label" :langCode="'Subject'" params="主题">主题：</label>

<div class="col-sm-5" style="position: relative">

<input type="text" class="form-control" value="" v-model="theme" maxlength="32">

</div>

<label class="col-sm-1 control-label" :langCode="'Recipient'" params="接收者">接收者：</label>

</div>

<div class="form-group" style=" margin-bottom: 15px">

<label class="col-sm-1 control-label" :langCode="'Publisher'" params="发布者">发布者：</label>

<div class="col-sm-5" style="position: relative">

<input type="text" class="form-control" value="" v-model="departmentName" maxlength="32" @focus="treeShowHide()">

<div id="treeDepartment" v-show="treeShow" style="height: 320px;width:400px;overflow-y: scroll;position: absolute;z-index: 9999;border: 1px solid #ccc">

<el-tree :data="data2" default-expand-all="" node-key="id" ref="tree" check-strictly :props="defaultProps" @node-click="getNodeData">

</el-tree>

</div>

</div>

</div>

<div class="form-group">

<label class="col-sm-1 control-label" :langCode="'Content'" params="内容">内容：</label>

<div class="col-sm-6">

<vue-editor v-model="content"></vue-editor>

</div>

<div class="col-sm-5">

<div id="treeDepartment1" style="height: 376px;width:400px;overflow-y: scroll;position: absolute;top:-90px;z-index: 9999;border: 1px solid #ccc">

<el-tree :data="data1" show-checkbox="" default-expand-all="" node-key="id" ref="tree" highlight-current :props="defaultProps">

</el-tree>

</div>

</div>

</div>

</form>

<form class="uploadForm" style="padding-left: 150px">

<input type ="file" name="file" class="fileContent hiddenClass" onchange="doUpload(this)"/>

<input type ="text" name="sessionId" class="hiddenClass"/>

<input type ="text" name="areaCode" class="hiddenClass"/>

</form>

<span langCode="Add_attachments">添加附件</span>

<span class="triggerUpLoad fa fa-paperclip" style="cursor: pointer;color:#78BC27" onclick="triggerUpLoad(this)"></span>

<div class="picC">

<ul class="picContent"></ul>

<ul class="fileContent"></ul>

</div>

</div>

<div class="mail-body text-right tooltip-demo">

<a class="btn btn-sm zbtn-bg" data-toggle="tooltip" data-placement="top" title="Send" @click='getCheckedKeys'><i class="fa fa-reply"></i> <span :langCode="'Send'" params="发送">发送</span></a>

<a class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Discard email" @click='cancle'><i class="fa fa-times" ></i> <span :langCode="'Give_up'" params="放弃">放弃</span></a>

<!--<a class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Move to draft folder"><i class="fa fa-pencil"></i> 存为草稿</a>-->

</div>

<div class="clearfix"></div>

</div>

</div>

</div>

</div>

</template>

<script>

import Vue from 'vue'

import '../../common/js/z_packge.js'

import { modal } from '../../common/js/modal.js'

import VueEditor from 'vue2-editor'

Vue.use(VueEditor);

export default {

name: "createNews",

data(){

return {

content: '',

theme:'' ,

brief:'',

data1: [],

data2: [],

defaultProps: {

children: 'children',

label: 'departName'

},

departmentId:'',

departmentName:'',

receiveDeptIds:'',

treeShow:false,

treeShowReceive:true,

}

},

methods:{

treeShowHide(){

let vm=this;

vm.treeShow=true;

},

getNodeData(data){

var vm=this;

vm.departmentName=data.departName;

vm.departmentId=data.id;

vm.treeShow=false;

},

getData(){

var getRoleListUrl = '/department/list';

var thisM = this;

$.ajaxSend(getRoleListUrl,{}).done(function (data) {

thisM.data2.push(data.payload.results.root);

thisM.data1.push(data.payload.results.root);

});

},

getCheckedKeys(){

let vm=this;

let receiveDept= this.$refs.tree.getCheckedKeys();

vm.receiveDeptIds=receiveDept.join(',');

if(vm.theme==''||typeof(vm.theme)==undefined){

modal.error($.i18n.prop('Please_fill_in_the_notice_heading'));

return false;

}

if(vm.departmentName==''||typeof(vm.departmentName)==undefined){

modal.error($.i18n.prop('Please_select_the_publisher'));

return false;

}

if(vm.receiveDeptIds==''||typeof(vm.receiveDeptIds)==undefined){

modal.error($.i18n.prop('Please_select_the_notification_recipient'));

return false;

}

if(vm.content==''||typeof(vm.content)==undefined){

modal.error($.i18n.prop('Please_fill_in_the_contents_of_the_notice'));

return false;

}

/**添加附件处理字段**picIds*/

var files = $('.picC').find('li');

let fileIds=[];

$.each(files, function (index, item) {

fileIds.push($(item).attr('picIds'));

});

var params ={

title: vm.theme,

publishName: vm.departmentName,

publishDeptId: vm.departmentId,

content: vm.content,

receiveDeptIds: vm.receiveDeptIds,

brief: vm.ctbrife(this.content),

attachmentIds:fileIds

};

let url = '/notice/save';

$.ajaxSend(url,params).done(function (data) {

if (data.code==='00000000') {

modal.success($.i18n.prop('Publish_successfully'));

vm.content ='';

vm.theme = '';

vm.$router.push('/notice')

}

});

},

cancle(){

window.history.back(-1);

},

ctbrife(str){

// str = str.replace(/\<c:if\b[^>]*>([\s\S]*?)</c:if>/g,'')

str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag

str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白

//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行

str=str.replace(/ /ig,'');//去掉 

return str.substring(0,40);

}

},

filters:{

ctbrife: function(str){

str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag

str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白

//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行

str=str.replace(/ /ig,'');//去掉 

return str.substring(0,40);

}

},

mounted(){

this.getData();

}

}

</script>