const { createEditor, createToolbar } = window.
wangEditor
const editorConfig = {
placeholder: '',
onChange(editor) {
const html = editor.getHtml()
}
}
const toolbarConfig = {
excludeKeys: [
'group-video',
'emotion'
]
}
var editor,toolbar;
$(function () {
var html = document.documentElement;
var tableHeight = html.clientHeight - 51 - 42 - 80;
console.info(tableHeight)
$.jgrid.defaults.width = '100%'
$("#jqGrid").jqGrid({
url: baseURL + 'cmaic/platnotice/list',
datatype: "json",
colModel: [
{ label: 'id', name: 'id', index: 'id', width: 50, key: true, hidden:true },
{ label: '标题', name: 'title', index: 'title', width: 120 },
{ label: '状态', name: 'statusCn', index: 'status', width: 60},
{ label: '通知方式', name: 'notifyTypeCn', index: 'notify_type', width: 60},
{ label: '截止时间', name: 'endDate', index: 'end_date', width: 80 },
{ label: '
创建人', name: 'createUserCn', index: 'create_user', width: 60 },
{ label: '
创建时间', name: 'createTime', index: 'create_time', width: 80 },
],
viewrecords: true,
height: tableHeight,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
pager: "#jqGridPager",
jsonReader : {
root: "page.list",
page: "page.currPage",
total: "page.totalPage",
records: "page.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
gridComplete:function(){
}
});
editor = createEditor({
selector: '#editor-container',
html: '',
config: editorConfig,
mode: 'default', // or 'simple'
})
editor.getConfig().MENU_CONF['uploadImage'] = {
server: baseURL + 'cmaic/platnotice/upload',
fieldName: 'img',
}
toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
});
var vm = new Vue({
el:'#app',
data:{
showList: true,
title: null,
platNotice: {},
q: {
title: ''
},
notifyTypeLS: [{id:"1",text:"通知一次"},{id:"2",text:"一直通知"}],
clientLxLS: [{id:"0",text:"全部"},{id:"1",text:"志远客户"},{id:"2",text:"百年药方"}],
save_type: "add",
// areaList:[{areaId:"0",areaName:"全部"},{areaId:"610200",areaName:"铜川市"},{areaId:"610300",areaName:"宝鸡市"}],
ruleValidate: {
title: [
{required: true, message: '标题不能为空', trigger: 'blur'}
]
}
},
methods: {
query: function () {
vm.reload();
},
add: function(){
vm.showList = false;
vm.title = "新增";
vm.save_type = "add";
vm.platNotice = {
status: true,
notifyType: '1',
clientLx: '0'
};
editor.setHtml('');
},
update: function (event) {
var id = getSelectedRow();
if(id == null){
return ;
}
vm.showList = false;
vm.title = "修改";
vm.save_type = "update";
vm.getInfo(id)
},
saveOrUpdate: function (event) {
var url = vm.save_type == "add" ? "cmaic/platnotice/save" : "cmaic/platnotice/update";
if (!editor.getText()){
layer.alert('公告内容不能为空！');
return;
}
if (!vm.platNotice.endDate){
layer.alert('请选择截止时间！');
return;
}
vm.platNotice.status = vm.platNotice.status?"1":"0";
vm.platNotice.endDate = dateFormat("YYYY-mm-dd HH:MM:SS", vm.platNotice.endDate);
vm.platNotice.content = editor.getHtml();
var lock = false;
layer.confirm('确认提交吗？', {
btn: ['确定','取消'] //按钮
}, function(){
if(!lock) {
lock = true;
Ajax.request({
type: "POST",
url: baseURL + url,
contentType: "application/json",
params: JSON.stringify(vm.platNotice),
successCallback: function (r) {
if(r.code === 0){
layer.msg("操作成功", {icon: 1});
vm.reload();
}else{
layer.alert(r.msg);
}
}
});
}
}, function(){
});
},
del: function (event) {
var ids = getSelectedRows();
if(ids == null){
return ;
}
var lock = false;
layer.confirm('确定要删除选中的记录？', {
btn: ['确定','取消'] //按钮
}, function(){
if(!lock) {
lock = true;
$.ajax({
type: "POST",
url: baseURL + "cmaic/platnotice/delete",
contentType: "application/json",
data: JSON.stringify(ids),
success: function(r){
if(r.code == 0){
layer.msg("操作成功", {icon: 1});
$("#jqGrid").trigger("reloadGrid");
}else{
layer.alert(r.msg);
}
}
});
}
}, function(){
});
},
getInfo: function(id){
$.get(baseURL + "cmaic/platnotice/info/"+id, function(r){
vm.platNotice = r.platNotice;
vm.platNotice.status = vm.platNotice.status == '1'?true:false;
editor.setHtml(vm.platNotice.content);
});
},
reload: function (event) {
vm.showList = true;
var page = $("#jqGrid").jqGrid('getGridParam','page');
$("#jqGrid").jqGrid('setGridParam',{
postData: {'title': vm.q.title},
page: 1
}).trigger("reloadGrid");
},
reloadSearch: function() {
vm.q = {
title: ''
}
vm.reload();
},
handleSubmit: function (name) {
handleSubmitValidate(this, name, function () {
vm.saveOrUpdate()
});
},
handleReset: function (name) {
handleResetForm(this, name);
},
getAreas: function () {
$.get(baseURL + "cmaic/platarea/getAreas", function(r){
if(r.code == 0){
vm.areaList = r.data;
}else{
layer.alert(r.msg);
}
});
},
initDicts() {
getDicts('notify_type').then(data => vm.notifyTypeLS = data);
getDicts('client_lx').then(data => vm.clientLxLS = data);
getDicts('product_lx').then(data => vm.productLxLS = data);
}
},
mounted(){
this.initDicts();
this.getAreas();
}
});<!DOCTYPE html>
<html>
<head>
<title></title>
<#include "/header.html">
<style>
.ivu-form-item {
margin-bottom: 12px;
vertical-align: top;
zoom: 1;
}
#editor—wrapper {
border: 1px solid #ccc;
z-index: 100; /* 按需定义 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 500px; }
</style>
</head>
<body>
<div id="app" v-cloak>
<div v-show="showList">
<Row>
<i-form ref="searchValidate" :model="q" :label-width="80">
<i-col :xs="24" :sm="24" :md="8" :lg="6">
<Form-item label="标题">
<i-input v-model="q.title" />
</Form-item>
</i-col>
</i-form>
</Row>
<Row style="padding-bottom: 10px">
<i-button @click="query" icon="ios-search">查询</i-button>
<i-button @click="reloadSearch" icon="md-refresh">重置</i-button>
<#if shiro.hasPermission("cmaic:platnotice:save")>
<i-button type="primary" @click="add" icon="md-add">新增</i-button>
</#if>
<#if shiro.hasPermission("cmaic:platnotice:update")>
<i-button type="primary" @click="update" icon="md-create">修改</i-button>
</#if>
<#if shiro.hasPermission("cmaic:platnotice:delete")>
<i-button type="error" @click="del" icon="md-trash">删除</i-button>
</#if>
</Row>
<Row>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</Row>
</div>
<Card v-show="!showList">
<p slot="title">{{title}}</p>
<i-form ref="formValidate" :model="platNotice" :rules="ruleValidate" :label-width="120">
<Row>
<i-col :xs="24" :sm="24" :md="24" :lg="24">
<Form-item label="标题" prop="title">
<i-input v-model="platNotice.title" placeholder=""/>
</Form-item>
</i-col>
</Row>
<Row>
<i-col :xs="24" :sm="12" :md="12" :lg="12">
<Form-item label="状态" prop="status">
<i-switch size="large" v-model="platNotice.status">
<span slot="open">正常</span>
<span slot="close">关闭</span>
</i-switch>
</Form-item>
</i-col>
<i-col :xs="24" :sm="12" :md="12" :lg="12">
<Form-item label="通知方式" prop="notifyType">
<i-select v-model="platNotice.notifyType">
<i-option v-for="r in notifyTypeLS" :value="r.id" :key="r.id">{{r.text}}
</i-option>
</i-select>
</Form-item>
</i-col>
</Row>
<Row>
<i-col :xs="24" :sm="12" :md="12" :lg="12">
<Form-item label="客户类型" prop="clientLx">
<i-select v-model="platNotice.clientLx">
<i-option v-for="r in clientLxLS" :value="r.id" :key="r.id">{{r.text}}
</i-option>
</i-select>
</Form-item>
</i-col>
<i-col :xs="24" :sm="12" :md="12" :lg="12">
<Form-item label="忽略区域" prop="ignoreAreas">
<!--<i-input v-model="platNotice.ignoreArea" placeholder="填写区域ID，
多个逗号分隔"/>-->
<i-select v-model="platNotice.ignoreAreas" multiple>
<i-option v-for="r in areaList" :value="r.areaId" :key="r.areaId">{{r.areaName}}
</i-option>
</i-select>
</Form-item>
</i-col>
</Row>
<Row>
<i-col :xs="24" :sm="12" :md="12" :lg="12">
<Form-item label="截止时间" prop="endDate">
<Date-picker v-model="platNotice.endDate" format="yyyy-MM-dd HH:mm:ss" type="datetime" style="width:100%;"></Date-picker>
</Form-item>
</i-col>
<i-col :xs="24" :sm="12" :md="12" :lg="12">
<Form-item label="跳转功能ID" prop="navMenuid">
<i-input v-model="platNotice.navMenuid" placeholder=""/>
</Form-item>
</i-col>
</Row>
<Row>
<i-col :xs="24" :sm="12" :md="12" :lg="12">
<Form-item label="产品类型" prop="productLxs">
<i-select v-model="platNotice.productLxs" multiple>
<i-option v-for="r in productLxLS" :value="r.id" :key="r.id">{{r.text}}
</i-option>
</i-select>
</Form-item>
</i-col>
<i-col :xs="24" :sm="12" :md="12" :lg="12">
<Form-item label="通知区域" prop="notifyAreas">
<i-select v-model="platNotice.notifyAreas" multiple>
<i-option v-for="r in areaList" :value="r.areaId" :key="r.areaId">{{r.areaName}}
</i-option>
</i-select>
</Form-item>
</i-col>
</Row>
<Row>
<i-col :xs="24" :sm="24" :md="24" :lg="24">
<Form-item label="公告内容" prop="content">
<div id="editor—wrapper">
<div id="toolbar-container"></div>
<div id="editor-container"></div>
</div>
</Form-item>
</i-col>
</Row>
<Form-item>
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
<i-button type="warning" @click="reload" style="margin-left: 8px"/>返回</i-button>
<!-- <i-button @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>-->
</Form-item>
</i-form>
</Card>
</div>
<script src="${request.contextPath}/statics/js/modules/cmaic/platnotice.js?_${.now?long}"></script>
</body>
</html>
本文介绍了解决在同一页面创建两个WangEditor实例时出现的位置错乱问题的方法。通过将文档使用的id改为ref，成功避免了组件间的相互影响，确保了编辑器的正常工作。
扫一扫
3611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
