当前位置: 代码迷 >> Java Web开发 >> easyui中弹框中使用百度编辑器不出来,该怎么解决
  详细解决方案

easyui中弹框中使用百度编辑器不出来,该怎么解决

热度:69   发布时间:2016-04-13 22:41:35.0
easyui中弹框中使用百度编辑器不出来

<base href="<%=basePath%>">
<!-- 配置文件 百度编辑器-->
<script type="text/javascript"src="<%=basePath%>/ueditor/ueditor.config.js"></script>
<!-- 百度编辑器源码文件 -->
<script type="text/javascript"src="<%=basePath%>/ueditor/ueditor.all.js"></script>

<script type="text/javascript">
var type;

$(function() {
 doc=window.parent;
//所属机构
$('#org').combotree({
width : 120,
panelHeight : 'auto',
url : 'xxnr!xxflList.action?comm=0',
});

$('#codetype_table').tree({
checkbox : false,
url : 'xxnr!xxflList.action',
animate : true,
lines : true,
onClick : function(node) {
//显示该类别对应的所有代码,判断是否可维护
$('#code_table').datagrid('load', {
xxflid : node.id
});
//左边菜单选中的节点机构
checkNode = node.id;
},
onSelect : function(node) {
$('#org').combotree('setValue', node.id);

}
});
//去除表格的横向滚动
$("#west").find(".datagrid-body").css("overflow-x","hidden");
//手动设置west表load-msg的显示位置
$("#west").find(".datagrid-mask-msg").css("left",30);  

$('#code_table').datagrid({
width : $("#mainPanle").width(),
height : $("#mainPanle").height(),
url : 'xxnr!xxflDataList.action?type=0',
fit:true,
fitColumns:true,
idField : '',
singleSelect : true,
loadMsg : '正在加载...',
nowrap : true,
rownumbers:true,
columns : [ [ 
{ field : 'contentid',title:'信息内容ID', width : 110, align : 'left',hidden:true }, 
{ field : 'title',title : '标题',width : 150},
{ field : 'content',title : '内容',width : 150},
{ field : 'xxzt',title:'信息状态', width : 100, align : 'left',formatter:function(value,row,index){
        if(value=="1"){
        return "可用";
        }else if(value=="0"){
        return "失效";
       }}},
{ field : 'cjr',title : '创建人',width : 100,align : 'right'},
{ field : 'cjrq',title : '创建时间',width : 100,align : 'right'},
{ field : 'zjxgr',title : '最近修改人',width : 100,align : 'right'},
{ field : 'zjxgrq',title : '最近修改时间',width : 100,align : 'right'},
{ field : 'fwcs',title : '访问次数',width : 110,align : 'right'},
] ],
toolbar : '#gs_tb',
pagination : true,
pageSize : 10,
onBeforeLoad : function() {
//加载前设置每列的title居中
$('.datagrid-header .datagrid-cell').css(
'text-align', 'center');
},
onLoadSuccess : function() {
$('#code_table').datagrid("selectRow", 0);
}
});
});
//点击新增弹出对话框
function add(){
openDialog('codeDialog','新增内容');

//填充对话框中的所有combobox的数据
    fillCombData();
    //为弹出框的'新增' ,'修改','删除'绑定click事件
    bindClick();
    //验证
   //bindfocus();
    //左边菜单选中的节点机构
var checkOrg = $('#codetype_table').tree("getSelected");
        if(checkOrg){
     doc.$('#xxflid').combotree('setValue',checkOrg.id);
    }
}
//填充对话框中的所有combobox的数据
function fillCombData(){
//绑定类型下拉列表改变事件
 doc.$('#xxlx').combobox({ 
 onSelect: function(){
 var t = doc.$('#xxlx').combobox('getValue');
  if(t==1){//文章
 doc.$('#tr1').show();
 doc.$('#tr3').hide();
 doc.$('#tr2').hide();
 }
 else if(t==2){//图片
 doc.$('#tr1').hide();
 doc.$('#tr2').show();
 doc.$('#tr3').hide();
 }else{//视频
 doc.$('#tr1').hide();
 doc.$('#tr2').hide();
 doc.$('#tr3').show(); 
  } 
    },
 editable:false  
}); 
doc.$('#cjrq').datetimebox({    
  required: true,    
  showSeconds: false,
  editable:false   
}); 
doc.$('#fbksrq').datetimebox({    
  required: true,    
  showSeconds: false,
  editable:false   
}); 
doc.$('#fbjzrq').datetimebox({    
 required: true,    
 showSeconds: false,
 editable:false   
}); 
var xxflid=doc.$('#xxflid');
xxflid.combotree({
width : 140,
panelHeight : 'auto',
url : 'xxnr!xxflList.action?comm=0',
required : true,
lines : true,
onSelect : function(node) {
// 判断是否是叶子节点
var isLeaf = $(this).tree('isLeaf', node.target);
if (!isLeaf) {
doc.$('#xxflid').combotree('setValue', '');
$.messager.show({
msg : '请选择叶子节点!'
});
//显示隐藏的编辑器
//$('#tr1').hide();
}
}
});
doc.$('#title').validatebox({
required : true,
validType : 'length[2,50]',
missingMessage : '请输入信息标题',
invalidMessage : '信息标题在2-50 位'
});
 
}
//为弹出框的'新增' ,'修改','删除'绑定click事件
function bindClick(){
doc.$("#btnadd_code").unbind().bind('click',function(){
      saveandAdd(); 
});
doc.$("#btnsave_code").unbind().bind('click',function(){
addorUpdateCode();
});
doc.$("#btnCancel_code").unbind().bind('click',function(){
closeDialog();
});
doc.$('.panel-tool-close').unbind().bind('click',function(){
closeDialog();
});
}

//点击对话框中‘取消按钮’的方法
function closeDialog(){
doc.closePopup_div('codeDialog');
//关闭对话框之后将对话框居中 主要是由于新增和修改是用的同一对话框  防止在父页面由于拖动后显示不居中
center();

}
//设置弹出窗口居中
 function center(){
 var dialog=doc.$('#codeDialog').closest('.window');
 var left=(doc.$("body").width()-dialog.width())/2;
 var top=(doc.$("body").height()-dialog.height())/2;
 dialog.css({
 left:left,
 top:top
 });
 }
 //监听窗口大小变化
    window.onresize = function(){
    setTimeout(domresize,300);
    };
//改变表格宽高
function domresize(){
$('#codetype_table').datagrid('resize',{
width : 600,
height : $("#west").height() - $("#lbxq").height() - 13
});
}
//点击”重置“时执行的方法
function resetCondition() {
$('#name').val("");
$('#org').combotree('setValue', '');
var node = $("#codetype_table").tree("getSelected");
if (node != null) {
$("#codetype_table").tree("reload");
}
checkNode = "";
}
//点击搜索条件中”查询“时执行的方法
function checkGS() {
$("#code_table").datagrid('load', {
xxflid : $('#org').combotree('getValue'),
name : $("#name").val(),
});

}
</script>

</head>
<body class="easyui-layout" style="overflow: hidden;">
<div region="west" split="false" style="width: 223px; padding:3px ;border:1px solid #ffffff;" id="west">
<div style="border:1px solid  #99BBE8;height:100%;">
<span class="leftTitles">内容结构</span>
<ul id="codetype_table" ></ul>
</div>
</div>
<div id="mainPanle" region="center" style=" padding:3px 3px 3px 0px; border:0px;">
   <div id="search_area" >
    <div id="conditon" style="width:100%; "> 
    <table cellpadding="0">
 <tr>
    <td>所属类别:</td>
    <td style="padding-right:10px"><input type="text"  id="org" style="vertical-align:middle;"  /></td>
    <td>名称:</td>
    <td style="padding-right:10px"><input type="text"  id="name" style="vertical-align:middle;"  /></td>
    <td><a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-search" plain="true" onclick="checkGS()">查询</a> </td>
    <td><a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-reset" plain="true" onclick="resetCondition()">重置</a> </td>
  </tr>
</table>
 </div>
     </div>
    <table id="code_table"></table>
    <div id="gs_tb" style="height:30px;" >
     <tb:getToolbar sjflid='<%=request.getParameter("gnid") %>' type="27"/>
</div>
    </div>
    
<!-- 新增 修改 弹出对话框 -->
<div id="codeDialog" class="easyui-window"  closed="true" style="width:600px; height: 500px;background: #ffffff;align:center;">
    <div >
    
     <form  id="code_form" method="post" >
        <!-- -token标签- -->
<table border="0"  align=center  cellpadding="3"  cellspacing="0" id="add_code">
<tr>
<td align="right">信息标题:</td>
<td><input id="title" name="title" style="width: 140px;" /></td>
<td align="right">信息类别:</td>
<td><input id="xxflid" name="xxflid"/>
</td>
</tr>
<tr>
<td align="right">信息类型:</td>
<td>
<select id="xxlx" name="xxlx"  style="width:145px;">  
    <option value="1">文章</option>   
    <option value="2">图片</option>   
    <option value="3">视频</option>   
    <option value="4">下载</option>   
</select> 
</td>
<td align="right">创建时间:</td>
<td>
          <input id="cjrq" type="text" name="birthday" style="width: 140px;"></input> 
</td>
</tr>
<tr>
<td align="right">发布开始日期:</td>
<td>
<input id="fbksrq" type="text" name="birthday" style="width: 145px;"></input> 
</td>
<td align="right">发布截止日期:</td>
<td>
<input id="fbjzrq" type="text" name="birthday" style="width: 140px;"></input> 
</td>
</tr>
<tr id="tr1" >
<td colspan="4" align="center">信息内容:
<script type="text/plain" id="myEditor"
name="content"></script> <script type="text/javascript">
UE.getEditor('myEditor',
{
initialFrameWidth : 500,
initialFrameHeight : 250,
toolbars : [ [ 'source', 'bold',
'italic', 'underline',
'fontborder', 'strikethrough',
'removeformat', 'formatmatch',
'pasteplain', '|', 'forecolor',
'backcolor',
'insertorderedlist',
'insertunorderedlist',
'selectall', 'cleardoc', '|',
'touppercase', 'tolowercase',
'|', 'emotion', 'scrawl',
'date', 'time', 'spechars', ] ]
});
</script>
</td>
</tr>
<tr id="tr2" style="display: none;">
<td colspan="4" align="center">图片上传:
<input  type="file"/>
</td>
</tr>
<tr id="tr3" style="display: none;">
<td colspan="4" align="center">视频上传:
<input  type="file"/>
</td>
</tr>
</table>
</form>
</div> 
<div class="windowButton">
            <a href="javascript:void(0)" id="btnadd_code"  plain="true"  class="easyui-linkbutton my-dialog-button"  icon="icon-ok" > 保存新增</a> 
            <a href="javascript:void(0)" id="btnsave_code" plain="true"  class="easyui-linkbutton my-dialog-button"  icon="icon-save" > 保存修改</a> 
            <a href="javascript:void(0)" id="btnCancel_code" plain="true"  class="easyui-linkbutton my-dialog-button" icon="icon-cancel" >取消</a>
        </div>  
  </div>
</body>
</html>

------解决思路----------------------
引入以下文件
<script type="text/javascript" charset="utf-8" src="<%=basePath %>/js/baidu/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath %>/js/baidu/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="<%=basePath %>/js/baidu/lang/zh-cn/zh-cn.js"></script>

添加网页
<script id="editor" type="text/plain" style="width:100%;height:200px;"></script>在表格中

添加js
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
就出来了,但是我出现了一个问题,就是关闭窗口再打开就不见了,对象是有的。。。
  相关解决方案