Extjs+iFrame+百度编辑器

来源：互联网发布：挑选墙布知乎编辑：程序博客网时间：2024/04/28 04:10

由于项目需要，百度编辑器在一个单独的jsp中，Extjs通过ifram的方式来引用这个jsp以达到嵌套编辑器的目的

首先当然要创建一个单独的jsp放编辑器，创建方式你可以参考百度编辑器的官网，我这里也贴出个代码

</script><script type="text/javascript" src="<%=contextPath%>/ueditor/editor_config.js"></script><script type="text/javascript" src="<%=contextPath%>/ueditor/editor_all.js"></script><link href="<%=contextPath%>/ueditor/themes/default/ueditor.css" rel="stylesheet" /><script type="text/javascript"></script></head><body><form method="post" action="<%=contextPath%>/activity/upActivityEditor.html"><TEXTAREA id=myContent name="myContent"></TEXTAREA>  <SCRIPT type=text/javascript>     var editor = new UE.ui.Editor(); //editor.render("myEditor");     //1.2.4以后可以使用一下代码实例化编辑器     UE.getEditor('myContent'); UE.getEditor('myContent').addListener("selectionChange",function(){var editorValue = UE.getEditor('myContent').getContent(); window.parent.getEditorValue(editorValue);});</SCRIPT><button type="submit" value="提交">提交</button><input id="activityId" /></form><script type="text/javascript">

其中红色为比较重要的部分啦

一个是创建编辑器，还有一个是增加监听事件，这里说明下，监听事件里面的那个"selectionChange"个引用符号，一定钥匙双引号，不能是单引号，否则事件无法运行

这里再贴出一个extjs的代码

var content;
function getEditorValue(editorValue){
content = editorValue;
return editorValue;
};

这一段则是用于保存iframe中传来的值的

记住，这个方法一定要写在

Ext.onReady(function() {}

方法外面，如果写在这里面，嘿嘿，你会被弄的很郁闷，为啥？因为Js会提示找不到这个方法

再下面创建一个隐藏域：

,{
       xtype : 'textfield',
       fieldLabel : '编辑器隐藏数据存放',
       name : 'content',
       id : 'content',
       allowBlank : true,
       hidden : true,
       value : '',
       maxLength : 20,
       anchor : '80%'
      }

然后在你的提交按钮中增加一段代码（注释掉的就是我用来弹出来看的！！）

text : '保存',
handler : function() {
// alert(content+'new');

Ext.getCmp("content").setValue(content);

// var editorValue = Ext.getCmp("content").value;
// alert(editorValue);

好了，这个就是这方面的问题了，如果其他问题的话，那就看别的文章了，我后续还会发布有关于百度编辑器碰到的问题的文章！希望能帮到大家

后续还有个图片上传问题！！明天给上来！！

如果这块有什么问题，可以留言，我每天都会上博客的，看到就会回！！

这里引用csdn一位朋友的博客来做个具体的说明

最近一段时间在弄ExtJS有关的项目，发现自己对于JavaScript东东实在是欠缺很多东西，所以写这篇有感记录一下，希望对大家有点帮助,^V^。

在ExtJS经常有使用TabPanel的例子，而TabPanel里的一个Panel镶嵌了一个JSP或者Html等等的子页面，而我们有时候需要在子页面上对父页面的

TabPanel进行一定的操作，比如说为TabPanel添加一个Panel，这样需要我们在子页面中能够获得父页面的TabPanel的对象或者在父页面中已经写好了的

对TabPanel添加Panel的方法。

子页面中无需多说了，一般是使用 window.parent.XXX 或者 window.parent.XXX() 的方式获取父页面对象或者方法( 注意：XXX代表父页面的

对象或者方法 )，如以下代码（addTab是子页面function，goto是父页面的function）：

1 function addTab(url,proName,proId){2          url = "projectInfo.jsp?projectId=" + url;3          window.parent.goto(url,"项目概况",proName,proId,'4');4 };

有时候经常我们使用window.parent.goto()获取不到方法，这是为什么呢，主要在一个JS的一个作用域的问题，由于在ExtJS中父页面常常采用Ext.onReady()方法的一个使用，常常会将定义放在这个方法中，比如:

1 Ext.onReady(function(){2     function goto(){3          XXXXXXXXXX....4     }5    var centerPanel = Ext.TabPanel();6 })
  这个地方的goto和centerPanel是处于Ext.onReady区域内的，作用域也在这个里面，不是全局的，所以我们在子页面访问不到，要访问是，就将方法和对象
 
放到Ext.onReady外面去。这样对于一些全局的方法，对象子页面有用的，我们在父页面里都设成全局的，以便于使用。